Design a dark-mode abstract background artwork: deep-space glassmorphism orbiting a celestial vortex of glowing algorithmic intelligence.
LAYOUT
The hero uses an asymmetric split composition anchored within a 1280px container. The left 45% accommodates the vertical reading stack: category kicker, 3-line display headline, explanatory paragraph, dual-pill CTA row, and a horizontal metrics cluster at the baseline. The remaining 55% is dedicated entirely to the expansive cosmic portal graphic.
PALETTE (use these exact hex values)
- #060814 — Space Void: Primary dark canvas background behind all interface elements and illustration shadows.
- #FFFFFF — Pure Starlight: Display headlines, top brand emblem, and high-emphasis button text.
- #9DA8B9 — Muted Nebula: Hero paragraph description, navigation links, and metric supporting labels.
- #FF5757 — Coral Ignition: Headline text accent, metric highlight, and gradient start for primary actions.
- #4C1D95 — Cosmic Violet: Gradient stop for the primary CTA button and midground ambient nebula glow.
- #00D2FF — Electric Cyan: Ambient accretion disk illumination and tertiary metric highlight value.
- #FFFFFF — Glass Rim: One-pixel translucent border at 15% opacity on pill buttons and HUD panes.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Montserrat), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 26px heading, 56px display. Tracking -0.03em at display, 0.18em at kicker. The type voice is clean, rational, and modernistic—utilizing a geometric sans-serif to contrast the organic chaos of the swirling cosmos. By stripping away typographic ornamentation, the interface feels like an advanced scientific operating system. Standard open-source alternatives like Plus Jakarta Sans or Inter provide an identical technical cadence.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 999px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created via planar atmospheric layering rather than drop shadows. The deep space canvas (#060814) sits furthest back, overlaid by luminous celestial imagery, while curved 3D glass HUD panes float in mid-depth. The UI typography and pill buttons sit on the uppermost surface layer with crisp 1px rim lighting.
IMAGERY
The visual language combines hyper-detailed speculative sci-fi art with glowing celestial mechanics. It depicts an individual in silhouette exploring swirling planetary rings, particle accretion disks, and transparent holographic UI panels. Flat corporate stock photography or mundane device mockups would completely break the immersive fantasy.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the curved holographic glass HUD ribbon embedded seamlessly into the cosmic vortex artwork. It bridges the gap between functional UI and narrative worldbuilding by curving along the gravitational trajectory of the singularity. Misusing this means applying flat 2D cards over the illustration instead of integrating curved, low-opacity glass into the scene.
MUST
- Keep typography strictly left-aligned on the left half to leave visual breathing room for the vortex illustration.
- Use 999px border-radius consistently on all interactive buttons, pills, and icon enclosures.
- Apply subtle 1px translucent borders (rgba(255,255,255,0.15)) to separate glass components from the cosmic background.
- Limit color gradients to key active triggers and singular emphasized words in headings.
AVOID
- Do not place opaque solid background cards behind text blocks; let the space void remain continuous.
- Avoid square or sharp-cornered buttons anywhere in this UI ecosystem.
- Never tint entire headline paragraphs in saturated colors; reserve gradients strictly for single accent words.
- Do not clutter the right hemisphere of the hero with high-density interface widgets.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 3424:2416. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
