Design a dark-mode website section: dense developer control room cast in deep space navy with electric cyan glows and telemetry readouts.
LAYOUT
The composition follows a two-tiered structure: a 50/50 split hero CTA section at top, followed by a multi-column footer grid. The upper hero pairs left-aligned persuasive copy and dual CTAs against an expansive right-aligned interactive terminal card. Below a full-width 1px rule, the footer organizes company info and newsletter capture on the left, four navigation columns centrally, and a dedicated telemetry card on the right.
PALETTE (use these exact hex values)
- #060913 — Canvas Void: Deepest background surface underlying hero CTA and global site footer
- #0d1527 — Card Trench: Background for CLI interactive terminal and telemetry status containers
- #1e293b — Border Rule: Subtle 1px divider lines, card strokes, and input outlines
- #38bdf8 — Electric Cyan: Top-left start stop of the primary CTA gradient and headline highlight
- #2563eb — Cobalt Blue: Bottom-right end stop of the primary CTA gradient and glow highlights
- #10b981 — System Green: Online heartbeat dots and positive system operational status badges
- #ffffff — Text Pure: Display headings, active tabs, primary buttons, and metric numbers
- #94a3b8 — Text Dim: Secondary description body copy, inactive nav links, and CLI outputs
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px subheading, 13px body-sm, 15px body, 18px body-lg, 20px heading, 44px display. Tracking -0.02em at 44px, 0.08em at 12px caps. The typography conveys deep technical competence, blending modern grotesque sans-serif authority with precise developer-native monospace styling. Inter provides neutral, highly legible headlines with tight tracking (-0.02em) for punchy impact, while JetBrains Mono injects genuine terminal realism into data rows and commands. For web production, Geist and Geist Mono serve as exact modern drop-in replacements.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Elevation is achieved through ambient light and boundary stroke rather than drop shadows. Surface level 1 cards rely on 1px borders in #1e293b and a diffuse, low-opacity radial cyan glow (rgba(56,189,248,0.12) to rgba(37,99,235,0.08)) that casts light outward onto the obsidian floor.
IMAGERY
No photographic imagery is present; the interface relies entirely on programmatic UI artifacts. Visual interest comes from formatted code blocks, agent data tables, status pill indicators, and high-precision SVG icons representing system telemetry.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the interactive CLI card illuminated by a cyan perimeter glow, featuring live agent telemetry rows alongside an inline status indicator. Recreate it with a 14px rounded card in #0d1527, a 1px border (#1e293b), an outer box-shadow: 0 0 45px rgba(56, 189, 248, 0.12), and monospace agent tables inside. It fails if replaced with a generic static screenshot or if the cyan glow is dialed up to harsh opacity.
MUST
- Anchor primary calls to action with linear-gradient(135deg, #38bdf8, #2563eb) paired with high-contrast white text.
- Reserve #10b981 strictly for operational telemetry, live dots, and passing system states.
- Render all developer commands and tabular agent metadata in an authentic monospace font.
- Surround interactive console previews with a soft, diffuse cyan box-shadow glow.
AVOID
- Never use the cyan-blue gradient on secondary actions or navigation text links.
- Do not introduce warm colors like orange or red unless representing fatal service outage.
- Never display CLI terminal content in proportional sans-serif typefaces.
- Avoid high-opacity solid card borders; use translucent or low-contrast slate (#1e293b).
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 中尝试 
