Design a dark-mode abstract background artwork: a celestial bioluminescent vortex illuminating technical software typography on an abyss of deep teal.
LAYOUT
The hero follows a split-composition layout: an airy content column left-aligned at 50% max width, set against an expansive visual focal point dominating the right half. The top contains a distributed horizontal navbar spanning the full width with centered text links. Below the CTA cluster, a three-metric inline strip is anchored along the lower third with vertical hairline delimiters.
PALETTE (use these exact hex values)
- #020b08 — Abyssal Space: Deepest background tone behind hero text and bottom void areas
- #9ff2a9 — Nebula Core Mint: Primary CTA fill, glowing accents, and core bioluminescent highlights
- #42d9ad — Cyan Glow: Secondary gradient terminal for buttons and headline color bleed
- #ffffff — Starlight White: Primary heading typography, metrics digits, and prominent links
- #8ebfb0 — Phosphor Teal: Subtitles, navigation links, and category kickers
- #1a3b30 — Deep Faint Border: Hairline borders on secondary buttons and stat separator dividers
- linear-gradient(135deg, #a4f49b 0%, #64e3c1 100%) — Button Gradient: Surface gradient for high-contrast primary call-to-action pills
TYPOGRAPHY
Typeface Inter Display (or Geist,SF Pro Display,Plus Jakarta Sans), weights 300/400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 22px subheading, 32px heading, 68px display. Tracking -0.03em for display headings, 0.08em for uppercase badges. The typography is whisper-light, modern, and clinical, serving as an anchor against the emotional expanse of the cosmic backdrop. Using an ultra-light geometric or neo-grotesque sans-serif (such as Inter Display or Geist Thin) imparts high-tech precision without cluttering the celestial panorama.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 9999px, buttons 9999px. Spacing on a 8px unit, 20px gaps, 120px between sections, 1320px container, airy density.
DEPTH
Depth is created entirely through photographic perspective and atmospheric luminosity rather than UI drop shadows. The backdrop creates deep space, mid-ground foliage, and an illuminated cosmic dust stream, over which clean flat vector typography and translucent pill buttons hover seamlessly.
IMAGERY
A vast, painterly composite of a swirling bioluminescent cosmic spiral pouring stardust into a midnight emerald sky. A solitary traveler stands silhouetted among jungle foliage on a cliff, facing the vortex. Photographic assets must evoke cosmic awe, bioluminescence, and organic scale, avoiding sterile corporate 3D shapes or stock photography.
SIGNATURE DETAIL — the thing that makes this design itself
The sweeping, diagonal bioluminescent stardust vortex acting as both a visual spectacle and natural negative-space boundary for the typography. It draws the eye downward toward the silhouette and up toward the navigation, unifying UI and background into one cohesive atmospheric scene.
MUST
- Keep typography featherweight (300-400) to balance the dense, intricate celestial illustration.
- Reserve the saturated luminous mint-to-cyan gradient strictly for primary interaction pills.
- Maintain high negative space on the left column to let the swirling light vortex breathe on the right.
- Use hairline 1px borders (#1a3b30) for dividers and secondary pill strokes.
AVOID
- Do not use heavy, bold display font weights that fight the delicate stardust illustration.
- Never introduce standard corporate blue, purple, or warm orange tones into the emerald palette.
- Do not enclose metric units inside opaque boxed cards or heavy container tiles.
- Avoid square or sharp button corners; buttons must be strictly pill-shaped (9999px).
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 中尝试 
