Design a dark-mode website section: deep space command center wrapped in luminous cyan particle streams and precision automotive telemetry.
LAYOUT
Centered hierarchical stack anchored by a sticky slim navbar (64px height) at the top. The hero stage follows: status pill, dual-line display heading, centered 2-line description, and dual CTA cluster with 16px gap. Below the CTAs sits a 4-column KPI metric grid, transitioning to a centered trust security row, and finally resting on the dominant angled operations terminal.
PALETTE (use these exact hex values)
- #020611 — Cosmic Void: Deepest canvas background behind all ambient lighting effects and page elements
- #081326 — Console Glass: Translucent background for metric cards, telemetry dashboards, and floating pill chips
- #38bdf8 — Electric Cyan: Sparkline trends, active data points, and gradient terminal endpoints across display elements
- #1d4ed8 — Pulse Blue: Primary CTA button background, nav highlight, and headline gradient origin
- #34d399 — Telemetry Mint: Positive trend indicators, healthy telemetry nodes, and badge live dot
- #f87171 — Alert Crimson: Risk nodes, downward turn counters, and critical anomaly alerts
- #f8fafc — Starlight White: Primary headlines, bold metric counts, and button text
- #94a3b8 — Atmospheric Slate: Body copy, inactive nav links, and metric sub-labels
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 28px heading, 56px display. Tracking -0.03em at display, 0 at caption. The type is coldly technical, authoritative, and frictionless. It relies on tight letter spacing in the bold display headlines to convey condensed intelligence, while the uppercase micro-copy (11px) delivers aerospace or automotive instrumentation precision. Inter serves as an ideal match, while Plus Jakarta Sans or Geist Sans can substitute without sacrificing the engineered edge.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created through luminous atmospheric under-glow rather than traditional top-down drop shadows. Dark glass surfaces (rgba(8, 19, 38, 0.65)) allow underlying vertical light columns and cyan particle fields to shine through. The perspective console uses a subtle CSS perspective tilt (rotateX ~12deg) to pull the product interface forward into the viewer's physical space.
IMAGERY
Abstract digital twin light art featuring sweeping cyan particle streams and luminous volumetric speed lines flank the left and right margins. The interface completely eschews human photography or real-world automotive photos in favor of raw telemetry, glowing node graphs, and hardware-accelerated dashboard maps. Off-brand imagery would include natural light photography, flat vector illustrations, or cartoon icons.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-flank volumetric cyan particle sweeps creating an atmospheric amphitheater for the angled 3D telemetry console. This provides enterprise intelligence context without showing generic stock imagery. Misusing it involves placing bright content over the beams, washing out the delicate particle lines.
MUST
- Keep background effects strictly atmospheric; let particle streams frame the content without crossing headline text.
- Use color exclusively for functional metrics: green for increases, red for decreases/alerts, cyan for active states.
- Maintain 1px hairline borders on all cards using rgba(56, 189, 248, 0.15) to simulate glass containment.
- Limit gradient typography strictly to the key benefit phrase in the primary display heading.
AVOID
- Do not use saturated solid backgrounds for cards; always retain dark glass translucency.
- Never apply drop shadows with opaque dark spreads; use glowing cyan box-shadows with low opacity (<=0.2).
- Avoid warm colors like yellow or orange unless indicating a severe, non-critical warning state.
- Do not center-align the internal content of the 4-column metric cards; keep numbers left-aligned and sparklines right-aligned.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
