Design a dark-mode abstract background artwork: deep-space developer canvas anchored by luminous particle vortexes and translucent sapphire glass cards.
LAYOUT
The page follows an asymmetric split-hero composition within a 1360px container. The left 55% hosts the announcement pill, a three-line headline stack, descriptive paragraph, dual CTA buttons, and a 4-column feature row. The right 45% is reserved for the swirling galactic core and a floating, translucent code console anchored in the lower-right quadrant.
PALETTE (use these exact hex values)
- #040615 — Void Black: deep background canvas absorbing light behind cosmic imagery
- #0a0e27 — Sapphire Glass: translucent backdrop for terminal cards and interactive modules
- #5b7bfb — Hyper Blue: primary interactive CTA fill and luminous button background
- #8b5cf6 — Electric Violet: secondary glow accents, badge borders, and particle color gradients
- #38bdf8 — Cyan Nebula: terminal highlights, active tab indicators, and stellar particle lighting
- #22c55e — Active Emerald: live connection dot in terminal telemetry status
- #ffffff — Star White: hero headlines, primary active links, and brand logotype
- #94a3b8 — Stardust Muted: body copy, inactive navigation items, and code comments
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 56px display. Tracking -0.03em at display, 0em at body. The voice is confident, technical, and forward-looking. Inter provides architectural clarity with neutral neo-grotesque proportions, avoiding distracting idiosyncrasies. JetBrains Mono balances the polished marketing tone with tangible developer credibility through clear code styling.
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 through luminescence and optical translucency rather than traditional drop shadows. Glass surfaces use 1px luminous borders with low-opacity indigo tints, hovering over deep starfields. Active elements emit soft colored outer halos (0px 8px 30px rgba(91, 123, 251, 0.35)) to mimic localized light projection.
IMAGERY
The visual hero is dominated by an intricate 3D particle simulation of a spiral galaxy tilted along an oblique 45-degree axis. Points of light range from pinpoint violet dust to brilliant cyan stellar filaments, interspersed with floating atmospheric spheres and moons. Flat vector illustrations, generic corporate photography, or low-density stock graphics would destroy the immersive illusion.
SIGNATURE DETAIL — the thing that makes this design itself
The sweeping diagonal particle vortex that spirals out from deep space and wraps visually behind the frosted glass code terminal. To recreate it, apply a multi-layered point-cloud nebula canvas beneath translucent UI modules; avoid turning it into a simple flat raster backdrop by maintaining intense luminous falloff near the galaxy core.
MUST
- Anchor the right half of the hero with immersive cosmic particle effects moving diagonally.
- Pair dense 13px monospace terminal snippets with airy 56px headline typography.
- Use soft diffuse colored drop shadows behind primary buttons to simulate luminescent backlighting.
- Keep card backgrounds semi-translucent with backdrop-filter blur of at least 16px.
AVOID
- Do not use opaque solid grey or white card surfaces that obscure the galaxy illustration.
- Never use sharp, unrounded rectangle borders on interactive buttons or status chips.
- Avoid warm colors like orange, red, or yellow outside of specific syntax highlighting needs.
- Do not center-align the main hero headline when paired with a right-hand code terminal.
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 中尝试 
