Design a dark-mode website section: mission-critical developer infrastructure rendered in deep midnight obsidian, glowing phosphor telemetry, and precision terminal metrics.
LAYOUT
The layout is divided into two distinct tiers: an upper hero conversion row and a lower comprehensive operational footer. The top tier splits 45/55 between a punchy left-aligned value proposition with CTAs and a right-aligned live interactive console box. The bottom tier transitions through a 1px full-width border into a 6-column matrix, anchored by an operational health ticker and trailing sub-footer bar.
PALETTE (use these exact hex values)
- #030712 — Deep Void Canvas: Deepest background canvas anchoring the entire viewport without radial wash
- #060d1b — Console Surface: Background fill for terminal card, status metrics strip, and input containers
- #081326 — Telemetry Inset: Nested panels such as the live system status card inside the console
- #132238 — Subtle Border Stroke: 1px dividing lines, card borders, tab underlines, and input bounds
- #0090ff — Electric Cerulean: Primary action buttons, selected tab indicators, logo icon, and focal display text
- #22c55e — Telemetry Emerald: Active system status indicators, checkmarks, and uptime percentage metrics
- #f8fafc — Signal White: Primary headlines, terminal commands, metric values, and logo title
- #94a3b8 — Muted Slate: Supporting descriptive copy, footer navigation links, and inactive tabs
- #475569 — Terminal Comment: Bash code comments, subtle meta tags, and copyright legal string
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 44px display. Tracking -0.03em at display, 0 at body. The voice is authoritative, disciplined, and uncompromisingly developer-first. Clean grotesque sans-serif (Inter/Geist) delivers pitch-perfect legibility for marketing copy, while monospace numbers and commands project absolute operational stability. Geist Sans and Geist Mono serve as exact drop-in open-source replacements.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is created entirely through planar layer contrast and fine 1px strokes (#132238). Background begins at pitch canvas level (#030712), elevated to #060d1b for functional consoles and tickers, and nested inward at #081326 for telemetry cards. Shadows are completely omitted in favor of contrast boundaries.
IMAGERY
No photographic imagery is present. Visual interest is derived entirely from code syntax representations, clean vector geometric iconography, and structured tabular telemetry metrics. Any inclusion of human photography or abstract 3D shapes would contradict the mission-critical systems tool aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated terminal-status hybrid card: combining multi-tab command execution lines with a live system uptime HUD inside a single 12px bordered dark console.
MUST
- Use JetBrains Mono or Geist Mono for all telemetry metrics, terminal outputs, and version flags.
- Limit electric cerulean (#0090ff) strictly to conversion buttons, selected tabs, and single headline accents.
- Enclose all console panels and status bars in a crisp 1px stroke (#132238) rather than drop shadows.
- Pair live green status indicators (#22c55e) with a preceding circular 6px dot.
AVOID
- Do not use blurry multi-stop glow effects or colorful neon mesh gradients.
- Never render code syntax or technical uptime stats in proportional sans-serif fonts.
- Avoid heavy drop shadows; depth is strictly structural and planar.
- Do not use rounded-none boxy brutalist corners; maintain 8px-12px curvature.
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 中尝试 
