Design a dark-mode abstract background artwork: deep space gravitational vortex anchoring frosted glass metrics and ethereal lilac-cyan gradients.
LAYOUT
Asymmetrical two-column composition tailored for a full-viewport hero. The left column (spanning ~45% width) contains the navigational anchor, beta badge, display headline, body copy, CTA cluster, and metric dock stacked vertically with comfortable 20-32px gaps. The right column is dominated by the swirling singularity, with a solitary glass card floating near the bottom-right to create balance without obstructing the vortex core.
PALETTE (use these exact hex values)
- #050818 — Void Black: Deepest canvas background behind nebula photography and vignette edges
- linear-gradient(135deg, #7dd3fc 0%, #c4a5fd 100%) — Astral Glow Gradient: Primary CTA fill and gradient accent applied to display typography
- #38bdf8 — Electric Cyan: Accretion disk highlight, icon tinting, and particle star glow
- #c4a5fd — Nebula Lilac: Warm highlight gradient terminal and interactive hover glow
- #ffffff — Pure Starlight: Primary headline typography, brand logo icon, and metric numbers
- #8da2c0 — Muted Horizon: Subtitles, navigation menu items, and contextual card descriptive body copy
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 20px subheading, 28px heading, 68px display. Tracking -0.03em at display, -0.01em at body. The type choice (geometric neo-grotesque like Inter) projects precision, enterprise stability, and technological authority. Its neutral structural geometry contrasts effectively with the organic chaos of the swirling starfield. Licensing is accessible via open-source distribution, making Inter or Plus Jakarta Sans seamless drop-in solutions without visual compromise.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered entirely through luminescence, atmospheric light falloff, and glass refraction rather than traditional drop shadows. Surfaces closer to the user feature subtle 1px border highlights (rgba(255,255,255,0.15)) and backdrop blur filters that soften the underlying starry vortex. The singularity itself recedes infinitely into a pitch-black core, generating extreme optical depth behind the UI layer.
IMAGERY
The visual anchor is a hyper-detailed CGI simulation of a cosmic accretion disk with an obsidian event horizon. Millions of particulate light specks swirl in logarithmic spirals tinted in electric cyan, deep indigo, and violet. Any secondary imagery must consist solely of ethereal celestial phenomena, ray-marched particle fields, or ultra-clean vector line iconography.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone accretion disk vortex positioned off-center right, pulling the user's focus toward an infinite black hole while its glowing particle trail illuminates floating frosted-glass metric cards. It is commonly misused by placing busy text directly over the glowing center ring, destroying legibility, or by flattening the background into a static two-color linear gradient.
MUST
- Position high-contrast white text strictly against deep, low-luminosity cosmic negative space.
- Use full 999px border radii on all standalone buttons and announcement badges.
- Restrict glass card borders to 1px with no more than 15% opacity white.
- Reserve the cyan-to-lilac gradient exclusively for conversion triggers and headline focal words.
AVOID
- Do not place high-density paragraph text directly over bright nebula light streams.
- Never use opaque, solid rectangular cards that occlude the galactic vortex background.
- Avoid warm colors like pure red, orange, or yellow that break the cold astral palette.
- Do not apply heavy drop shadows; rely on luminous backdrop glow and translucent borders.
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. 在 DraPub 中尝试 
