Design a dark-mode website section: deep midnight canvas punctuated by electric cyan highlights, delicate grid crosshairs, and terminal precision.
LAYOUT
The page flows vertically through two cleanly decoupled master sections. The top module is an enclosed, hero-grade CTA billboard with centered typography, paired primary and secondary buttons, and an inline CLI snippet. Directly below, separated by a 48px gap, sits an expansive five-column footer layout: brand and newsletter on the left, three link directories in the center, and technical feature proofs on the far right, terminating in a low-contrast legal bar.
PALETTE (use these exact hex values)
- #050b14 — Canvas Obsidian: deep background beneath entire viewport and outermost canvas
- #08101e — Card Surface: fill for the large nested CTA container and elevated blocks
- #16283d — Border Subtle: 1px hairline divider lines and outer card bounds
- #1e79e6 — Electric Blue: primary solid button background and active state anchors
- #38bdf8 — Cyan Accent: high-visibility eyebrow headings, highlighted text, and active badge accents
- #22c55e — Status Green: operational system indicator dot in status badge
- #ffffff — Pure White: primary headers, high-priority labels, and brand title
- #8496a8 — Muted Slate: body copy, column navigation links, and terminal snippet commands
- #4e6074 — Dim Gray: copyright notice, category subheadings, and terminal prompt glyphs
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 24px heading, 38px display. Tracking -0.02em at display, 0.08em at micro labels. The typographic tone is deterministic, clinical, and reassuringly modern, fitting high-reliability developer infrastructure. Inter provides an invisible, neutral geometric canvas while JetBrains Mono injects developer cred and syntactic clarity. For non-commercial substitutions, Geist paired with Geist Mono preserves the exact same technical authority.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered flat-first with hairline containment borders (#16283d) defining layers rather than heavy dropshadows. A faint radial glow of low-opacity cyan (#38bdf8 at roughly 6% opacity) sits softly behind the central CTA headline to establish spatial hierarchy. Interactive elements lift slightly via light surface brightening (#0d1b2e) rather than multi-layered directional shadows.
IMAGERY
The interface is strictly graphical and typographic, avoiding photographs or complex illustrated mascots. Precision visual cues include clean outline-vector iconography (shields, code brackets, document books) rendered in a 1.5px stroke width. Backgrounds rely on engineering grid ticks (delicate crosshairs) and soft monochromatic illumination.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dual-tone headline lockup ('Ship reliable agents. / On deterministic infrastructure.') enclosed within an expansive 24px-radius panel framed by faint radial light and developer crosshair coordinates. To execute properly, anchor the second headline line with an electric cyan accent and maintain generous negative space between the CLI install bar and the action buttons.
MUST
- Wrap top-level CTA sections in an expansive rounded panel (#08101e) with a subtle hairline border (#16283d).
- Use electric blue (#1e79e6) strictly for primary call-to-actions and the active submission state.
- Accent key value-prop headline phrases in light sky cyan (#38bdf8) against white body headings.
- Style code snippets and CLI install bars in monospaced font with a dim green/blue terminal prompt '$'.
AVOID
- Do not use high-saturation warm colors like red, orange, or yellow outside of error states.
- Never use pure black (#000000); maintain deep navy-tinted charcoal (#050b14) for rich ambient depth.
- Do not drop drop-shadows with blur radii greater than 20px; rely on subtle borders and faint ambient glow.
- Avoid fully rounded 999px pills for inputs and action buttons; use a controlled 8px radius.
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 中尝试 
