Design a dark-mode abstract background artwork: cosmic point-cloud vectors weaving glowing data arcs through a glass-anchored deep space canvas.
LAYOUT
The page follows a classic asymmetrical hero layout with clear vertical anchoring. The top bar is a single row spanning full-width with 32px edge margins. The left 45% of the viewport contains the headline, descriptive subtext, and dual CTA stack, leaving the right 55% open for the dynamic particle volume. The lower fold is anchored by a persistent, centered four-column glass dock.
PALETTE (use these exact hex values)
- #040614 — Void Deep: Deepest canvas background providing limitless contrast for radiant particle lighting
- linear-gradient(90deg, #7ee8fa 0%, #80eec0 30%, #c499f8 100%) — Gradient Mint Violet: Signature spectrum applied to primary call-to-action fills and text emphasis
- #f59e0b — Particle Amber: Warm caustic light trail in the lower particle vortex
- #ec4899 — Particle Magenta: Mid-spectrum chromatic glow on peripheral scatter points
- #ffffff — Text Pure White: Display headlines, active navbar states, and high-priority labels
- #94a3b8 — Text Muted Slate: Body copy, inactive navigation items, and secondary descriptions
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, Geist Sans, Satoshi), weights 400/500/600. Sizes 12px caption, 13px body-sm, 15px body, 18px subheading, 64px display. Tracking -0.03em at display, -0.01em at body. The typography speaks with cold, ultra-engineered authority tempered by immaculate technical polish. A high-clarity neo-grotesque like Inter Display provides neutral precision, allowing the iridescent gradient accents to feel calculated rather than decorative. In production, Satoshi or Plus Jakarta Sans are direct drop-in alternatives.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 32px gaps, 112px between sections, 1360px container, comfortable density.
DEPTH
Depth is created entirely through optical illumination and transparency rather than conventional drop shadows. Background particles appear behind a darkened atmospheric gradient, while foreground UI components float via backdrop-filter blur (16px to 24px) and subtle specular edge strokes in rgba(255,255,255,0.12).
IMAGERY
The visual hero is a mathematically dense WebGL particle simulation resembling cosmic planetary rings or neural data filaments. Individual particles range from cool cyan to magenta and warm solar amber along curvature peaks. Flat vectors, photographs of humans, or stock illustrations are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the curved, luminous point-cloud planetary ring slicing diagonally behind a frosted glass dock, echoed by the gradient text-fill on the final headline phrase. Without this specific iridescent particle arc against the void, the design degrades into a generic dark SaaS layout. Keep the particle flow dense along the caustic arc and feathered at the edges.
MUST
- Position the particle glow density so high-contrast text stays in the dark negative space.
- Use a 1px rgba(255, 255, 255, 0.12) border to crisply demarcate glass surfaces.
- Limit the mint-to-lavender iridescent gradient strictly to primary CTAs and terminal headline accents.
- Ensure dark slate text (#040614) is used inside the iridescent button for readable contrast.
AVOID
- Do not introduce solid opaque backgrounds for cards or containers over the particle backdrop.
- Avoid warm solid colors (reds, oranges) on UI surfaces; warmth belongs strictly to the particle caustic rim.
- Do not center-align the main headline; the text must remain firmly left-aligned.
- Never add drop shadows with heavy black blur; rely on glass borders and backdrop blur for depth.
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 中尝试 
