Design a dark-mode website section: deep midnight infrastructure canvas energized by electric blue glows and disciplined developer-first data terminals.
LAYOUT
The layout is governed by a strict top-down developer conversion sequence. The upper section features a split 55/45 grid: pitch narrative and primary/secondary CTAs on the left, interactive code output on the right. Directly below, an edge-to-edge trust bar nests enterprise guarantees alongside an email capture input. The footer anchors the page with a left-aligned brand block alongside four equal-width navigation columns, capped by an inline legal copyright row.
PALETTE (use these exact hex values)
- #02040d — Abyss Canvas: Root background canvas providing maximum contrast for dark mode developer elements.
- #04091a — Terminal Surface: Interior fill for the code mockup container and input fields.
- #131e36 — Structural Stroke: Hairline horizontal rules and container strokes separating sections and cards.
- #3464f6 — Electric Cobalt: Primary action button background, category arrows, and logo cross graphic.
- #2557eb — Atmospheric Cyan Glow: Diffuse radial backdrop illumination in the top right quadrant.
- #22c55e — Success Status: Status indicator dot for 200 OK API response badge.
- #ffffff — Payload White: Headline text, primary button labels, and code terminal strings.
- #8da0be — Muted Slate: Body descriptions, navigation links, and terminal meta labels.
- #4b5974 — Subtle Charcoal: Copyright text, footer dividers, and placeholder input prompts.
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px heading, 44px display. Tracking -0.02em at display, 0.05em at caps. The typographic tone is authoritative, institutional, and developer-native. Inter provides utilitarian clarity for enterprise fintech credibility, while JetBrains Mono injects genuine technical substance via realistic JSON schema syntax. For drop-in open-source substitution, Geist Sans and Geist Mono deliver an identical engineering-forward voice.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered purely through optical atmospheric gradients rather than multi-layered drop shadows. A subtle radial glow (#2557eb at ~20% opacity) emanates behind the terminal preview, while cards and inputs rely on 1px crisp borders (#131e36) against the #02040d surface.
IMAGERY
No photographic elements are used. The imagery consists entirely of synthetic interface artifacts: an authentic terminal window showing clean JSON schema, precise hairline technical iconography, and a stylized geometric brand mark.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-column developer handshake: an asymmetric pairing of a bold institutional headline with an interactive API terminal card, tied together by an atmospheric electric-blue backlight.
MUST
- Retain the sharp 1px border (#131e36) around terminal cards and between section bands.
- Always pair API code previews with an active status badge (e.g., green dot + '200 OK').
- Keep typography high-contrast by reserving pure white (#ffffff) exclusively for headlines and active code data.
- Use uppercase tracking (0.08em) for category headers and eyebrows without exceeding 12px font size.
AVOID
- Never introduce warm colors, yellow alerts, or playful multi-colored badges into this palette.
- Do not drop the monospaced terminal prompt ('>_') from the primary action button.
- Avoid thick borders or high-contrast white strokes; borders must never exceed 1px (#131e36).
- Never center-align the footer links or headline text; keep everything left-aligned within columns.
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 中尝试 
