Design a dark-mode website section: developer-first infrastructure elegance grounded in misty alpine ridge photography and electric cyan circuitry.
LAYOUT
The header sits flush across the top with a 1240px constraint, balancing nav links on the left and utility CTAs on the right. The hero divides cleanly into a 50/50 two-column grid: left column carries the title, subtext, dual CTAs, and proof stats; right column holds the API response terminal feeding into a 4-item vertical pipeline. Directly beneath both columns sits a full-width horizontally sequenced pipeline card tracking steps 1 through 4.
PALETTE (use these exact hex values)
- #060b12 — Midnight Base: Deepest background layer fading down to solid black below the mountain line
- #0a131e — Terminal Slate: Background fill for the code console, pipeline deck, and side nodes
- #38bdf8 — Electric Cyan: Primary CTA fill, headline emphasis, active card outlines, and circuit nodes
- #34d399 — Terminal Green: Status indicator dot, HTTP POST method pill, and intake icon highlight
- #182b3d — Subtle Border: Default 1px bounding line for inactive cards, badges, and separators
- #f8fafc — Text Primary: H1 title text, JSON keys, active step titles, and button labels
- #94a3b8 — Text Muted: Hero paragraph copy, inactive node titles, step descriptions, and metadata
- #475569 — Code Line Muted: Line numbers in the JSON editor and dotted connector traces
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 60px display. Tracking -0.03em at display, 0 at body. The typographic tone is uncompromisingly technical, authoritative, and frictionless. The headline uses a neutral geometric sans set at an immense 60px with -0.035em tracking, giving it a monolithic legal weight without ornate serif nostalgia. JetBrains Mono balances this with developer credibility, signaling that legal operations are treated as deterministic code.
GEOMETRY & SPACING
Corner radii — cards 14px, links 999px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created primarily through layering translucent slate-glass surfaces over dark mountain ridge photography. Elevations Level 1 and Level 2 do not use standard multi-layered diffuse drop shadows; instead, they rely on 1px crisp borders (#182b3d) and targeted cyan halos (0 0 16px rgba(56, 189, 248, 0.15)) on selected cards.
IMAGERY
The hero background features a high-altitude alpine ridge line bathed in cool twilight and muted golden mist, conveying scale, seriousness, and permanence. The image is deeply color-graded into midnight navy (#060b12) at the edges and bottom. Stock photography of corporate lawyers or cheesy office handshakes would completely undermine the developer-native identity.
SIGNATURE DETAIL — the thing that makes this design itself
The circuit connector link: a fine dotted line emerging from an API terminal bracket, terminating in a glowing cyan node that binds programmatic code directly to human legal workflow nodes. Recreate it with a 1px dashed horizontal trace (#38bdf8), an 8px circular terminal point with box-shadow blur, and a 1px border highlighted card (#38bdf8).
MUST
- Reserve the high-intensity cyan (#38bdf8) strictly for key actions and active state focus.
- Maintain high photographic contrast by vignetting the bottom half to pure near-black behind workflow elements.
- Use JetBrains Mono or SF Mono strictly for machine outputs, endpoints, and code lines.
- Keep card outlines thin (1px) with low opacity (#182b3d) unless actively selected.
AVOID
- Do not allow the mountain landscape image to overpower text readability; tint with deep midnight blue.
- Do not use warm accent colors (red, orange, yellow) except for intentional error states.
- Do not round container cards beyond 16px; avoid overly bubble-like UI shapes.
- Do not drop heavy opaque drop shadows; rely on 1px borders and soft 12px colored halos for elevation.
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 中尝试 
