Design a dark-mode website section: aerospace telemetry floating over orbital solar megastructures against the silence of deep space.
LAYOUT
Asymmetric split composition with left-aligned typographic editorial anchoring and right-side interactive 3D aerospace focal point. The left quadrant holds the category eyebrow, display headline, body narrative, and dual CTAs across a 480px column. The right quadrant balances floating telemetry cards pinned over spatial features, grounded by a centered vitals bar at the base.
PALETTE (use these exact hex values)
- #02040a — Space Void: Primary background canvas creating an infinite, deep space atmospheric backdrop
- #0a1324 — HUD Glass Fill: Translucent background for telemetry cards and floating instrument panels with 65% opacity
- #3de082 — Phosphor Green: High-emphasis keyword highlights, active status dots, and primary call-to-action fill
- #38bdf8 — Orbital Glow: Atmospheric rim lighting, subtle card border highlights, and chart accents
- #ffffff — Starlight White: Display headlines, primary statistics, and navigation wordmark
- #94a3b8 — Telemetry Slate: Body descriptions, secondary labels, and inactive navigation links
- #1e3a5f — Border Cyan: Hairline perimeter strokes on telemetry cards and secondary button containers
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Satoshi, Space Grotesk), weights 400/500/600/700. Sizes 10px caption, 13px body-sm, 15px body, 18px subheading, 28px heading, 60px display. Tracking -0.03em at display, 0.08em at micro labels. The voice is authoritative, visionary, and technically rigorous, reminiscent of mission control interfaces and next-generation space exploration documentation. The geometric sans gives monumental scale without feeling sterile, while monospaced numerical readouts provide empirical weight. For open-source implementations, pair Plus Jakarta Sans or Inter for display and JetBrains Mono for metrics.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 9999px, buttons 9999px. Spacing on a 4px unit, 20px gaps, 100px between sections, 1360px container, comfortable density.
DEPTH
Elevation is achieved through atmospheric depth, lighting gradients, and translucent glass tiers rather than traditional drop shadows. Foreground HUD cards float above the orbital background with 12px-20px background blur and subtle 1px border strokes tinted in cyan. Light blooms originating from the planet's limb and galactic core illuminate interface components from behind.
IMAGERY
Cinematic, photorealistic orbital perspective showing Earth curvature, deep space starfields, and accurate aerospace hardware engineering. The subject is a colossal photovoltaic satellite array captured from an isometric three-quarter perspective. Low-budget CGI, cartoonish space tropes, or warm daylight earth tones would break the hard-science aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the juxtaposition of cinematic orbital hardware with floating translucent cockpit HUD cards that feature wireframe schematics and live telemetry graphs. It translates deep-tech megastructure engineering into an intuitive aerospace flight-director interface. Misusing it involves overcrowding the screen with non-functional faux metrics or dropping the telemetry panels onto generic flat backgrounds.
MUST
- Use solid phosphor green #3de082 exclusively for singular emphasis words, live status dots, and the primary CTA.
- Enclose floating statistical displays inside glassmorphic cards with 14px corner radius and hairline cyan borders.
- Pair large narrative text in geometric sans with precise tabular or monospaced telemetry values.
- Ensure background photography stays deeply dark at left to preserve high legibility for display copy.
AVOID
- Do not allow bright starfields or Earth limb flares to cross behind the primary headline typography.
- Do not apply sharp rectangular 0px corners to data overlays or interactive elements.
- Do not use warm hues like red, orange, or yellow unless indicating a critical emergency failure state.
- Do not fill telemetry card backgrounds with opaque solid colors; maintain translucent backdrop-blur glass.
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