Design a dark-mode website section: cosmic neon developer infrastructure balanced by precision code windows and deep obsidian horizon glow.
LAYOUT
The hero section uses an asymmetric two-column split layout capped by a slim global navbar. The left column contains the text stack: status kicker, two-line bold title, body paragraph, twin CTA buttons, and a bottom row of three inline feature bullet points. The right column showcases a large, balanced dual-pane code and system telemetry card. Below the fold, a centered section anchor begins with an uppercase pill kicker and bold subhead.
PALETTE (use these exact hex values)
- #040711 — Deep Space Void: Primary canvas background behind hero elements and scenery
- #1E293B — Border Subtle: Divider lines, code panel borders, and outline button strokes
- #2563EB — Electric Blue: Primary CTA fill, logo glyph, and primary terminal status
- #38BDF8 — Gradient Cyan: Left anchor of headline emphasis gradient and code variables
- #EC4899 — Gradient Pink: Right anchor of headline emphasis gradient and kicker accent text
- #22C55E — Status Emerald: Connected telemetry indicator dot in console footer
- #FFFFFF — Pure White: Main headline text, active tab states, and primary button labels
- #94A3B8 — Muted Slate: Subtitles, secondary navigation links, and code line numbers
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,Geist,system-ui), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 32px heading, 48px display. Tracking -0.03em at display, -0.01em at body, 0.08em at kicker. The typographic identity is engineered and futuristic yet restrained. Inter delivers clean, neutral precision that prevents the sci-fi styling from sliding into kitsch. Monospaced elements inject an authentic developer-tooling feel that matches the depot telemetry theme.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created strictly through contrast layering rather than heavy drop shadows. The background features a dramatic low-horizon alien mountain landscape under ambient nebula backlighting. Foreground panels use dark frosted glass (rgba(10, 16, 30, 0.8)) framed by crisp 1px borders (#1E293B) that cleanly slice across the luminous mountain backdrop.
IMAGERY
The dominant visual is a panoramic dark sci-fi landscape: craggy lunar or martian terrain silhouetted against a deep violet and neon-pink star-dusted sky. Overlaid UI graphics must remain strictly diagrammatic—crisp blueprint line-art, terminal typography, and node boxes. Photorealistic human hardware or bright photography would destroy the moody, futuristic atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The two-tone headline gradient ('autonomous') transitioning seamlessly from cyan to vivid pink, echoed directly beneath by the glowing alien nebula landscape that illuminates the base of the code window.
MUST
- Ground floating translucent panels with 1px subtle slate borders (#1E293B).
- Keep terminal code strictly in JetBrains Mono or similar geometric monospace.
- Limit vivid cyan-to-pink gradient fills exclusively to high-impact keywords in headlines.
- Use solid electric blue (#2563EB) for primary CTAs to maintain clear visual affordance.
AVOID
- Do not use solid black #000000; stick to deep navy-slate #040711.
- Do not apply multi-color gradients to body paragraphs or minor button text.
- Do not round card corners beyond 12px; avoid overly bubble-like radiuses on panels.
- Do not clutter the code IDE panel with realistic OS chrome or drop shadows.
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 中尝试 
