Design a light-mode website section: calm institutional fintech authority transitioning from luminous ambient whitespace into midnight petrol depth.
LAYOUT
The layout is divided horizontally into two balanced realms. The upper half is a centered single-column stack comprising trust badge, two-line heading, descriptive paragraph, and twin CTA buttons. The lower half expands into a 6-column grid inside a max-width container, distributing brand info, four navigation categories, a newsletter capture card, and terminating in a single-row utility ribbon.
PALETTE (use these exact hex values)
- #04272c — Midnight Petrol: Deep structural background for the full-width footer and anchor section
- #ffffff — Pristine Snow: Primary high-clarity background for the upper conversion section
- #0d4f4a — Deep Forest Teal: Primary CTA button surface and high-emphasis brand elements
- #10685e — Pine Accent: Headline highlight span, newsletter subscribe button, and section underline markers
- #eaf6f4 — Mint Glaze: Background fill for the top trust pill badge
- #0d181c — Charcoal Slate: Dominant headline typography in the upper white section
- #53636b — Muted Slate: Descriptive subtitle and secondary copy on light canvas
- #8da3a6 — Glacier Mist: Navigation links, newsletter description, and legal sub-footer text
- #021c20 — Petrol Inset: Input background fill within the dark footer newsletter card
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Text,system-ui), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px subheading, 44px heading, 52px display. Tracking -0.025em at display, -0.01em at body, 0.02em at micro. The typographic tone is institutional, precise, and understated. Set in a contemporary neo-grotesque sans (closely matching Inter or Plus Jakarta Sans), it combines tight negative tracking on large titles with open, highly legible body copy. Its neutrality allows the financial AI proposition to feel regulated, solid, and enterprise-grade.
GEOMETRY & SPACING
Corner radii — cards 8px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is achieved through pure surface juxtaposition rather than drop shadows. The top section relies on subtle atmospheric vector mesh waves on the horizontal margins, while the footer drops sharply into #04272c. Elements inside the footer use sunken surfaces (like #021c20 for inputs) with 1px structural borders rather than box shadows.
IMAGERY
The imagery language is abstract and ambient: soft, mathematically precise vector line waves and gradients that suggest financial data flows without literal charts. Stock photos of people or generic corporate buildings are strictly avoided to preserve the institutional AI aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The defining signature is the clean, unblurred tectonic shift from a bright ambient white CTA zone into an monolithic midnight petrol (#04272c) footer, punctuated by pine teal (#10685e) phrase highlights and column underline accents. It feels like stepping from a well-lit boardroom into the secure algorithmic core beneath it.
MUST
- Use pine teal #10685e exclusively for key typographic highlights, underline anchors, and interactive accents.
- Maintain the sharp boundary transition between the white upper CTA zone and the #04272c footer zone without gradients.
- Include the small 24px wide teal rule under each footer category heading for visual anchoring.
- Keep input borders understated (#0f3f44) to blend into the dark petrol footer surface.
AVOID
- Do not use generic blue or vibrant neon greens; stick strictly to the muted institutional petrol and pine palette.
- Do not curve the interface boundary between the white CTA section and the dark footer.
- Do not omit the underline indicator below footer column headers.
- Do not make the newsletter subscribe input bright white against the deep petrol background.
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 中尝试 
