Design a dark-mode abstract background artwork: swirling celestial particle vortex framing pristine white typography and frosted glass instrumentation.
LAYOUT
The layout uses a left-weighted asymmetric hero configuration. The global navbar floats along the top margin; hero headline, subcopy, and dual CTAs form a compact, left-aligned typographic stack occupying 45% of the viewport width. The bottom is anchored by an expansive, horizontally centered glass feature bar.
PALETTE (use these exact hex values)
- #050b18 — Void Black: Deep structural backdrop framing the outer edges of the viewport
- #ffffff — Starlight White: Primary headings, high-contrast CTA backgrounds, and active icons
- #94a3b8 — Muted Nebula: Secondary descriptors, navigation links, and feature micro-copy
- #ffb238 — Solar Core: Warm gradient terminus for headline text and radiant core glow
- #38bdf8 — Hyper Cyan: Cool trailing particle luminescence and secondary gradient stop
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, Manrope), weights 400/500/600. Sizes 12px caption, 14px body-sm, 15px body, 15px subheading, 18px body-lg, 24px heading, 64px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative, hyper-clean, and frictionless. Inter Display or Plus Jakarta Sans provides a clean neo-grotesque structure with geometric precision that counters the dynamic chaos of the celestial backdrop without competing for attention.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 24px gaps, 120px between sections, 1320px container, airy density.
DEPTH
Depth is created not via traditional drop shadows, but through atmospheric lighting and optical physics: radiant volumetric light emerges from behind translucent frosted glass planes, while 1px white translucent borders create crisp lens-like surface separation.
IMAGERY
The imagery consists of a sweeping, photorealistic particle vortex with millions of luminous points streaming into a radiant solar focal point. It balances warm stellar golds with icy cyan trails, avoiding flat vectors, cartoons, or photorealistic human portraiture.
SIGNATURE DETAIL — the thing that makes this design itself
The sweeping cosmic particle accretion disk framing a left-aligned headline with a warm-to-cool horizontal text gradient on the lower phrase. It creates an unmistakable sensation of peering through a starship viewport, ruined if replaced with standard flat gradients or centered text layouts.
MUST
- Keep typography predominantly crisp white against deep space backgrounds for extreme legibility.
- Use 999px full-pill radii for all interactive CTA buttons and notification badges.
- Use backdrop-filter: blur(16px to 24px) combined with 1px translucent borders on floating containers.
- Align core messaging cleanly to the left third of the screen to clear the radiant visual focal point.
AVOID
- Do not use opaque, solid rectangular card backgrounds that obscure the flow of background particles.
- Avoid warm colored fills on primary buttons; reserve pure white for dominant interaction triggers.
- Do not clutter the central light singularity with text, badges, or overlays.
- Never apply thick, heavily colored borders to frosted glass components.
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