Design a light-mode website section: institutional fintech precision grounded in crisp code panels and luminous peripheral ambient glows.
LAYOUT
The header spans full width up to 1240px with wordmark left, center-aligned nav links with a blue API micro-pill, and CTA right. The hero divides into an asymmetrical two-column grid: left side stacks status pill, 52px headline, body description, dual CTA buttons, and a 4-card metric strip. The right side contains an overlapping developer diagram featuring an elevated dark code editor, an architecture node tree, and a secondary terminal output window. Below the fold, a centered logo strip leads into a centered section header with horizontal category navigation tabs.
PALETTE (use these exact hex values)
- #fbfbfc — Canvas Base: Primary background surface across the entire page.
- #ffffff — Card Surface Light: Background for floating light metric cards and architecture nodes.
- #16191e — Console Dark: Background for primary interactive dark code block.
- #0f1115 — Text Primary: Display headlines, navigation links, and primary CTA background.
- #667085 — Text Secondary: Body copy, subheaders, code tabs, and inactive nav labels.
- #eb3f36 — Brand Red: Accent text highlights, notification pips, and flow connector routes.
- #eaecf0 — Border Subtle: Hairline perimeter borders for cards, buttons, and divider lines.
- #22c55e — Status Green: Success terminal indicators, API status pips, and checkmarks.
TYPOGRAPHY
Typeface Geist Sans (or Inter, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 24px subheading, 36px heading, 52px display. Tracking -0.03em at display, -0.01em at body. The type system communicates institutional stability paired with bleeding-edge developer ergonomics. Using an engineered neo-grotesque like Geist Sans or Inter with aggressive negative tracking (-0.035em) creates a commanding, reliable presence without feeling generic. Monospaced elements are treated as first-class citizens, perfectly dialed with generous vertical line-height for effortless code parsing.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created using a multi-plane layering strategy rather than heavy skeletal borders. The base canvas recedes behind subtle, wide-radius colored ambient blurs, while cards float with soft composite shadows (0 4px 20px rgba(0,0,0,0.04)) and razor-thin hairline borders. The dark code block introduces the highest visual weight and forward elevation, anchored by a deeper 0 16px 36px rgba(0,0,0,0.14) drop.
IMAGERY
This interface strictly rejects marketing photography and illustrative mascot artwork in favor of functional system artifacts. Visual intrigue is generated through genuine UI objects: real code snippets, executable command-line consoles, and an interactive node network schematic. Any future imagery must consist exclusively of live product UI chrome, technical diagrams, or cryptographic badges.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the split developer architecture graphic: a dark obsidian code console hovering beside a live node routing schematic connected by precise dotted vectors. It visually proves the value proposition—translating single-API cURL input into distributed multi-exchange execution—without a single paragraph of generic marketing copy. Misusing this pattern occurs when non-functional placeholder code is used or when connector lines lose strict orthogonal routing.
MUST
- Restrain vivid red (#eb3f36) to key semantic syntax, active tab strokes, and connection points.
- Maintain high contrast between the dark #16191e code block and the clean #fbfbfc canvas.
- Keep metric card icon containers in ultra-soft 50-value pastel tints (red, blue, green, purple).
- Set code snippet typography strictly in a clean monospace face at 12px with 1.5 line height.
AVOID
- Do not saturate the full canvas with color; leave gradients as peripheral, high-blur ambient glows.
- Do not use heavy, harsh black drop shadows on light surfaces; keep elevation faint and diffused.
- Do not round buttons into fully circular pills; buttons must use an 8px radius to preserve rigor.
- Do not color customer partner logos; keep the trust strip in uniform neutral dark tones.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
