Design a dark-mode website section: mission-control dark surface engineered for robotics infrastructure with neon-precise telemetry accents.
LAYOUT
The hierarchy follows a vertical progression: hero CTA container first, followed by a wide navigational footer, ending in a legal sub-footer bar. Within the CTA card, content splits into a 55/45 two-column flex arrangement: conversion copy and value props on the left, console terminal on the right. The footer distributes five equal-width link categories alongside a prominent newsletter submission block.
PALETTE (use these exact hex values)
- #030712 — Void Canvas: Deepest canvas background behind the main CTA card and footer legal bar
- #080f1d — Cockpit Navy: Background for the primary CTA container with subtle radial blue diffusion
- #060a12 — Terminal Slate: Embedded code console surface and newsletter input background
- #38bdf8 — Electric Cyan: Primary CTA fill, keyword emphasis in headline, eyebrow text, and subscribe button
- #4ade80 — Telemetry Emerald: Active CLI tab underline, verification checkmarks, and terminal ready dot
- #1e293b — Ghost Border: Subtle container outline, secondary button stroke, and input field boundaries
- #f8fafc — Pure White: Primary headings, active nav column titles, and main CTA typography
- #94a3b8 — Cool Muted: Descriptive copy, subheadings, inactive code tabs, and footer links
- #64748b — Dim Slate: Terminal comments, latency timestamps, copyright note, and legal text
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px subheading, 13px body-sm, 14px body, 16px body-lg, 18px heading, 44px display. Tracking -0.02em at display, 0.05em at caps. The voice is hyper-precise, cold, and confident, mirroring aerospace telemetry and robotics runtime software. Inter provides neutral, unadorned structural legibility while JetBrains Mono injects developer-grade authenticity. If substituting, choose modern engineered neo-grotesques with crisp vertical metrics such as Geist or SF Pro.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created entirely through planar luminance and subtle luminosity leakage rather than blur shadows. Surfaces step from #030712 ground to #080f1d container, bounded by 1px strokes in #1e293b. An ethereal cyan atmospheric glow emerges strictly from the lower-right vector particle field.
IMAGERY
Graphic treatment is limited to an abstract, precision-engineered 3D dot matrix simulating a robotic sensor point cloud in the lower right of the card. Photography and realistic humanoid imagery are completely omitted in favor of structural code telemetry. Any stock photography or photorealistic hardware renders would disrupt this developer-first aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The side-by-side juxtaposition of a high-impact humanoid value proposition with a simulated, working terminal output block containing live execution latencies ('2.1s', 'OK'). It anchors lofty robotics claims directly into actionable code reality. Misusing it involves turning the terminal into an unstyled static block without real command syntax and status telemetry.
MUST
- Use Electric Cyan #38bdf8 strictly for primary actions, eyebrows, and key brand spans.
- Maintain monospace font strictly for terminal readouts, tabs, and technical metrics.
- Pair the primary solid button with a ghost button of identical height and corner radius.
- Use 1px borders colored #1e293b to delineate dark cards from the root void.
AVOID
- Do not introduce warm hues like orange, yellow, or red into interface elements.
- Never apply high-opacity drop shadows; depth is strictly created via card surfaces and border glow.
- Do not center-align the CTA headline or body copy; maintain a strict left alignment.
- Avoid fully rounded 999px pills for buttons; keep radii constrained to 8px.
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 中尝试 
