Design a dark-mode website section: deep midnight canvas electrified by cerulean luminescence, contrasting legacy friction against streamlined api elegance.
LAYOUT
The page follows a strict symmetrical top-down funnel hierarchy. It starts with a persistent header, drops into a centered high-impact typography block, resolves into dual pill CTAs, and finishes with a horizontal before-and-after transformation engine spanning three focal columns (Legacy, Node, API).
PALETTE (use these exact hex values)
- #060B16 — Midnight Base: deep background canvas foundation across the entire hero viewport
- #007BFF — Electric Blue Glow: diffused atmospheric radial background gradient illuminating the right viewport
- #2563EB — Primary Action Blue: high-priority cta buttons, node focus highlights, and gradient stops
- #38BDF8 — Cyan Accent: text gradient terminator and secondary lighting accents
- #22C55E — Success Emerald: status indicators, validation badges, and uptime trust metrics
- #0F172A — Frosted Card Dark: base tint for glassmorphic cards and code terminal surfaces
- #FFFFFF — Text Primary: hero headline, active tabs, primary cta text, and code keys
- #94A3B8 — Text Slate: subheadings, inactive navigation links, and descriptive body copy
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 18px body-lg, 20px subheading, 56px display. Tracking -0.03em at display, -0.01em at body. Clean, technical, and frictionless. The neo-grotesque letterforms project enterprise-grade stability, while tight tracking (-0.03em) on display sizes injects modern developer-tool authority. Substitution with Inter or Plus Jakarta Sans preserves the engineered, high-velocity aesthetic.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 999px, buttons 999px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is achieved through atmospheric luminescence rather than heavy drop shadows. High-radius radial blurs behind elements create backlighting, while translucent surfaces (rgba(15,23,42,0.7)) paired with 1px semi-opaque light borders simulate layered glass sitting above an electrified space.
IMAGERY
No photographic imagery is used. Visual narrative is strictly communicated via abstract schematic diagrams, precision SVG iconography (wrenches, consoles, locks), syntax-highlighted code blocks, and glowing directional conduit vectors.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal schematic transformation beam: tangled dashed gray wire lines entering from a legacy friction card into a glowing central blue squircle node, emerging as clean, parallel white vectors into an illuminated code terminal.
MUST
- Maintain high contrast between the desaturated left card and the luminous right terminal.
- Use 999px fully rounded pills exclusively for interactive buttons and category tags.
- Keep the central vertical white beam perfectly aligned with the transition node icon.
- Apply gradient text specifically to the punchline clause of display headers.
AVOID
- Never use sharp 0px or small 4px border radii on buttons or category badges.
- Do not place warm colors (yellow, orange, red) in the primary background glow.
- Avoid solid, fully opaque card backgrounds that obscure the underlying glow mesh.
- Never make the legacy side visually louder or more saturated than the modern terminal side.
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 中尝试 
