Design a dark-mode abstract background artwork: deep void illuminated by iridescent particulate vortexes, blending cosmic depth with sleek tech typography.
LAYOUT
The header spans the maximum width with balanced navigation distributed along the top edge. The hero section features a 50/50 horizontal split: the left block contains headline, subheadline, and primary/secondary button group; the right block accommodates the swirling particle nebula. Beneath the hero, a continuous 1px divider spans the container, anchoring four evenly spaced feature columns.
PALETTE (use these exact hex values)
- #040814 — Abyssal Void: Primary background canvas across all sections, providing infinite contrast for particles.
- #FFFFFF — Primary Text White: Headlines, active navigation links, and primary structural labels.
- #8E9BB0 — Secondary Text Muted: Subheadlines, body descriptions, and inactive navigation links.
- linear-gradient(90deg, #A7F3D0 0%, #BAE6FD 35%, #DDD6FE 70%, #FBCFE8 100%) — Pastel Aurora Gradient: High-priority CTA fill and gradient accent on the headline keywords.
- #38BDF8 — Nebula Cyan: Ambient glow and particulate shading in lower field.
- #E879F9 — Nebula Violet Pink: Ambient secondary backlighting in the right-hand vortex.
- #1E293B — Subtle Border Line: Hairline divider separating the hero stage from lower feature columns.
TYPOGRAPHY
Typeface Inter Display (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 16px subheading, 24px heading, 60px display. Tracking -0.03em at display, 0.01em at body. The geometric sans-serif (Inter Display / Geist match) exudes engineered precision, clarity, and modern machine intelligence. Its clean geometry balances the organic, ethereal nature of the cosmic visual. Free open-source alternatives like Inter or Geist fit the production requirements with zero licensing friction.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 9999px, buttons 9999px. Spacing on a 8px unit, 32px gaps, 120px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered entirely through layered atmospheric particles, glowing focal planes, and varying particle point sizes rather than drop shadows. Interface elements sit seamlessly over the background with zero elevation blur on buttons. Subtle depth arises purely from dark void negative space surrounding bright, ethereal light trails.
IMAGERY
Volumetric 3D particle simulation representing mathematical data streams curling into a gravitational vortex or galactic accretion disk. Textures consist solely of light points, stardust sparkles, and soft color mist. Standard photography, 2D vector illustrations, or heavy isometric blocks would immediately ruin the aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-plane composition pairing a sharp, minimalist left-aligned SaaS typography stack with a massive, hyper-detailed 3D particle vortex glowing in pastel cyan and magenta on the right. Misusing it involves placing text directly across the dense center of the vortex or turning the particles into a chaotic, unfocused background blur.
MUST
- Keep typography strictly aligned to the left half while the particle vortex sweeps the right.
- Use 9999px pill radii for all primary interactive buttons.
- Apply the pastel aurora gradient sparingly to headlines and primary CTAs only.
- Maintain high contrast by keeping the base canvas at or below #060B18.
AVOID
- Never place heavy solid-color card backgrounds that obscure the particle vortex.
- Avoid harsh, saturated neon glows; keep colors leaning towards soft pastels.
- Do not use sharp square buttons; always default to full pill radius.
- Do not center-align the main hero headline when paired with an asymmetrical right vortex visual.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3408:2416. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
