Design a dark-mode website section: translucent cyan-tinted glass cockpits floating silently above high-altitude earth orbit.
LAYOUT
Asymmetric two-column split hero layout spanning 1380px max width. The left column (roughly 45% width) holds the category badge, multi-line display headline, editorial value proposition, and CTA action group. The right column holds a dynamic, tilted cockpit cluster of holographic floating telemetry cards wrapping around the flagship 3D hardware centerpiece.
PALETTE (use these exact hex values)
- #06090d — Void Deep Space: Deepest canvas background behind orbital atmospheric photography
- #09171f — Glass Surface Fill: Semi-transparent backdrop for HUD cards and floating telemetry modules
- #1e4d58 — HUD Border Cyan: 1px stroke defining glass card edges and UI containers
- #34d399 — Primary Bio Cyan: Primary CTA button background, active data graphs, and logo icon accent
- #2dd4bf — Bright Teal Flare: Core turbine glow, indicator nodes, and highlight metrics
- #ffffff — Pure Starlight: Main display headline, prominent values, and brand wordmark
- #94a3b8 — Muted Horizon: Body copy descriptions, inactive navigation links, and graph axes
- #5eead4 — Telemetry Caption Teal: All-caps tracking badges, micro-labels, and status tags
TYPOGRAPHY
Typeface Inter Display (or Space Grotesk, Plus Jakarta Sans, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 32px heading-lg, 56px display. Tracking -0.03em at display, 0.08em at uppercase labels. Clean, authoritative, and mission-critical. The geometric sans-serif (Inter Display match) acts as an avionics HUD readout: cold, ultra-precise, highly legible under low light, and strictly organized with wide-tracked metadata headers balancing tight display headlines.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 10px, buttons 10px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created entirely through optical physics rather than standard drop shadows. Translucent glass planes at varying z-index levels sit over a high-altitude space background, with bright inner rim lighting and neon back-glows that illuminate the card contours. The primary hardware asset extends visually past card bounds to reinforce 3D perspective.
IMAGERY
Photorealistic aerospace and astrophysics imagery: cinematic Earth limb curvature viewed from low-Earth orbit, deep space darkness, and hyper-detailed industrial titanium hardware. Flat cartoon illustrations or generic stock photography will instantly dismantle the high-stakes deep-tech tone.
SIGNATURE DETAIL — the thing that makes this design itself
The angled 3D floating cockpit cluster: semi-transparent, cyan-edged glass panels arranged in pseudo-3D perspective around a glowing industrial reactor core. Use it exclusively to showcase flagship deep-tech machinery; misusing it with flat 2D content or non-hardware services makes the floating viewport feel artificial.
MUST
- Use 1px borders colored with transparent teal/cyan (rgba(45, 212, 191, 0.25)) on all card surfaces.
- Set telemetry category labels in uppercase with 0.1em tracking and teal coloring.
- Anchor the visual center of gravity using high-fidelity 3D realistic mechanical renders.
- Preserve deep spatial contrast: keep background luminance below 8% to let cyan accents pop.
AVOID
- Never use pure 255 opaque white card backgrounds or standard drop shadows.
- Avoid warm colors like red, orange, or yellow unless indicating catastrophic error states.
- Do not remove the angled, perspective depth of the right-hand dashboard composite.
- Never set headline typography in serif or purely decorative sci-fi stencil typefaces.
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. Try in DraPub