Design a dark-mode website section: precision aerospace telemetry wrapped in dark glassmorphism, vertical hyperdrive streaks, and glowing indigo-cyan gradients.
LAYOUT
The interface follows a two-column hero composition with a persistent top navigation bar and a foundational bottom metrics dock. The left column (approx 45% width) holds category tracking text, a 54px two-line headline, body copy, paired CTA buttons, and a 4-item inline social proof row. The right column (approx 55% width) presents the massive self-contained platform HUD card. Spanning both columns beneath is an edge-to-edge four-part metrics ribbon.
PALETTE (use these exact hex values)
- #050914 — Canvas Void: Deep navy base canvas background behind all hero content and light effects
- #00f0ff — Electric Cyan: Telemetry circuit lines, status indicators, and background light burst streaks
- linear-gradient(135deg, #1d4ed8 0%, #7c3aed 100%) — Primary Gradient: High-priority call-to-action button fill and headline tail gradient highlights
- #a855f7 — Glow Violet: Glowing node accents, secondary aurora streaks, and typography gradient endings
- #ffffff — Text Primary: Main headings, high-priority metric titles, and brand logo text
- #94a3b8 — Text Muted: Body descriptions, secondary labels, workflow subtext, and inactive nav items
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 54px display. Tracking -0.02em at display, 0.08em on uppercase badges. The typography is clinical, authoritative, and deeply technical, anchored by a neutral geometric sans-serif (Inter match). Tight negative tracking on display headlines creates punchy corporate scale, while wide tracking on micro-labels mimics avionics and spaceflight instrument panels. For open-source implementation, Geist Sans or Inter provides an exact drop-in match.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is achieved through luminescence rather than black drop shadows. Translucent glass surfaces (rgba(10,18,38,0.65)) allow vertical cyan and violet light streams to shine through from the base canvas. Floating panels are framed by razor-sharp 1px highlight strokes (rgba(255,255,255,0.12)) that separate elevated HUD planes from the background void.
IMAGERY
Imagery combines high-precision dark metallic 3D CAD renders (robotic arm, workspace chassis) with abstract vector telemetry graphics. Visuals feature isometric perspectives mounted on glowing grid platforms with cyan light nodes. Photography or cartoonish 3D elements are strictly off-brand and would destroy the aerospace engineering credibility.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the multi-layered aerospace telemetry HUD panel: an isometric 3D robotic arm platform enclosed in frosted glass, framed by an overhead 4-stage pipeline and flanked by glowing cyan circuit callout nodes. It transforms a standard hero image into a tangible interactive software console. To execute correctly, ensure the cyan circuit lines terminate exactly at component axes with glowing 4px nodal dots.
MUST
- Use uppercase tracking (0.08em) for micro badges and section breadcrumbs like 'ROBOTICS FOR SPACE R&D'.
- Keep borders strictly at 1px width using rgba(255,255,255,0.1) to rgba(255,255,255,0.18) opacity.
- Pair ultra-fine cyan telemetry lines (#00f0ff) with glowing dot coordinates on diagrammatic panels.
- Utilize dual-tone color transitions (blue to purple) selectively on primary CTAs and headline terminal words.
AVOID
- Do not use solid opaque gray backgrounds; always preserve atmospheric background illumination through glassmorphism.
- Avoid heavy drop shadows; depth must be rendered via luminous backdrops and subtle white border highlights.
- Do not use high-saturation warm colors (yellows, reds, oranges) which break the deep aerospace aesthetic.
- Never make metadata font sizes larger than 12px when rendering architectural workflow notes.
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 中尝试