Design a dark-mode website section: deep obsidian infrastructure illuminated by electric blue volumetric glows and razor-fine circuit lines.
LAYOUT
Asymmetric two-column split in the main viewport: left column holds headline copy, primary CTAs, and a live API snippet below; right column houses the focal 3D isometric infrastructure diagram branching outward to hardware components. A horizontal KPI bar spans the base before an upward-bowing convex divider transitions the page to white.
PALETTE (use these exact hex values)
- #05070D — Obsidian Base: Deepest background canvas for the entire dark hero zone.
- #0B0F19 — Card Surface: Background for code snippets, metric blocks, and hardware nodes.
- #2563EB — Electric Cobalt: Primary button fill, glowing line conduits, and 3D cube radiance.
- #38BDF8 — Cyan Flare: Specular node highlights, active connection points, and status pings.
- #1E293B — Border Tint: Delicate 1px strokes defining code blocks, pills, and node cards.
- #FFFFFF — Text Primary: Headlines, high-emphasis titles, and primary button labels.
- #94A3B8 — Text Secondary: Body copy, inactive tab items, and navigation links.
- #FFFFFF — Canvas Light: Contrasting bottom section surface after the convex divider.
TYPOGRAPHY
Typeface Inter Display (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 36px heading, 56px display. Tracking -0.03em at display, 0 at body. Engineered, authoritative, and developer-first. The combination of clean neo-grotesque display headers with sharp monospace code creates a high-fidelity cloud-native identity. Substitute with Geist or Inter for an identical austere technical tone.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely through luminous backlighting and atmospheric fog rather than drop shadows. Translucent dark planes float above a cyan-blue volumetric glow, while hardware elements receive simulated specular top-edge highlights (1px white at 15% opacity).
IMAGERY
Features precise, hyper-clean 3D renders of abstract compute hardware (glowing glass cubes, server pedestals) tied to vector schematic connection lines. Photography is completely absent; any realistic photo of human faces or offices would break the high-tech infrastructure aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The volumetric glowing blue isometric cube with branching circuit lines connecting directly to frosted node badges. To implement properly, place a soft radial gradient (#2563EB at 40% opacity, 300px blur) centered beneath the hardware illustration and align 1.5px glowing bezier curves to floating UI chips.
MUST
- Use deep electric blues (#2563EB, #38BDF8) strictly as luminous elements emerging from absolute darkness.
- Render technical hardware connectors with thin, anti-aliased glow strokes and bright node points.
- Keep typography tightly tracked (-0.03em) on main display headlines.
- Enclose terminal and data metrics in dark glass cards with 1px border (#1E293B).
AVOID
- Do not use flat drop shadows; use radial blur glows centered behind key focal points.
- Avoid bright solid borders; borders must remain semi-transparent or hairline (#1E293B).
- Do not mix serif or expressive display typefaces; keep solely to clean engineering grotesques.
- Avoid multi-colored glow ramps—stick strictly to monochromatic blue-to-cyan radiation.
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 中尝试 
