Design a dark-mode abstract background artwork: cosmic telemetry glowing in deep space, framed by precise geometric data points and soft neon gradients.
LAYOUT
Asymmetric two-column split. The left 45% column holds structured linear content: eyebrow badge, multi-line display headline with selective color emphasis, body text, two CTAs, three metrics, and social proof logos. The right 55% is completely yielded to the massive celestial point-cloud illustration which bleeds off the right edge.
PALETTE (use these exact hex values)
- #040711 — Cosmic Void: Root background canvas providing maximum contrast for bioluminescent particle rendering.
- #FFFFFF — Starlight White: Primary heading typography, high-impact numbers, and high-contrast branding elements.
- #79E2D0 — Muted Cyan Glow: Accent text on hero headline emphasis and left stop of the primary gradient.
- #F8B7B2 — Aurora Peach: Right stop of the primary button gradient and warm atmospheric rim lighting on the sphere.
- linear-gradient(90deg, #7BE4D5 0%, #F5B8B5 100%) — Atmospheric Gradient: Primary interactive fills for hero button and navbar 'Get started' CTA.
- #8E9BAE — Nebula Slate: Body copy, subheadings, unselected navigation links, and metric supporting labels.
- #1B2436 — Deep Space Border: Subtle 1px outlines on badge containers, metric icon circles, and secondary controls.
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 24px subheading, 60px display. Tracking -0.03em at display, 0.05em at caps badge. Inter Display or equivalent neo-grotesque sans provides a modern, neutral foundation that allows the complex particle art to dominate. Tight negative letter-spacing in the hero title gives a monumental, product-led authority, while spaced all-caps badges convey scientific precision. Free alternatives include Geist Sans and Plus Jakarta Sans.
GEOMETRY & SPACING
Corner radii — cards 16px, links 9999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created purely through luminous optical layering rather than box-shadows. Bright glowing particles simulate atmospheric scatter against an infinite deep space backdrop (#040711). Interface controls hover weightlessly via subtle hairline borders and micro-glow transparency.
IMAGERY
A 3D generative particle point-cloud forming a celestial body surrounded by orbiting rings. The density of particles scales from razor-sharp teal dots on the front equator to soft warm-orange atmospheric scatter at the upper-right crest. Avoid literal stock photography, photorealistic CGI landscapes, or flat 2D vector illustrations.
MUST
- Reserve the teal-to-peach gradient exclusively for primary conversion touchpoints.
- Keep headlines left-aligned and tightly tracked (-0.03em) to contrast with open cosmic space.
- Use 1px dark slate borders (#1B2436) around icons and tags to establish crisp technical fidelity.
- Ensure the hero planetary artwork stays anchored on the right half, fading gracefully toward the left margin.
AVOID
- Do not introduce solid opaque cards or heavy drop shadows that fracture the deep space illusion.
- Do not use saturated primary colors like pure blue or red outside the subtle atmospheric particle spectrum.
- Do not center-align the hero copy or metric numbers.
- Avoid thick button borders; prefer hairline 1px boundaries or borderless gradient fills.
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 中尝试 
