Design a dark-mode abstract background artwork: deep space darkness illuminated by swirling, iridescent particle fields transforming raw information into vivid intelligence.
LAYOUT
The header sits pinned at the top with a distributed layout: brand glyph on the far left, centered text nav links with dropdown carets, and a pill action button on the far right. The main hero uses a split composition where left-aligned headline, subcopy, and dual CTAs occupy the dark void, while the right hemisphere erupts into a glowing particle spiral. At the bottom, a horizontal row of four sequential feature steps transitions into a floating live insight widget anchored on the lower right.
PALETTE (use these exact hex values)
- #070E1A — Cosmic Void: Deep navy foundational canvas background behind particle effects
- linear-gradient(90deg, #F58B65 0%, #EA487B 100%) — Solar Flame Primary: High-conversion CTA pill background and critical action indicators
- #2EE3B0 — Vortex Teal: Ambient glow in particle waves and metric upward trendline
- #FFB84C — Amber Core: Warm spiral core highlight and feature badge background
- #FFFFFF — Starlight White: Hero headline, logo, and active key value data metrics
- #8C9DB5 — Nebula Slate: Body copy, subheads, secondary buttons, and dormant nav items
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 13px subheading, 16px body, 18px body-lg, 24px heading, 56px display. Tracking -0.03em at display, 0.01em at body. The typography is clean, ultra-modern, and mathematically disciplined, evoking enterprise reliability and high-speed data computing. Inter Display or Plus Jakarta Sans provides crisp geometric apertures and neutral letterforms that keep technical copy clear. Using generous letter-spacing on uppercase tags balances the ultra-tight, authoritative display headline.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, airy density.
DEPTH
Depth is created purely through luminous optical layering rather than standard drop shadows. The deep navy canvas serves as the infinite floor, the dense 3D particle cloud creates mid-ground atmospheric volume, and the glassmorphic telemetry card floats on top using backdrop-filter blur and a 1px white translucent border.
IMAGERY
The imagery features a sweeping, luminous 3D point-cloud particle simulation forming waves and an interstellar golden spiral vortex. The particles represent fluid raw data streaming into organized intelligence. Flat vectors, standard photography, or cartoonish 3D shapes would completely break the hyper-technical yet cosmic aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The sweeping bioluminescent particle field that flows across the lower viewport and terminates in a golden spiral vortex on the right. It visually equates complex data ingestion with cosmic phenomena, while leaving a pristine dark zone on the left for flawless typographical readability.
MUST
- Retain high contrast by ensuring hero copy sits over deep void regions, never overlapping dense bright particle swirls.
- Use pill (999px) border radii for interactive buttons to contrast against rectangular glass cards.
- Render the main headline at 56px with tight -0.03em tracking and strong vertical leading (1.05).
- Pair the primary gradient CTA with a restrained, transparent ghost secondary link to maintain hierarchy.
AVOID
- Do not use sharp 0px or small 4px border radii on buttons; rounded pills are essential.
- Do not add opaque or solid light backgrounds to cards or headers, as they destroy visual depth.
- Never place white headlines over the yellow spiral core where luminance ruins legibility.
- Do not introduce heavy block shadows; use translucent borders and particle illumination for elevation.
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