Design a dark-mode abstract background artwork: astral particle whirlpool illuminating a deep violet void with luminous glass telemetry and precise crystalline typography.
LAYOUT
The composition is governed by an asymmetric hero layout pinned within a max-width 1360px viewport. The upper boundary is anchored by a thin 72px floating navigation bar. The central content splits horizontally: the left 45% accommodates the hero narrative and paired CTA buttons, while the right 55% breathes freely to celebrate the luminous cosmic vortex. Anchoring the bottom is a full-width telemetry capsule positioned with 32px bottom clearance.
PALETTE (use these exact hex values)
- #08031d — Cosmic Void: Deepest canvas background behind particles and UI framing
- linear-gradient(135deg, #a855f7 0%, #ec4899 100%) — Galactic Bloom: Gradient fill for primary action buttons and accent glyphs
- #fce7f3 — Supernova Glow: Bright particle core highlights and chevron hover indicators
- #d946ef — Orchid Flare: Pre-title kicker text and icon rim lighting
- #ffffff — Starlight White: Display headlines, metric values, and high-emphasis links
- #b4a9d6 — Muted Lavender: Body copy, metric labels, and inactive navigation links
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, Archivo), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px subheading, 32px heading, 60px display. Tracking -0.03em at display, 0 at body. The typographic stance is crisp, contemporary, and engineered—prioritizing technical authority through a modern geometric sans with geometric circular shapes. The tight negative tracking (-0.035em) on display sizes gives the large title density and urgency. Plus Jakarta Sans or Inter provides the ideal neutral, ultra-clear vehicle that balances the raw visual spectacle of the cosmic vortex.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 9999px, buttons 9999px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1340px container, comfortable density.
DEPTH
Depth is created entirely through optical illumination and translucency rather than drop shadows. High-z elements, such as the bottom telemetry bar, use translucent violet membranes with heavy backdrop blurs (20-30px) that allow the glowing dust trails to shimmer beneath. The background image acts as the primary light engine, backlighting foreground typographic layers.
IMAGERY
The visual universe is dominated by an hyper-detailed generative particle spiral evoking an accretion disc or celestial galaxy rendered in fuchsia, magenta, and solar yellow micro-dots. The particle field extends into gentle, ribbon-like waves of light across the bottom left. Flat raster photography or conventional abstract 3D clay shapes would fundamentally break this aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The defining gesture is the cinematic collision between an intricate, multi-million-particle glowing accretion spiral on the right and an ultra-restrained, glass-encased telemetry dock floating across the bottom. The visual vortex supplies raw visual power and limitless scale, while the frosted horizontal telemetry strip grounds the product in concrete, quantitative performance metrics.
MUST
- Position the galactic vortex anchor on the right hemisphere to naturally frame left-aligned text.
- Use strict pill radii (9999px) for all standalone action buttons.
- Ensure metric values are at least twice the scale of their corresponding labels.
- Keep navigation links unstyled by bounding boxes, letting background cosmic dust show through.
AVOID
- Do not place solid opaque cards over the particle flow; always utilize backdrop-blur glassmorphism.
- Never use sharp, 90-degree squared corners on interactive elements or telemetry docks.
- Avoid warm yellow or green hues in text; confine warmth strictly to the galactic core illustration.
- Do not clutter the right side with secondary UI cards that obscure the spiral vortex focal point.
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