Design a dark-mode website section: an astronomical shift from fragmented monochrome debris into luminous, cybernetic research clarity.
LAYOUT
The header sits flush across the top grid with symmetric link distribution. The hero employs an asymmetrical 50/50 two-column layout: left column contains the text hierarchy, CTA buttons, and triple value-prop validation row; right column features the rich visual transformation culminating in floating product status widgets.
PALETTE (use these exact hex values)
- #04070d — Cosmic Void: Dominant deep space canvas background underpinning the entire page section
- #0c1524 — Glass Slate: Translucent background for floating pipeline and telemetry dashboard cards
- #22d3ee — Electric Cyan: Luminescent glow, particle streams, active status nodes, and primary gradient stop
- #4ade80 — Aurora Mint: Success badges, secondary gradient stop for headline and primary action button
- linear-gradient(90deg, #38bdf8 0%, #4ade80 100%) — Primary Gradient: High-conversion CTA background fill and display heading highlight span
- #ffffff — Pure White: Primary headings, active task names, and prominent interface labels
- #94a3b8 — Starlight Gray: Supporting descriptive copy, subtitle paragraphs, and inactive navigation links
- #1e293b — Subtle Border: Subtle outlines around pills, buttons, and glassmorphic card containers
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 16px body, 20px subheading, 28px heading, 56px display. Tracking -0.02em at display, 0 at body. Plus Jakarta Sans delivers a technical yet approachable neo-grotesque demeanor, balancing scientific precision with SaaS accessibility. The tight display tracking gives the headline an authoritative, engineered stance, while generous body line heights maintain effortless scannability on pitch-black surfaces.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 999px, buttons 999px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1320px container, comfortable density.
DEPTH
Depth is created through luminescent back-glows and atmospheric contrast rather than traditional directional drop shadows. Floating HUD surfaces sit on rgba(12, 21, 36, 0.85) glass with 1px translucent rims, appearing suspended over glowing volumetric particle fields.
IMAGERY
The imagery relies on a split spatial metaphor: floating 3D greyscale paper fragments and asteroids on the left, colliding into an orbital planetary horizon that disperses into glowing teal geometric cubes and particle bursts. Any literal photo of human beings, desks, or stock laboratory imagery would break the cosmic-cybernetic language.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the horizontal Before-to-After cosmological threshold: scattered greyscale papers physically resolving across an arched vector trajectory into glowing cyan telemetry cards. Without this explicit visual metamorphosis from paper chaos to digital order, the design would revert to a generic dark SaaS hero.
MUST
- Use a vibrant cyan-to-mint gradient strictly for the focal headline noun and primary CTA.
- Enclose all action buttons and status tags in 999px pill geometries.
- Keep visual clutter on the left strictly monochrome to contrast with the vibrant right-side UI.
- Enforce a 1px border of rgba(255,255,255,0.1) on all dark floating cards.
AVOID
- Do not introduce warm hues like orange, yellow, or red into the core visual scheme.
- Do not use sharp 0px corners on interactive buttons or UI telemetry panels.
- Do not color the left-hand chaos debris; it must stay greyscale to represent manual friction.
- Do not make the dark background solid pure black #000000; retain subtle deep blue depth.
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 
