Design a dark-mode abstract background artwork: an incandescent cosmic void framing precision glass interface elements over celestial energy.
LAYOUT
Asymmetric hero arrangement with a sticky or floating top navigation bar spanning edge-to-edge within max-width. The left 40% contains the vertical content stack: announcement badge, 64px display headline, descriptive narrative paragraph, CTA cluster, and a 3-column feature row. The right 60% is given entirely to the celestial spiral visual, extending light diagonally across the page.
PALETTE (use these exact hex values)
- #060814 — Cosmic Void: Deepest canvas background shade beneath typography on the left.
- #ffffff — Starlight White: Primary headline typography, brand logo icon, and high-emphasis labels.
- #9cb3d9 — Nebula Mist: Secondary copy, descriptive body sentences, and inactive navigation links.
- #4285f4 — Celestial Cyan: Starting point of interactive button gradient and core atmospheric glow.
- #ba68c8 — Orchid Violet: Ending stop of the primary CTA gradient and gradient highlight in headline text.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600. Sizes 12px caption, 13px body-sm, 14px body, 16px heading, 18px body-lg, 64px display. Tracking -0.03em on display, 0 on body. Modern, sleek, and technical yet visionary. A pure geometric grotesque sans-serif (Inter match) provides uncompromising clarity against the visual complexity of the cosmic field. For production systems, Google Fonts' Inter or Plus Jakarta Sans serve as ideal freely-available choices with balanced numeric glyphs.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 999px. Spacing on a 4px unit, 24px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is produced through atmospheric lighting and photographic luminosity rather than standard drop shadows. The background vortex recedes into infinite dark space while floating foreground elements catch faint specular edge highlights. Button interactions feel close to the surface via soft internal glows and luminous cyan-magenta fills.
IMAGERY
Photorealistic or high-fidelity cinematic 3D rendering of an interstellar accretion disk, spiral vortex, and particle cloud. Stylized with electric blue, violet, and sparkling stardust point lights. Flat vector illustrations or standard corporate photographic portraiture would entirely break the theme.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric visual collision between a cold, pitch-black typography void on the left and a roaring, ultraviolet celestial whirlpool on the right. Misusing this design means centering the headline over the radiant center where text contrast collapses, or losing the glowing blue-to-violet accent gradient on the primary button.
MUST
- Reserve the richest celestial luminosity for the right two-thirds of the hero backdrop.
- Keep text strictly aligned left to maximize readability over the darker left region.
- Use 999px border-radius consistently on all standalone interactive badge and button components.
- Employ delicate 1px semi-transparent borders (#ffffff26) to define glass containers without heavy fills.
AVOID
- Do not place high-contrast white text directly over the central white vortex glow.
- Do not use sharp rectangular borders or boxy corners for badges and buttons.
- Avoid heavy dark card drop-shadows; let luminous background particles create spatial depth.
- Do not center-align the hero text stack; it collides with the vortex visual energy.
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 中尝试 
