Design a dark-mode website section: deep obsidian space ignited by luminous electric-cyan energy waves and high-voltage mint-green developer automation telemetry.
LAYOUT
The page flows vertically down a single centralized axis framed within a 1200px container. The top navigation is fixed or pinned with balanced three-column distribution (logo left, links center, action right). Below, the hero sequence stacks seamlessly: announcement badge, two-line display headline, two-line descriptive body text, dual CTAs, dual inline metrics, and finally an architectural schematic card anchored at the bottom fold.
PALETTE (use these exact hex values)
- #02050e — Deep Space Obsidian: Primary full-viewport background canvas behind glowing energy fields
- #070b16 — Code Inset Surface: Contained editor surface framing syntax and data payloads
- #52ee88 — Neon Mint: Hero headline accent, primary button fill, node connector glow, and verified badges
- #06b6d4 — Electric Cyan: Ambient glow waves, wireframe mesh highlights, and telemetry illumination
- #ffffff — Text Primary: Main headline, active navigation items, and code property strings
- #94a3b8 — Text Secondary: Supporting lead copy, inactive navigation, line numbers, and metric captions
TYPOGRAPHY
Typeface Geist Sans (or Inter, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 20px subheading, 60px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is ultra-modern, technical, and authoritative. A high-clarity neo-grotesque sans (Geist Sans or Inter) set in heavy display weights with compact negative tracking delivers developer-grade precision, while JetBrains Mono reinforces infrastructure authenticity in the code panel. Licensing can be substituted seamlessly with Inter and Geist Mono without altering system fidelity.
GEOMETRY & SPACING
Corner radii — cards 20px, links 9999px, inputs 10px, buttons 10px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is rendered entirely through glowing atmospheric back-lighting and frosted semi-transparency rather than drop shadows. Translucent glass containers (rgba(10, 16, 30, 0.72)) float directly above an organic radiant light wave, delineated by crisp 1px borders (#ffffff14). Inner elements like code blocks are inset using darker opaque tones (#070b16), creating negative visual depth within the floating plane.
IMAGERY
The imagery consists of an ethereal, undulating 3D luminous wave field combining organic volumetric cyan smoke with delicate digital wireframe mesh ridges. It evokes neural flows, fiber optics, or data streams through deep cosmos. Photographic imagery or cartoon illustrations are strictly prohibited; only abstract generative telemetry and crystalline vectors belong.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive architectural pipeline diagram resting atop luminous cyan-emerald wave topography. It anchors the hero with an inset dark code snippet communicating through glowing bezier lines to a central node that activates verified green status chips on the right. Misusing this means omitting the code context or turning the ambient wave into an overpowering solid graphic.
MUST
- Use solid mint green (#52ee88) sparingly on the single primary CTA and terminal status indicators.
- Maintain strict center alignment for all central hero typography, badge chips, and button pairs.
- Enclose complex code previews inside dark inset cards with 12px radii to ground them visually.
- Pair electric cyan and emerald ambient glows softly behind high-contrast dark UI surfaces.
AVOID
- Do not use sharp 0px corners; all surfaces must feature smooth 10px, 20px, or 9999px curvatures.
- Never use pure white backgrounds or light mode cards; the entire identity depends on deep obsidian.
- Do not saturate entire cards in bright green or cyan; color must only emit as glows and highlights.
- Avoid standard high-opacity solid borders; strokes must remain delicate at 1px rgba(255,255,255,0.08).
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
