Design a light-mode website section: quiet enterprise fintech clarity structured by cool cobalt accents, concentric orbital arcs, and modular tabular utility.
LAYOUT
The vertical composition is split into three clean tiers. The top tier features a prominent isolated CTA card spanning the full content grid with centered content hierarchy. The middle tier introduces an asymmetric footer layout: a brand info column, four structured link columns, and a right-anchored lead capture card bordered by a vertical rule. The bottom tier seals the page with an edge-to-edge legal bar separated by a subtle 1px border.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Global page canvas and inner text field backgrounds.
- #F6F8FE — Atmosphere Tint: Background fill for the primary rounded hero CTA card.
- #2563EB — Cobalt Primary: Primary conversion button fill, email icon glyph, and category badge accent.
- #EEF2FF — Periwinkle Mist: Pill badge backdrop and newsletter icon container background.
- #0F172A — Obsidian Slate: High-contrast headings, column categories, and brand wordmark.
- #64748B — Muted Slate: Explanatory subtext, navigation links, and copyright metadata.
- #E2E8F0 — Hairline Border: Dividers, newsletter input outline, and footer boundary lines.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 14px subheading, 16px body-lg, 48px display. Tracking -0.025em for display, -0.01em for UI text. The typographic stance is precise, technical, and executive. Inter (or similar neo-grotesques like Plus Jakarta Sans) gives the 48px display headline an authoritative, confident weight without resorting to serif formality. Small tabular sizes (11-14px) maintain exceptional legibility via neutral geometric proportions, perfectly suited for high-density private equity and enterprise SaaS contexts.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is flattened and expressed through subtle color boundaries rather than drop shadows. Surface elevation level 1 relies entirely on the faint hue contrast of #F6F8FE against pure white #FFFFFF, delineated by a 1px solid border. Buttons remain flat solid fills without bevels, gradients, or ambient diffuse glows.
IMAGERY
Vector graphics are limited to ethereal, technical line art: ultra-faint concentric circular arcs that evoke orbital targeting or radar sweeps, complemented by a precision dot matrix on the right boundary. Photography or illustrative characters are strictly absent, maintaining a clinical, institutional financial tech aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The singular identity anchor is the tinted CTA shell featuring faint vector orbit arcs combined with a subtle dot matrix, crowned by a micro periwinkle target badge. This evokes proprietary radar intelligence without cluttering the CTA text. It is ruined when orbits become too high-contrast or when substituted with generic 3D illustrations.
MUST
- Retain ample 64px padding around headline copy inside the CTA card.
- Keep concentric orbit lines and dot grids at very low opacity (10% to 15%).
- Use solid cobalt #2563EB strictly for primary actions and key focal glyphs.
- Enforce a 24px border radius on the outer CTA shell and 8px on controls.
AVOID
- Do not introduce harsh drop shadows; depth is strictly atmospheric and flat.
- Never fill the CTA background with saturated blue or dark tones.
- Do not remove the vertical rule separating the link columns from the newsletter.
- Avoid pill-shaped buttons for the primary CTA; restrict pills to badges only.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试