Design a dark-mode abstract background artwork: deep galactic void electrified by a spiraling luminous particle accelerator and precision glassmorphic developer telemetry.
LAYOUT
The hero uses an asymmetric 60/40 two-column composition overlaid on a continuous canvas. The left column is weighted with a pill badge, massive stacked 64px display typography, short body prose, and paired CTAs, terminating in a 4-column feature row. The right zone is preserved for the particle vortex, inhabited only by scattered glass telemetry cards and borderless code snippets.
PALETTE (use these exact hex values)
- #060b16 — Abyssal Navy: Deepest canvas background framing the cosmic particle vortex and text
- #70ecd5 — Hyper Cyan: Primary action button fill, highlight headline text, and live status dots
- #f59f87 — Vortex Coral: Inner swirling particle lighting conveying speed and energy in background art
- #4ea8de — Electric Azure: Syntax highlighting, code snippets, and sparkline vector paths
- #ffffff — Pure White: Primary headline text, active navigation labels, and key metric digits
- #8ea0ba — Muted Periwinkle: Secondary hero description, feature body copy, and inactive nav items
TYPOGRAPHY
Typeface Inter Display (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 18px body-lg, 20px subheading, 28px heading, 64px display. Tracking -0.03em at display, -0.01em at body. The typography balances human engineered clarity with industrial precision. Inter Display (or Geist) provides tight, neutral sans-serif legibility that prevents the dramatic background visual from feeling cluttered or unreadable. The monospace accents anchor the design firmly in a sophisticated developer-tooling reality.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through atmospheric optical perspective rather than dropped box-shadows. The black canvas represents infinite depth, while luminous particle clouds swirl across a mid-plane, casting ambient light behind translucent glass cards with backdrop-filter blur. Floating widgets sit on the highest Z-plane, defined only by delicate 1px light-catching borders.
IMAGERY
The imagery consists of an intricate, 3D parametric particle stream forming a cosmic vortex with varied bokeh depth-of-field. The particle coloration flows smoothly from cyan and teal into fiery peach and deep indigo. Photorealistic stock photography, flat vector illustrations, or cartoon icons would completely break the technical, cutting-edge atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the luminous kinetic particle vortex sweeping diagonally across the dark void, interacting directly with borderless code text and floating glass metrics. To replicate it, treat the background art as a dynamic spatial field that frames interface widgets rather than a passive wallpaper, ensuring the brightest swirl cradles the right-hand content.
MUST
- Anchor high-energy swirling particle backgrounds behind content, fading to pure #060b16 near the bottom and left edges.
- Maintain strict text contrast by reserving pure #ffffff for the primary headline and crucial metric figures.
- Use pill-shaped radiuses (999px) for all primary buttons, chips, and input controls.
- Overlay syntax-highlighted code directly onto visual effects without opaque container backgrounds to convey integration.
AVOID
- Never use heavy drop shadows with black opacity; all depth must rely on particle luminance and frosted backdrops.
- Do not place high-saturation warm colors in body typography; reserve warm peach (#f59f87) exclusively for particle art.
- Avoid square or sharp corners on interactive buttons; they disrupt the aerodynamic cosmic aesthetic.
- Do not wrap floating ambient code blocks in opaque dark cards; they must bleed organically into space.
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