Design a light-mode web interface screen: precision fintech infrastructure softened by warm bone surfaces, crisp burnt-clay emphasis, and weightless isometric glass cards.
LAYOUT
The page flows as a structured single-column stack broken into strict 50/50 hero splits and 3-column feature grids. Header navigation anchors the top with inline utility links and a right-aligned CTA. Below the hero split and logo ribbon, sections alternate between 3-column micro-cards and asymmetric 40/60 copy-to-interface demonstration layouts, culminating in a full-width dark developer console.
PALETTE (use these exact hex values)
- #FBFBFA — Bone Canvas: dominant light background tone across hero and primary content blocks
- #FFFFFF — Card White: elevated card surfaces, metrics dashboard, and feature containers
- #111318 — Obsidian Dark: primary call-to-action buttons, dark code terminal section, and logo
- #C8533F — Terracotta Flame: highlighted focal words in primary headings, eyebrow labels, and icon tints
- #FBEFEB — Peach Blush: background for circular feature icons and category pill backgrounds
- #4EA874 — Terminal Sage: positive metrics indicators, checkmark badges, and chart trendlines
- #121417 — Charcoal Text: primary headings, prominent metrics values, and primary button labels
- #5A5E66 — Slate Body: explanatory paragraphs, navigation links, and inactive metrics
- #E9E7E1 — Hairline Border: subtle boundaries around feature cards, dashboard preview, and code containers
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Haas Grotesk), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 38px heading, 64px display. Tracking -0.03em at display, -0.01em at body, 0.08em at eyebrow. The typographic tone is architectural, rational, and modern, conveyed via a neo-grotesque sans-serif with tight negative tracking at scale. It evokes Swiss institutional reliability while remaining friendly through open apertures and warm accenting. Inter or Plus Jakarta Sans are optimal substitutes due to their robust micro-legibility and geometric numerals.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 128px between sections, 1200px container, airy density.
DEPTH
Depth is delivered primarily through dimensional graphic rendering rather than aggressive UI dropshadows. Standard cards sit flat or slightly elevated with hairline 1px borders (#E9E7E1) and subtle 4px vertical offsets with 12px blur at 3% opacity. The dramatic floating effect is reserved for the hero illustration, using soft ambient blur pools beneath isometric cards.
IMAGERY
Imagery features weightless, floating 3D plastic/frosted credit cards set at a dynamic isometric incline. Cards cast soft colored reflections—pistachio green (#75B88D) and coral peach (#F28E75)—onto the floorplane. Photography of real people is completely absent; abstract dimensional hardware and clean mock UI vectors establish authority.
SIGNATURE DETAIL — the thing that makes this design itself
The signature visual device is the dual-tone heading pairing charcoal with warm terracotta (#C8533F), anchored beside floating isometric frosted payment cards that emit ambient peach and mint glows. Misusing this pattern by tinting entire paragraphs or applying vibrant neon hues will destroy its restrained financial elegance.
MUST
- Keep the canvas background strictly on warm tone #FBFBFA to avoid clinical sterile blues.
- Restrict the terracotta accent (#C8533F) strictly to eyebrow badges and 1-2 highlighted headline words.
- Enclose all feature icons inside 48px round blush discs (#FBEFEB).
- Maintain generous 128px vertical padding between top-level content sections.
AVOID
- Do not use pure black (#000000); use deep obsidian #111318 for type and buttons.
- Do not add drop shadows exceeding 8px blur on standard white feature cards.
- Never highlight entire paragraphs in terracotta; isolate emphasis to short header phrases.
- Do not use full pill (999px) border radius on the primary action buttons.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1312:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
