Design a dark-mode website section: deep obsidian developer canvas illuminated by an electric blue plasma glow and frosted terminal telemetry.
LAYOUT
The hero uses a clean two-column grid inside a 1240px container with approximately 52/48 split ratio. The left column stacks category badge, 56px headline, descriptive paragraph, dual CTA cluster, and value proposition markers. The right column dedicates its entire footprint to an oversized interactive code and pipeline console, balanced over an ambient blue plasma sphere.
PALETTE (use these exact hex values)
- #060913 — Canvas Obsidian: Deep midnight background establishing base contrast for the hero viewport.
- #1d64ec — Electric Plasma: Primary interactive fill, glow light source, and terminal selection state accent.
- #38bdf8 — Neon Cyan: Subtle highlight on runtime labels and brand icon details.
- #22c55e — Status Green: HTTP 200 OK status indicator dot and success verification badge.
- #ffffff — Primary Text: Hero headline, active tab labels, and primary button labels.
- #94a3b8 — Muted Slate: Supporting subhead, inactive tabs, syntax values, and microcopy.
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), 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.01em at body. Engineered, authoritative, and frictionless. The combination of a tightly-tracked neo-grotesque sans for marketing copy with crisp monospace technical tags projects mission-critical developer tooling. Inter or Geist are precise replacements for their neutral geometric qualities and open source availability.
GEOMETRY & SPACING
Corner radii — cards 20px, 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 layering and ambient atmospheric glow rather than skeuomorphic drop shadows. The frosted API card floats above an intense 400px radial gradient that spills outward from behind its top-right boundary. Nested cards and pipeline steps achieve interior depth using stepped opacity fills at 4% to 8% white.
IMAGERY
Vector-based interface diagrams, structural code previews, and wireframe flowcharts constitute the primary visual material. Imagery avoids human photography, realistic hardware renders, or playful 3D illustrations. All visual metaphors represent data streams, schema properties, and execution nodes.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the ambient cobalt plasma flare blooming beneath a frosted glass API-to-runtime diagram card. It creates the impression of an active engine humming beneath translucent glass, visually validating the 'AI infrastructure' claim. It is commonly misused by over-saturating the glow until code text loses WCAG AA readability.
MUST
- Anchor the right-hand preview card in a concentrated radial gradient of #1d64ec.
- Use JetBrains Mono or similar coding fonts strictly for labels, snippets, and badges.
- Maintain high contrast white typography on display titles against dark canvas backgrounds.
- Keep card outlines delicate with 1px borders set to rgba(255,255,255,0.1).
AVOID
- Do not blur or feather the transition boundary between dark hero and white lower section.
- Do not use warm color ramps or orange/red tones; preserve the technical cold-blue spectrum.
- Do not drop heavy black drop shadows on frosted glass cards; rely on glow borders.
- Do not set primary display headlines in monospace type.
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 中尝试 
