Design a dark-mode abstract background artwork: an ethereal celestial void pierced by iridescent particle rings and frosted glass telemetry.
LAYOUT
The composition is structured as an asymmetrical split hero on a 1280px grid. The left half contains strict left-aligned editorial hierarchy: metadata tag, two-line display headline, explanatory paragraph, dual CTA buttons, and a three-column feature triad. The right half is given over entirely to the glowing particle planet artwork, which radiates warmth toward the top right. Anchoring the layout along the bottom is an expansive, horizontally divided frosted telemetry bar.
PALETTE (use these exact hex values)
- #040814 — Canvas Void: Deep cosmic background canvas across the full viewport
- linear-gradient(90deg, #93B5FD 0%, #D8B4FE 45%, #FDE2BE 100%) — Star Dust Pill: Primary action button backgrounds creating an opalescent highlight
- #2DD4BF — Celestial Cyan: Used within background particle rings and delicate line-art icons
- #E879F9 — Nebula Magenta: Glowing perimeter tone on the central planetary illustration
- #FDE68A — Solar Gold: Warm star burst light cast in the upper-right corner and star ratings
- #F8FAFC — Pure Starlight: High-contrast headings, active metric numerals, and primary labels
- #94A3B8 — Cosmic Slate: Descriptive body copy, subheaders, and passive navigation items
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Outfit, DM Sans), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 28px heading, 56px display. Tracking -0.03em at display, 0.08em at uppercase captions. The typographic tone is progressive, rational, and crystalline. By pairing Plus Jakarta Sans in light-to-medium display weights with wide-tracked uppercase tags, the system conveys high-agency technological maturity without feeling cold. The geometric circular counters echo the celestial orb illustration, unifying text with graphic identity.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through atmospheric lighting, layer luminescence, and backdrop blur. Rather than casting muddy box shadows, surfaces use 1px border strokes with low-opacity white highlights and soft radial gradients underneath. Floating elements like the metrics dock appear suspended above deep space through 20px rounded frosted glass.
IMAGERY
The visual hero is a richly textured 3D celestial sphere encircled by luminous particle rings and a spiraling ribbon of iridescent golden stardust. The aesthetic combines astronomical wonder with high-tech precision graphics such as faint coordinate rings and point clouds. Stock photography of humans or flat vector artwork would completely break the cosmic mood.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the opalescent particle-light gradient (soft cornflower blue through lavender to warm peach) applied as a high-contrast pill button against a dark celestial particle field. It transforms what could be a generic developer dark mode into an awe-inspiring educational destination. Misusing this gradient on full card backgrounds or text spans dilutes its focal punch; it should exist only as an interactive beacon.
MUST
- Ground the interface in deep cosmic navy (#040814) to maintain luminance in glowing assets.
- Use 999px fully rounded pills for primary callouts and button elements.
- Rely on clean 1px translucent borders (rgba(255,255,255,0.12)) for glass panels.
- Pair stark white headline typography (#F8FAFC) directly against cool slate body copy (#94A3B8).
AVOID
- Never introduce opaque white or solid saturated primary button fills like pure blue or red.
- Do not use sharp 0px or boxy rectangular corners on interactive components.
- Avoid heavy dark drop shadows; use backdrop-blur and thin luminous strokes instead.
- Never center-align the main hero headline; it must align left against the celestial backdrop.
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 中尝试 
