Design a dark-mode website section: mission-critical aerospace life-support telemetry clad in oceanic deep-purple luminescence and frosted glass cockpit HUDs.
LAYOUT
Asymmetric hero split into three core zones across a 1280px grid: left side contains text hierarchy, CTAs, and an uptime pill; center contains an oversized 3D physical apparatus cutting through the header space; right side stacks two floating technical HUD panels (code editor above, telemetry flow below).
PALETTE (use these exact hex values)
- #04060e — Void Abyss Black: Deepest backdrop canvas behind glow effects and hero imagery
- #1d2b6b — Subsea Indigo Glow: Ambient radial lighting pool behind the center hardware unit
- #4f5bf7 — Hyperlink Indigo: Primary CTAs, accented display headline line, and active pill indicators
- #0e1322 — Cockpit Slate Surface: Background fill for floating code windows, HUD metrics, and floating header
- #27c97d — Telemetry Neon Mint: System status lights, 200 OK code pings, and nominal telemetry states
- #8895b3 — Ghost Blue Gray: Body copy, unselected navigation links, and telemetry labels
- #ffffff — Pure Titanium White: Primary headline phrases, card titles, and active code editor text
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 56px display. Tracking -0.03em on headline, 0.02em on caps/chips. Engineered, clinical, and uncompromisingly technical. Inter provides surgical legibility at small UI scales without ornamental distraction, while JetBrains Mono reinforces developer-first mission critical infrastructure.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through three strictly layered planes: a dark void canvas with a diffuse indigo radial glow, a central physically rendered apparatus casting rim light, and floating HUD glass panels layered over both with soft drop shadows (0 20px 40px rgba(0,0,0,0.6)) and hairline borders.
IMAGERY
Photorealistic 3D rendering of highly engineered titanium and transparent acrylic aerospace/scuba hardware, lit with directional cool cyan and violet studio rim lights. Avoid generic stock photography, flat vector illustrations, or warm casual lifestyle imagery.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone headline paired with an intricate technical apparatus bursting out of an indigo spotlight, bracketed by floating frosted telemetry HUD panels with emerald status pings. Misused by applying generic SaaS pastel gradients instead of deep marine-indigo radial light.
MUST
- Use deep navy #04060e as the dark baseline; never drop to pure uncalibrated #000000.
- Restrict the primary electric indigo (#4f5bf7) strictly to the standout headline segment, active tabs, and primary CTAs.
- Apply 1px subtle white strokes (rgba(255, 255, 255, 0.08 to 0.12)) across all glass cards and HUD overlays.
- Pair monospace JetBrains Mono specifically for numeric telemetry data, system flow badges, and code snippets.
AVOID
- Do not use saturated bright backgrounds or flat solid grey card panels.
- Avoid warm colours (red, orange, yellow) except in extreme error conditions; stick to blues, cyans, and emerald.
- Never omit the 1px translucent stroke on floating cards; without it, panels blend into background shadows.
- Do not set the entire display headline in accent colour; exactly one punchy clause should be tinted.
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 中尝试 
