Design a dark-mode website section: precision developer infrastructure balanced between luminous cyan horizons, dense monospaced code, and stealth midnight surfaces.
LAYOUT
The hierarchy operates on a centered vertical funnel: an eyebrow chip sits atop a stacked two-line headline, leading directly to dual action CTAs flanked by trust guarantees. Directly below rests an oversized interactive dual-pane terminal preview card anchored by a floating protocol bar. A glowing cyan beam terminates the hero segment, opening into a structured 5-column link and subscription footer with a live-status bottom bar.
PALETTE (use these exact hex values)
- #04070F — Deep Midnight Canvas: Root background canvas providing maximum contrast for luminous terminal lines and glows
- #080E1C — Stealth Surface: Background fill for terminal window, protocol pills, and newsletter subscription cards
- #38BDF8 — Cyan Horizon Glow: Diffused linear gradient beam separating terminal demo from the five-column footer
- #2F68FE — Primary Action Azure: Solid fill on primary CTA buttons, link arrows, and headline gradient accents
- #10B981 — Terminal Active Green: Live system status indicators, checkmark confirmations, and connected node dots
- #FFFFFF — Text Crisp White: Primary headings, brandmark typography, and terminal active commands
- #94A3B8 — Muted Slate Text: Descriptive copy, parameter explanations, and secondary footer links
- #162032 — Hairline Border Slate: Structural framing lines across terminal panes, inputs, and section dividers
TYPOGRAPHY
Typeface Geist Sans (or Inter, SF Pro Display, system-ui), weights 400/500/600. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 40px display. Tracking -0.025em on headlines, normal on body. The type choice radiates cold, architectural competence. Using a neutral neo-grotesque alongside a technical monospaced family evokes high-reliability cloud infrastructure and CLI command efficiency. Geist or Inter are perfect drop-ins, providing balanced uppercase tracking on technical badges.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 6px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1080px container, tight density.
DEPTH
Depth is created entirely through micro-luminosity rather than diffuse multi-layered drop shadows. Surfaces step from #04070F base to #080E1C container fills, defined by razor-thin 1px borders (#162032). Subtle backlighting occurs via the cyan horizon glow and button hover glows.
IMAGERY
This design strictly eschews photographic elements and figurative illustrations in favor of hyper-clean synthetic code panels and protocol glyphs. Graphical assets consist of dot-matrix logos, mono terminal artifacts, and precision line icons. Any photography would instantly break the developer tool immersion.
SIGNATURE DETAIL — the thing that makes this design itself
The Cyan Horizon Beam — a delicate 1px boundary accented by an ethereal, centrally-concentrated cyan glow (#38BDF8) that acts as an atmospheric event horizon separating product demo from site directory. Misusing it across every divider causes visual clutter; it must solely mark the single transition from hero action to footer governance.
MUST
- Keep terminal code strictly in Geist Mono or equivalent monospace with exact 12px sizing.
- Use solid royal blue (#2F68FE) exclusively for primary submission and forward navigation actions.
- Anchor section transitions with focused horizontal luminous gradients rather than full-width solid lines.
- Maintain strict 12px padding inside data cards and 24px between distinct vertical rhythm stacks.
AVOID
- Do not introduce warm color hues (yellows, reds, oranges) outside explicit terminal warning states.
- Never use rounded pill buttons for primary CTAs; keep action buttons strictly at an 8px radius.
- Do not drop the hairline borders around dark cards, or surfaces will blend into the void.
- Avoid standard full-width horizontal rule dividers without the atmospheric center gradient glow.
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 中尝试 
