Design a dark-mode website section: mission-critical aerospace hardware emerging from deep cosmic blackness along glowing ionized particle trails.
LAYOUT
Asymmetric two-column split on an expansive 1360px container grid. The left column (spanning ~55% width) holds the technical narrative: category eyebrow, massive three-line display headline, two-line supporting descriptor, dual CTA cluster, and lower qualification metrics. The right column (spanning ~45% width) hosts the hardware package embedded in the curving upward arc of the cosmic particle stream.
PALETTE (use these exact hex values)
- #07090e — Void Canvas: Deepest canvas background absorbing light across the entire viewport
- #0e131f — Elevated Substrate: Subtle container fill for badge icons and metric blocks
- #2b66f5 — Mission Blue: Primary interactive CTAs and focused button backgrounds
- #38bdf8 — Ion Cyan: Leading edge of particle streams and gradient text initiation
- #a855f7 — Plasma Purple: Trailing particle dust and ending hue of the dual-tone headline
- linear-gradient(90deg, #4f86f7 0%, #818cf8 50%, #b882ea 100%) — Headline Gradient: Applied to final headline clause for technological resonance
- #ffffff — Pure White: High-contrast hero titles, logo wordmark, and primary button labels
- #8f99ab — Muted Slate: Navigation links, supportive copy, and secondary descriptions
- #6b778d — Overline Ash: Small tracked uppercase section eyebrows and auxiliary captions
TYPOGRAPHY
Typeface Inter Display (or Geist,SF Pro Display,General Sans), weights 300/400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 28px heading, 64px display. Tracking -0.03em at display, 0.22em at eyebrow. The voice is austere, calculated, and uncompromisingly precise. Inter Display (or Geist) provides surgical geometry with cold, clinical legibility suited for defense and aerospace mission standards. Display sizing conveys authoritative scale while light weights maintain high-tech sophistication instead of brute marketing force.
GEOMETRY & SPACING
Corner radii — cards 12px, links 2px, inputs 6px, buttons 6px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1360px container, airy density.
DEPTH
Depth is rendered entirely through optical luminance and physical rendering rather than interface drop shadows. Atmospheric glows from the sweeping particle stream establish a curved light plane beneath the dark metal hardware enclosure. UI elements float flatly above the void, delineated by crisp 1px borders (#1a2233) on select functional indicators.
IMAGERY
Photorealistic aerospace hardware CAD rendering in matte powder-coat metals, industrial connectors, and copper-sleeved cabling. The background features high-resolution ionized light sweeps composed of millions of fine glowing dust particles. Never use stock human imagery, lifestyle photography, or abstract geometric vectors.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone headline punchline fading into a vibrant blue-violet gradient ('zero compromise.') perfectly harmonized with a sweeping aerospace velocity trail in the background. It bridges clinical engineering typography with hyper-futuristic cosmic propulsion aesthetics. Replicate by setting the concluding phrase in background-clip text gradient while trailing curved particle streams underneath the product.
MUST
- Use pure white type (#ffffff) only for display headlines, stat figures, and primary button text.
- Keep display typography light-weighted (300 to 400) even at massive scales above 60px.
- Track all uppercase technical eyebrows out to at least 0.2em for military-spec aerospace pacing.
- Ground physical hardware directly into dynamic atmospheric light sweeps rather than floating in pure empty black.
AVOID
- Do not introduce warm tones (yellows, oranges, reds) except on small industrial hardware wire accents.
- Do not use heavy, chunky, or geometric sans typefaces that look like playful consumer tech.
- Do not box the overline category tag in a rounded pill badge; keep it raw text.
- Do not apply heavy drop shadows to buttons; use sharp flat color fills without outer halos.
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