Design a dark-mode website section: luminous deep-slate developer telemetry floating on electric wave fields of cyan and violet light.
LAYOUT
A horizontal split hero anchored in a fixed 1360px container. The left side stacks value proposition typography, double CTAs, social proof, and metric badges in a rigorous vertical column. The right side is occupied by an angled, perspective-transformed interactive artifact stack flanked by satellite telemetry chips.
PALETTE (use these exact hex values)
- #030712 — Void Black: Deep foundational canvas color providing total contrast for neon highlights and glass surfaces.
- #0f172a — Translucent Navy Glass: Background fill for floating code windows, metrics cards, and header pill at 60-80% opacity.
- #4361ee — Electric Indigo: Solid primary action button fill and active pipeline node highlights.
- #38bdf8 — Cyan Flare: Accent text on headline keyword, syntax highlighting keywords, and metric sparklines.
- #22c55e — Telemetry Emerald: Pulsing system operational dot and terminal execution indicator.
- linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #38bdf8 100%) — Spectral Aurora: Wave mesh illumination beneath the floating 3D terminal stack.
- #ffffff — Pure White: High-contrast headings, main metric values, and primary button text.
- #94a3b8 — Slate Muted: Body copy, supporting captions, inactive navigation links, and parameter names.
- #334155 — Hairline Glass Border: Crisp 1px borders on cards, buttons, badges, and code editor panes.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 58px display. Tracking -0.03em for display, -0.01em for body. Technical, precise, and authoritative. Inter delivers neutral engineering efficiency at text sizes while transforming into an assertive high-tech statement at 58px display scale. JetBrains Mono grounds the aesthetic in genuine developer utility.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created through 3D isometric rotation and spatial layering over luminous background fields rather than heavy box shadows. Floating cards hover on distinct Z-planes above the primary code window, separated by 1px translucent glass borders and subtle ambient backlights.
IMAGERY
Imagery strictly consists of synthetic digital representations: a parametric 3D particle landscape mesh and simulated IDE interfaces. Photorealistic people, device mockups, or flat corporate illustrations are strictly absent and incompatible with this developer aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the isometric floating IDE stack hovering over luminous neon wave ribbons. It creates instant developer credibility by showing realistic code while conveying high-performance machine learning through glowing topographical mesh graphics.
MUST
- Use a solid dark void base (#030712) to make cyan and magenta neon light waves glow effectively.
- Keep card borders razor-sharp with 1px thickness and low-opacity white (rgba(255, 255, 255, 0.12)).
- Color only one pivotal concept word in the main headline with the electric accent color.
- Pair monospace snippets with strict syntax highlighting (magenta strings, cyan keys, slate comments).
AVOID
- Do not use opaque light or neutral gray cards; surfaces must remain deep translucent slate.
- Do not drop drop-shadows with heavy black spreads; use soft colored radial glow underlays instead.
- Do not color the entire headline; only highlight the operative keyword to preserve visual hierarchy.
- Do not use generic raster stock photos; keep visuals strictly code, wireframes, and luminous wave geometry.
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 中尝试 
