Design a dark-mode abstract background artwork: deep-space astrometry meets mission-control telemetry rendered through luminous particle nebulae and precision vector reticles.
LAYOUT
The page employs an asymmetric 55/45 split hero within a max 1240px container. The left side stacks hierarchical textual data: kicker, headline, subcopy, CTA pair, mini-feature triptych, and stats shelf. The right side is dominated by the astronomical nebula framed by precision HUD telemetry reticles.
PALETTE (use these exact hex values)
- #040714 — Void Black: Deepest canvas background behind nebula particles and layout structures
- #070e22 — Card Void Glass: Translucent background for lower metrics shelf and secondary pill buttons
- #00f0ff — Electric Cyan: Primary CTA fill, telemetry markers, vector orbits, and starting hue of headline gradient
- #ff3b82 — Spectral Pink: Nebula heat core, gradient terminus for 'Real Impact', and metric value highlights
- #f1f5f9 — Star Dust White: Primary headline typography, brand wordmark, and key metric counts
- #8292a6 — Telemetry Slate: Body copy, navigation items, metric labels, and inactive HUD annotations
- #1e293b — Orbital Wireframe: Subtle border strokes on container cards, button outlines, and tick rulers
- linear-gradient(90deg, #00f0ff 0%, #ff3b82 100%) — Bipolar Impact Gradient: Emphasized headline typography text-fill and outer glow effects
TYPOGRAPHY
Typeface Geist (or Space Grotesk, Inter, Plus Jakarta Sans), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 28px heading, 56px display. Tracking -0.03em at display, 0.12em at caption. The typographic tone is analytical, precise, and authoritative. Geist or Space Grotesk matches the mission-control ethos through geometric precision, short ascenders, and crisp tabular numbers suited for computational interfaces.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is achieved through luminance contrast against absolute darkness rather than drop shadows. Translucent glass surfaces (rgba(7, 14, 34, 0.65)) with 1px subtle strokes provide visual separation from the active particle nebula behind them.
IMAGERY
A photorealistic 3D particle vortex representing an active spiral galaxy with a glowing red-orange core and swirling cyan outer arms. It is strictly astronomical and scientific; cartoonish illustrations or lifestyle stock photography would entirely break the system.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone cyan-to-pink gradient emphasis applied exclusively to the headline climax ('Real Impact'), mirroring the exact thermal transition of the accompanying spiral galaxy particle simulation.
MUST
- Anchor primary interactive targets in solid electric cyan (#00f0ff) with dark text.
- Restrict bright ultraviolet pink (#ff3b82) to focal accents and gradient endpoints.
- Keep typography strictly sans-serif and technically disciplined with tight display tracking.
- Use full pill radii (999px) for all standalone action buttons.
AVOID
- Do not introduce warm yellow or green primary accents outside the core nebula flare.
- Never use serif, handwritten, or novelty fonts in this computational interface.
- Avoid solid opaque light backgrounds for cards or overlays.
- Do not omit the delicate telemetry vector rings around cosmic visual elements.
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 中尝试