Design a dark-mode website section: deep-space telemetry console with glowing cyan wireframes, mint operational beacons, and crisp tactical telemetry cards.
LAYOUT
The section is structured in three vertical phases centered within a 1200px max-width container. Phase one features a centered masthead: eyebrow pill, 40px primary headline, and two lines of explanatory lead copy. Phase two is a rigid 3-column by 2-row grid of capability cards with uniform 16px gutters. Phase three closes the stack with a monolithic full-width CTA horizontal bar integrating graphic, copy, and action button.
PALETTE (use these exact hex values)
- #030712 — Cosmic Void: deep background canvas evoking the vacuum of space
- #0c1322 — Console Surface: feature tile and banner base container color
- #1e293b — Telemetry Border: structural boundary lines on cards, pills, and pill header badges
- #4ade80 — Status Green: operational telemetry indicator dot located in the top-left of each feature tile
- #38bdf8 — Orbital Cyan: technical wireframe diagrams, point-cloud constellations, and orbital telemetry lines
- #2563eb — Electric Blue: primary interactive CTA button background and diffused atmospheric glow
- #ffffff — Signal White: primary display headline, card titles, and high-priority telemetry metrics
- #94a3b8 — Subtle Telemetry Slate: subtitle copy, description paragraphs, and tag labels
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 20px heading, 40px display. Tracking -0.02em on headings, +0.02em on badges. The typographic tone is authoritative, military-spec, and engineered. Rendered entirely in a clean modern grotesk like Inter, tight negative tracking (-0.02em to -0.03em) on display sizes delivers an austere mission-control feel, while balanced open tracking on muted slate captions ensures rapid scanning in dark mode.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 8px, buttons 10px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Elevation is achieved entirely through luminous luminescence rather than traditional drop shadows. Ambient depth stems from dark slate panels (#0c1322) resting directly against the deep cosmic void (#030712), while glowing cyan point-clouds and the electric-blue diffuse glow (blur: 24px) on the primary CTA establish foreground visual hierarchy.
IMAGERY
Visual assets are exclusively programmatic, vector-driven space and telemetry schematics rendered in glowing cyan (#38bdf8) against pitch dark. Imagery includes point-cloud globes, orbital trajectory ellipses, satellite engineering schematics, HUD telemetry bar/sparkline charts, and a glowing wireframe isometric cube. Photorealistic photography or cartoon vector art is strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the pairing of a 6px live mint beacon in each tile's upper corner with intricate cyan point-cloud satellite graphics and a glowing cobalt CTA. Removing the wireframe satellite diagrams or the green status dots instantly collapses the aerospace HUD identity into a generic SaaS grid.
MUST
- Use high-contrast electric cyan (#38bdf8) solely for technical wireframes, orbit paths, and HUD graphics.
- Place a 6px status green dot (#4ade80) consistently in the top-left corner of operational cards.
- Maintain strict 16px horizontal and vertical gaps across the 3x2 feature grid.
- Keep sub-capability pills muted with dark fills (#080d18) so they never compete with primary body copy.
AVOID
- Never introduce saturated warm colors (red, yellow, orange) that disrupt the orbital telemetry palette.
- Avoid solid, flat illustration styles; imagery must be wireframe, point-cloud, or telemetry HUD data.
- Do not use harsh bright borders; outline cards with subtle low-opacity borders (#1e293b).
- Never let sub-feature tags wrap unpredictably; arrange them in a dedicated single bottom row.
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 中尝试