Design a dark-mode abstract background artwork: a dark void framed by a living vortex of neon particles and radiant focal typography.
LAYOUT
The page follows a strict symmetrical vertical hierarchy centered in the viewport. The top bar contains a compact logo left and horizontal text navigation with a single pill sign-in on the right. The core hero is stacked centrally: announcement kicker, 2-line headline, 2-line subheader, dual CTA cluster, and a unified 4-metric glass bar, terminating in a 4-column footer feature row.
PALETTE (use these exact hex values)
- #020611 — Abyssal Void: Deep structural backdrop across the entire canvas.
- #00d2ff — Electric Cyan: Primary particle glow, keyword accent, and start of button gradient.
- #34d399 — Aurora Mint: Secondary keyword accent on 'Tomorrow' and terminal end of primary button gradient.
- #a855f7 — Ultraviolet: Ambient particle dusting on the left perimeter and secondary icon badge stroke.
- linear-gradient(90deg, #00d2ff 0%, #34d399 100%) — Primary Gradient: Fill for the primary action button and key phrase transitions.
- #ffffff — Pure Starlight: Primary headline words, core metric values, and high-emphasis labels.
- #94a3b8 — Stardust Slate: Body copy, navigation items, metric labels, and secondary links.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist, Satoshi), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 20px subheading, 32px heading, 56px display. Tracking -0.02em at display, 0.01em at body. The typographic tone is ultra-modern, technical, yet highly legible and friendly. A neutral, geometrically balanced sans-serif like Plus Jakarta Sans or Inter ensures clarity amidst the visual complexity of millions of points of light. Licensing standard open-source Google Fonts maintains perfect cross-platform rendering.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 999px, buttons 999px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through optical bioluminescence and optical layering rather than physical drop shadows. A dark canvas (level 0) sits underneath animated particle streams, which wrap in front of and behind a frosted glass stats container (level 1) styled with faint cyan rim lighting and backdrop blur.
IMAGERY
The imagery is non-representational and computational: high-density volumetric particle fields behaving like celestial dust or deep-sea bioluminescence. Real-world photography, flat vector art, or harsh 3D clay objects would severely violate the ethereal, futuristic atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The circular particle vortex aperture: a dynamic ribbon of luminous multi-hued particles that carves out a clean, dark focal clearing specifically calibrated to frame the headline and CTA. Misusing it means scattering particles uniformly across the text, which immediately destroys contrast and headline legibility.
MUST
- Position the central typographic cluster strictly inside the eye of the swirling particle aperture.
- Use pill-shaped 999px radii for all interactive CTA elements and announcement tags.
- Restrict bright cyan and mint glows to actionable elements and emphasized keywords.
- Maintain translucent backdrop-blur (12px to 20px) on glass surfaces over particle fields.
AVOID
- Never introduce solid opaque cards that obscure the fluid particle movement behind them.
- Avoid square or sharp 0px corners on interactive buttons and badges.
- Do not color entire sentences in neon gradients; limit accents to single high-impact words.
- Never use heavy drop shadows; rely entirely on soft radial colored glow spreads.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3408:2416. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
