Design a dark-mode website section: deep devtool obsidian cut by razor neon beams, terminal precision, and radiant horizon luminescence.
LAYOUT
The top hero panel uses a two-column split layout: value proposition and primary CTA on the left, terminal code preview with capability pills on the right. Directly below lies the edge-to-edge glowing horizon light bar dividing hero and footer. The bottom footer adopts a 5-column modular grid (Brand column + 4 link columns + Newsletter), anchored at the very base by a horizontal metrics bar and legal text row.
PALETTE (use these exact hex values)
- #03060E — Obsidian Deep: Primary full-bleed background canvas throughout hero and footer surfaces
- #090E1A — Terminal Slate: Background surface for terminal panels, input fields, and elevated cards
- #0099FF — Cyber Cyan: Primary CTA button background, interactive accents, and left horizon glow
- #D926A9 — Neon Magenta: Right-edge horizon radiance and ambient edge-lighting flare
- #22C55E — Terminal Green: Status indicator dots, 200 OK badge, and active operational metrics
- #F8FAFC — Pure White: Display headings, brand title, and primary CTA labels
- #94A3B8 — Muted Slate: Body copy, input placeholder text, and secondary navigation links
- #1E293B — Dark Border: Hairline dividers, card outlines, pill outlines, and input borders
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 12px subheading, 13px body, 15px body-lg, 20px heading, 44px display. Tracking -0.02em at display, 0.01em at body. The voice is crisp, programmatic, and uncompromisingly developer-first. It relies on high-legibility neo-grotesque sans-serif (Inter/Geist) for rapid scanning paired with an authentic monospace companion for technical trust. Substitution with generic rounded or humanist fonts would completely destroy its cold, engineered precision.
GEOMETRY & SPACING
Corner radii — cards 10px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1280px container, tight density.
DEPTH
Depth is created entirely through optical luminescence against dark matter rather than traditional cast drop shadows. Dark slate cards (#090E1A) sit flat on the near-black background (#03060E), distinguished only by subtle 1px borders (#1E293B). High-priority interactive elements emit soft, atmospheric radial gradients, notably the primary button and the horizon divider line.
IMAGERY
No photographic imagery or figurative art is present; the interface relies exclusively on typographic diagrams, functional code windows, and vector telemetry icons. The technical credibility stems from authentic curl requests, real JSON payloads, and clean line-drawn security badges.
SIGNATURE DETAIL — the thing that makes this design itself
The luminous horizon divider line: an ultra-crisp horizontal split glowing with an electric cyan bloom on the left that bleeds into vivid magenta on the right. It establishes an atmospheric separation between the interactive conversion hero and the structured footer infrastructure below.
MUST
- Use monospace typography strictly for command inputs, code displays, and API badges.
- Limit vivid cyan (#0099FF) strictly to the primary action and key heading emphasis.
- Maintain fine 1px dark slate borders (#1E293B) around dark containers to avoid mudding.
- Use green status dots (#22C55E) only to denote live verification, uptime, or 200 OK.
AVOID
- Do not use light theme backgrounds anywhere; this system requires dark mode contrast.
- Do not use heavy drop shadows; depth is strictly created through border contrasts and ambient glow.
- Do not apply bright magenta to primary buttons; magenta is reserved for atmospheric rim-light.
- Do not allow font sizes in the footer columns to exceed 13px.
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 中尝试 
