Design a dark-mode abstract background artwork: deep-space dark canvas charged by high-energy particle vortexes and neon yellow-to-cyan gradient luminescence.
LAYOUT
The header spans edge-to-edge with balanced horizontal margins, cleanly separating navigation from the hero narrative. The hero adopts an asymmetric two-column composition: the left 55% hosts the headline hierarchy, supporting copy, dual pill actions, and a 4-column row of metric cards. The remaining right 45% is dominated by the energetic sweep of the particle loop, grounding the page in motion before transitioning downward.
PALETTE (use these exact hex values)
- #060B0E — Abyss Void: Deep cosmic black-blue canvas background absorbing all base light
- #E2FA3C — Vortex Lime: High-visibility focal accent used in category badges, gradients, and CTA starts
- #40C8F4 — Kinetic Cyan: Cool trailing terminal color for text gradients, glow highlights, and buttons
- #54E5A8 — Emerald Mint: Intermediate harmonic step within the core kinetic spectrum
- linear-gradient(90deg, #E2FA3C 0%, #68ECAE 55%, #46DBEA 100%) — Hero CTA Gradient: Primary conversion pill background driving maximum visual pop
- #FFFFFF — Optical White: Primary headings, dominant metric titles, and high-emphasis labels
- #94A5B1 — Starlight Muted: Body copy, navigation links, and explanatory metric subtext
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Archivo), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 28px heading-lg, 56px display. Tracking -0.03em at display, 0.08em at micro uppercase. The typography speaks with authoritative, scientific precision tempered by modern consumer polish. A clean neo-grotesque sans-serif with geometric roundness (similar to Plus Jakarta Sans or Inter) prevents the tech theme from feeling harsh or sterile. Tight display tracking (-0.035em) delivers high visual tension at large scales, perfectly balanced by loose tracking (+0.12em) on micro uppercase tags.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 16px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created entirely through optical physics rather than simulated drop shadows. The deep black base recedes infinitely, while 3D particle vortex strands loop dynamically in front of and behind visual layers with optical depth of field blur. UI cards sit close to the glass plane using 60% opacity fills, subtle 1px white boundaries, and backdrop blur to sample the kinetic lights behind them.
IMAGERY
The visual anchor is a high-resolution, physics-driven particle simulation forming a glowing orbital vortex. Individual particle specs range from crisp pinpoint dots to soft out-of-focus circular bokeh orbs in hues from intense golden lime (#E2FA3C) to cyan (#40C8F4). Photography of real people, stock devices, or flat vector illustrations would completely break the hyper-technical quantum computing feel.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the continuous yellow-to-cyan energy stream: a chromatic particle vortex that begins as a massive 3D graphical background swirl and directly informs the typography's gradient fill, the primary pill CTA, and the metric iconography. It is commonly misused by scattering colors randomly across the screen instead of treating the yellow-to-cyan transition as a directional, cohesive lighting axis.
MUST
- Keep the canvas near pitch-black (#060B0E) to allow luminous gradients to emit optical glare.
- Restrict text gradients exclusively to the terminal punchline words of high-level display headlines.
- Use pill geometries (999px radius) for all action items and metric status pills.
- Layer metric cards over the particle field using backdrop-filter blur and 1px borders.
AVOID
- Never use pure black (#000000); keep a faint deep oceanic blue undertone in the dark canvas.
- Avoid solid opaque gray cards which deaden the kinetic particle visual beneath.
- Do not apply heavy drop shadows with dark offsets; depth is achieved via translucency and glow.
- Never set long-form paragraphs in gradient text fills; preserve gradient only for key headings.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3424:2416. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
