Design a dark-mode website section: deep navy server room precision anchored by code snippet artifacts and electric cerulean gradients.
LAYOUT
The layout is strictly symmetrical and top-down: an eyebrow pill badge leads directly into a centered, dual-line display heading and a 60-character centered description. Below this header sits a 3-column, 2-row feature grid with 20px gutters. The section concludes with an edge-to-edge footer card spanning all three grid columns, organizing a reassurance statement on the left and primary/secondary CTAs on the right.
PALETTE (use these exact hex values)
- #030712 — Void Canvas: deepest background surface behind all components and grid layouts
- #080F1E — Card Surface: background fill for feature tiles and bottom callout container
- #040814 — CLI Terminal Surface: inset terminal bar background for inline code snippets
- #17253D — Border Subtle: hairline boundary framing cards, CLI snippets, and badge pills
- #38BDF8 — Electric Azure: display heading highlight, text link arrows, and primary button glow
- linear-gradient(180deg, #3B82F6 0%, #1D4ED8 100%) — Button Gradient Primary: primary call-to-action fill with soft top highlight sheen
- #F8FAFC — Text Pure White: primary headlines, card titles, and active button text
- #94A3B8 — Text Muted Slate: explanatory body descriptions, subtitle text, and inactive iconography
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 16px heading, 20px heading-lg, 48px display. Tracking -0.025em for display, -0.01em for body. The typographic tone is deterministic, clinical, and developer-centric, utilizing a clean neo-grotesque sans-serif for UI clarity paired with a geometric monospace for technical syntax. Tight letter tracking (-0.03em) on headlines gives an authoritative, engineered feel. Substitute freely with Inter or Plus Jakarta Sans for the UI and JetBrains Mono for the terminal elements.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1160px container, comfortable density.
DEPTH
Depth is achieved through luminance contrast and border reflection rather than soft drop shadows. Surfaces step slightly forward against the dark #030712 background by adopting #080F1E fills framed by crisp 1px stroke outlines (#17253D). CLI snippet containers are visually carved into the cards using darker #040814 inset fills.
IMAGERY
Imagery is purely technical and non-photographic, featuring fine mono-line vector icons (crosshairs, shields, cubes, cloud download, graphs) housed inside softly glowing bounding circles or squares. Neon accent hues (cyan, soft purple, emerald, azure) individualize each icon without disrupting visual harmony. Photography or abstract 3D shapes are strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the embedded dark CLI snippet bar nested directly within every marketing feature card, turning passive descriptive copy into immediate, reproducible terminal commands. It bridges product marketing and developer documentation in a single unified tile.
MUST
- Use 1px borders (#17253D) to separate components from the #030712 dark canvas.
- Render CLI commands strictly in monospaced fonts with a leading chevron prompt.
- Split hero headlines across two lines with line two colored in azure (#38BDF8).
- Keep icon containers framed in subtle geometric shapes matching the grid border weight.
AVOID
- Do not use heavy drop shadows; rely on hairline borders and contrast for separation.
- Avoid warm colors (reds, yellows, oranges); restrict palette to cool cyan, blue, and slate.
- Do not make card backgrounds purely transparent; use deep navy fill (#080F1E).
- Never hide or omit the copy button inside the code snippet container.
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 中尝试 
