Design a dark-mode abstract background artwork: deep celestial void punctuated by neon particle streams, razor-sharp typography, and luminous glassmorphic data metrics.
LAYOUT
The page opens with a floating utility navigation bar distributed across a standard 1280px container. The hero splits into an asymmetric two-column zone: left-aligned headline, narrative paragraph, dual CTA buttons, and a horizontal triplet of trust micro-badges, balanced against an expansive astronomical illustration on the right. Anchoring the viewport base is a continuous horizontal metrics shelf containing four KPI columns and a single frosted testimonial card.
PALETTE (use these exact hex values)
- #060818 — Void Abyss: Root canvas background absorbing all ambient light across the entire viewport
- #0d1330 — Translucent Nebula: Base fill for glassmorphic cards and subtle section backdrops
- #f43f5e — Stellar Magenta: Starting anchor for call-to-action buttons, glow rings, and highlight particles
- #a855f7 — Cosmic Violet: Ending stop for linear gradient text fills and primary action pills
- #38bdf8 — Electric Cyan: Secondary metric text fills, particle accents, and ambient volumetric flares
- #ffffff — Pure Starlight: Primary hero headings, navigation active states, and high-emphasis labels
- #94a3b8 — Muted Horizon: Body copy, dormant navigation links, and feature subtext descriptions
- #475569 — Subtle Cosmic Dust: Metric captions and tertiary sub-labels below numerical displays
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Geist Sans, DM Sans), weights 300/400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 24px subheading, 44px heading, 64px display. Tracking -0.03em at display, 0 at body. The typographic tone is futuristic, analytical, and highly refined. Using a crisp geometric sans like Plus Jakarta Sans in light weights conveys scientific precision rather than brute tech aggression. If Plus Jakarta Sans is unavailable, Inter or Geist Sans provide the requisite geometric clarity and neutral clinical balance.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 9999px, buttons 9999px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through volumetric particle luminescence and cosmic gradients rather than structural CSS drop shadows. Frosted glass panels utilize backdrop filters with faint 1px white border lines (rgba(255, 255, 255, 0.08)) to float visibly above the stardust background. The background planet uses half-tone shading to recede into deep three-dimensional space.
IMAGERY
The imagery consists of a photorealistic yet stylized cosmic planetary body ringed by an explosive half-tone particle vortex in hot magenta and neon cyan. The particulate field flows organically from the right edge toward the bottom-center. Cartoonish illustrations, flat corporate vectors, or low-resolution photography would completely violate this aesthetic.
MUST
- Keep display headlines surprisingly light in weight (300-400) to balance the dense planetary graphic.
- Use magenta-to-purple linear gradients strictly for primary CTAs and key narrative headline terms.
- Render metrics with high-contrast colored numbers and muted slate descriptor labels beneath.
- Enclose social proof and peripheral elements in frosted glass cards with 1px translucent borders.
AVOID
- Do not use heavy, chunky blackletter or ultra-bold weights for the main hero headline.
- Do not place solid opaque cards with drop shadows on top of the celestial particle field.
- Do not use saturated primary green or yellow hues; limit accents strictly to magenta, purple, and cyan.
- Do not apply sharp right-angle corners to interactive buttons; always use full pill radii.
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 中尝试 
