Design a light-mode website section: developer-first financial infrastructure anchored by deep dark terminals against a high-contrast warm astral canvas.
LAYOUT
The header spans the top boundary as a rigid, slim control deck. Below, the hero section splits into an asymmetric 50/50 two-column grid. The left column stacks metadata badge, massive display typography, lead copy, primary CTA buttons, and a bottom KPI card. The right column showcases the heavy code terminal anchored over the cosmic dust plume, flanked by a network of floating architectural micro-cards linked by dashed circuit vectors.
PALETTE (use these exact hex values)
- #F8F9FA — Canvas Background: Primary light page background sustaining high readability and luminous atmosphere.
- #161B26 — Terminal Slate: Dark code editor surface creating immediate technical credibility and focal weight.
- #FFFFFF — Card Surface: Floating documentation and metric cards with subtle outer drop shadows.
- #5850EC — Electric Indigo: Headline emphasis, primary call-to-action fill, and active connector node styling.
- #0F172A — Midnight Ink: High-contrast headings, primary logo typography, and navbar primary button.
- #64748B — Slate Body: Secondary explanations, navigation items, inactive labels, and parameter keys.
- #10B981 — Terminal Success: Status indicators (200 OK and active endpoint pills) within the code console.
- #E2E8F0 — Subtle Border: Hairline 1px boundaries on buttons, floating cards, and structural dividers.
TYPOGRAPHY
Typeface Inter Display (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 32px heading, 56px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative, modernist, and razor-sharp. Inter Display provides a clean, neutral architectural foundation that evokes high-end fintech infrastructure (like Stripe or modern dev tools). It blends seamlessly with JetBrains Mono, establishing immediate technical fluency without feeling utilitarian or sterile.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered via subtle multi-layered staging rather than heavy shadows. The luminous light canvas sits at the base, overlayed by an ambient particle field, upon which razor-sharp white cards float using gentle 0 4px 20px rgba(0, 0, 0, 0.04) shadows and hairline borders. The dark terminal commands the foreground through stark tonal contrast rather than exaggerated elevation.
IMAGERY
The visual hero element is an ethereal, grain-textured cosmic particle streak sweeping diagonally from lower-center toward the upper right. The color spectrum ranges from fiery amber-orange to soft magenta and deep purple stardust, suggesting velocity, computational heat, and raw energy. Traditional photography, human figures, or flat cartoon illustrations would completely break the technical precision aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature is the cinematic juxtaposition of an incandescent particle nebula swooshing beneath a deeply dark, surgical code console. To execute it properly, the cosmic artwork must feel atmospheric and particulate (not a blurry gradient blob), and the code window must overlap the light/dark transition cleanly. Misusing this by turning the entire canvas dark ruins the sharp editorial authority.
MUST
- Reserve the bold #5850EC indigo for actionable elements and deliberate narrative punctuation.
- Pair dark code containers directly over faint astronomical or generative particle backgrounds.
- Enforce precise 1px borders in #E2E8F0 across all white card and pill surfaces.
- Use JetBrains Mono or similar high-legibility monospace strictly within code payloads.
AVOID
- Do not switch the primary canvas from luminous light to dark; the visual power relies on dark-on-light contrast.
- Avoid generic stock imagery; background visuals must feel like precision-engineered celestial phenomena.
- Never omit the hairline border on white cards over the light canvas, or they will lose shape definition.
- Do not use colorful badges outside the designated success green and brand violet 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 中尝试 
