Design a dark-mode abstract background artwork: cosmic deep-space canvas balanced against ethereal pastel gradient optics and precision particle geometry.
LAYOUT
The viewport is structured on an asymmetrical two-column framework over a unified deep-space panorama. The left column (spanning ~45% width) holds a stacked vertical rhythm: 80px navbar offset, 24px eyebrow badge, headline at 60px, 16px narrative paragraph, dual-button action row, and an 80px-spaced row of three metric indicators. The right 55% is left entirely open for the celestial particle vortex to swirl dramatically across the depth plane.
PALETTE (use these exact hex values)
- #040816 — Cosmic Void Base: Deepest canvas background fill absorbing ambient light across the entire viewport
- #FFFFFF — Starlight Primary Text: High-contrast headings, navigation labels, and metric numerical values
- #8A99AD — Muted Nebula Slate: Sub-headings, navigation hover states, and uppercase metric descriptions
- #D896FF — Ethereal Lilac: Starting stop for interactive CTA pills and the typographic gradient accent on 'intelligent'
- #62F1DF — Prismatic Cyan: Terminal stop of hero gradient badges, button backgrounds, and trailing vortex particles
- #FFDF85 — Solar Core Amber: Singular focal glow at the core of the galaxy particle accretion disk
- #273852 — Orbital Border Ghost: Low-opacity boundaries for badge circles and divider rules
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, General Sans), weights 400/500/600. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 22px heading, 60px display. Tracking -0.025em on display, 0.18em on overline caps. The type selection conveys ethereal technological intelligence through precise, low-weight sans-serif geometry. Setting the 60px headline in weight 400 rather than heavy bold makes the message feel poised, computational, and modern rather than aggressive. Substitution with standard Inter, Plus Jakarta Sans, or SF Pro Display works seamlessly as long as the weights remain light and displays are tightly tracked.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 999px. Spacing on a 4px unit, 20px gaps, 120px between sections, 1320px container, airy density.
DEPTH
Depth is created entirely through optical atmospheric illumination rather than CSS drop shadows. Bright point-light sources in the celestial background cast soft ambient halation, causing white foreground typography and gradient pills to feel physically positioned meters in front of an infinite cosmic space.
IMAGERY
The imagery consists of a 3D generative particle accretion disk resembling a swirling galaxy seen at an oblique perspective. Individual bokeh light disks range from sharp pinpoint dots to soft out-of-focus globes, shifting chromatically from warm yellow-orange at the event horizon through violet and cyan. Photo-realistic cutouts, vector illustrations, or UI screenshots would clash violently with this look.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the dual-tone pastel gradient pill (lilac #D896FF to cyan #62F1DF) carrying high-contrast deep-navy text, mirrored exactly once within the headline text itself. This establishes an unmistakable visual handshake between the core brand proposition word ('intelligent') and the primary conversion action ('Get Started'). Misusing this means applying the gradient to borders, badges, or multiple headings, which immediately dilutes its pinpoint magnetic quality.
MUST
- Keep typography predominantly lightweight (400-500) even at 60px display scale to preserve sophistication.
- Isolate the complex particle visualization to the right two-thirds, ensuring left typography sits over clear #040816 canvas.
- Use pill radii (999px) strictly for interactive button surfaces and no other shape.
- Apply the pastel gradient (lilac to cyan) sparingly to one CTA and one single word in the headline.
AVOID
- Do not put solid card backgrounds, borders, or drop shadows under the hero text column.
- Never use heavy 800 or 900 font weights; it destroys the airy cosmic aesthetic.
- Do not let bright galaxy particles overlap directly beneath the 16px body copy or primary headline.
- Avoid warm colors (reds, oranges) in UI controls; reserve warm spectrums strictly for the deep core graphic.
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 中尝试 
