Design a dark-mode abstract background artwork: deep galactic particle vortex guiding high-cognitive discovery through luminous frosted glass surfaces.
LAYOUT
The hero employs an asymmetric two-zone composition with content heavily anchored to the left while visual energy spirals toward the upper right. The top bar is anchored at 72px with widespread nav links, transitioning into a left-aligned headline stack, dual action buttons, a horizontal trio of glass feature cards, and bottom-anchored metric milestones segmented by vertical rules.
PALETTE (use these exact hex values)
- #040814 — Space Void: Primary background canvas underlying particle artwork and UI elements
- #FFFFFF — Primary Text: High-emphasis display titles, card headers, and button text
- #94A3B8 — Muted Text: Secondary body copy, metric captions, and inactive nav labels
- #38BDF8 — Cyan Glow: Eyebrow tag, metric values, and primary button gradient start
- #818CF8 — Nebula Iris: Gradient middle tone in buttons, active metrics, and highlights
- #FDE68A — Cosmic Gold: Background singularity apex and vortex flare illumination
- linear-gradient(135deg, #6366F1 0%, #38BDF8 100%) — Brand Gradient: Fill for primary call-to-action buttons and feature badges
TYPOGRAPHY
Typeface Inter Display (or SF Pro Display, Plus Jakarta Sans, General Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px subheading, 20px heading, 36px heading-lg, 54px display. Tracking -0.03em on display, 0.08em on uppercase badges. Authoritative, scientific, yet accessible and intensely modern. The geometric sans typeface strips away ornamentation to let the colossal particle vortex take center stage while preserving exceptional legibility at 54px and 13px scales. Readily substituted by Inter Display or SF Pro Display without loss of tone.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 12px, buttons 999px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely by atmospheric luminosity and optical glass layering. Surfaces sit atop the dense particle field using 1px translucent strokes and backdrop blurs rather than traditional offset drop shadows. High-elevation interactive targets exhibit faint inner borders and soft localized glows matching the underlying nebular tones.
IMAGERY
A high-fidelity 3D generative particle spiral swirling inward toward a luminous golden singularity. The particle field transitions from deep ultramarine and violet in the lower left to incandescent amber and yellow in the upper right. Flat vectors, corporate photography, or low-poly assets would completely break this aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The golden-to-cyan particulate vortex funneling into a bright singularity, perfectly harmonized with frosted glass cards that reveal the swirling stardust beneath. Misusing this means applying it as a static low-res raster background or failing to calibrate card transparency, which either drowns the text in noise or suffocates the dynamic art.
MUST
- Use backdrop-filter blur(16px to 24px) on cards so particle art bleeds through softly.
- Apply gradient fills to primary buttons flowing from violet to teal-cyan.
- Maintain high contrast for headings by keeping text purely white or neon tinted.
- Encase primary feature cards in hairline borders of rgba(255, 255, 255, 0.1).
AVOID
- Do not use opaque solid backgrounds for cards; it destroys the cosmic depth.
- Do not apply drop shadows with dark black blurs; use soft cyan/violet rim glows.
- Do not use sharp 90-degree corners on interactive buttons; adhere to 999px pills.
- Do not allow body text to exceed 500px in width when set beside the vortex core.
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 中尝试 
