Design a light-mode website section: editorial serif authority meets nocturnal fintech precision through crisp micro-ledgers and deep pine surfaces.
LAYOUT
The composition follows a two-tiered vertical structure: an upper light hero module encased in a massive rounded canvas, resting above a comprehensive multi-column footer in deep spruce black. The hero uses an asymmetric 55/45 split, anchoring narrative arguments and conversion buttons on the left while banking the physical card and ledger UI on the right. The footer transitions smoothly into a balanced five-column grid: brand and newsletter capture on the far left, followed by four cleanly organized link stacks, ending with a horizontal baseline copyright rule.
PALETTE (use these exact hex values)
- #FAFBF9 — Canvas Hero: Background fill for the upper hero and value proposition container.
- #05161A — Canvas Nocturne: Deep spruce black base for the footer and overarching framing canvas.
- #FFFFFF — Card Surface White: Pure white surface for transaction ledger card and interactive hero widgets.
- #0D6B4F — Pine Primary: Primary conversion button fills, active indicators, and checkmarks.
- #3CD099 — Signal Mint: Footer category label kickers and live-status indicator pips.
- #0B2024 — Field Surface Dark: Input field background and social icon pill container on dark surfaces.
- #101918 — Ink Charcoal: Primary serif headings and high-contrast numerical metrics on light canvas.
- #586361 — Muted Slate: Supporting descriptive body copy and neutral light-mode captions.
- #899C98 — Phosphor Gray: Navigation text links and copyright metadata on the dark footer canvas.
TYPOGRAPHY
Typeface Newsreader (or Source Serif 4, Playfair Display, Georgia), weights 400/500. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 46px display. Tracking -0.02em. The typographic pairing delivers refined executive credibility by contrasting Newsreader's literary, intellectual authority with Inter's cold, operational utility. The display serif projects high-trust financial security reminiscent of institutional private banking, while the sans-serif ensures data density in the ledger remains completely legible at 11px and 13px. If substituting, choose high-contrast editorial serifs like Fraunces or Source Serif 4 rather than geometric modern display types.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created primarily through flat layer stacking rather than dramatic elevation tiers. The white UI card uses a broad, ambient drop shadow (0 16px 40px rgba(5,22,26,0.08)) that allows it to float cleanly over the pale hero sheet. The tilted debit card uses physical rotation and subtle directional lighting on its dark gradient surface to establish dimensional realism.
IMAGERY
Visual assets are strictly schematic and product-representative: a tilted matte virtual corporate card with real micro-details (EMV chip, embossed text, Visa wordmark) overlapping a crisp application dashboard widget. Behind the hardware floats a very faint, mathematically ordered radial dot matrix field. Generic photography, hand-drawn vector spots, or illustrative 3D figurines are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the dramatic contrast between the high-contrast literary serif headline and the floating matte-black payment card partially overlapping a pure-white dashboard ledger widget. This establishes an immediate narrative bridge between institutional banking trust and real-time autonomous agent infrastructure. It fails when the card is decoupled from the transaction panel or when the serif is swapped for a generic geometric sans.
MUST
- Anchor display titles with an editorial serif while keeping all data and UI copy in a clean sans.
- Use deep forest pine (#0D6B4F) for positive actions and mint (#3CD099) strictly for dark-mode labels.
- Frame the main hero in an explicit light rounded container (radius 24px–32px) over the dark foundation.
- Keep card transaction rows visually compact with 8px internal padding and hairline 1px dividers.
AVOID
- Never apply the serif typeface to interface buttons, table rows, or footer links.
- Do not introduce pure neon greens or generic tech blues; stick to organic pine and mint tones.
- Avoid sharp 0px corners; all interactive cards and surfaces must carry 8px to 16px radius.
- Never use heavy black borders; separate rows using light-grey tint lines (#F0F4F2) or dark slate (#143338).
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 中尝试 
