Design a light-mode website section: precise developer-first infrastructure rendered through crystalline dark-terminal schemas against airy porcelain surfaces.
LAYOUT
The hero follows an asymmetrical 50/50 two-column split inside a 1240px container. The left column stacks metadata eyebrow, massive two-line display typography, explanatory paragraph, dual CTA buttons, and inline compliance trust points. The right column houses the interactive system diagram: a wide dark code terminal flanked by dotted distribution lines routing into stacked white outcome cards. Below the fold sits a centralized SDK language bar, followed by the next section's centered eyebrow and headline.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Pure White: Primary background surface across the entire viewport and within white card nodes.
- #0D1522 — Console Deep Navy: Primary surface for the central API code editor and mini-CLI popout terminal.
- #1E293B — Console Border Slate: 1px structural divider lines and borders within dark IDE components.
- #0062FF — Electric Cobalt: Primary CTA buttons, prominent headline highlight words, and active connection indicators.
- #EEF4FF — Soft Indigo Tint: Background fill for eyebrow pills, active SDK highlights, and soft badges.
- #0F172A — Heading Slate: High-contrast headings, main logo title, and structural labels.
- #64748B — Body Muted Slate: Explanatory subtext, trust indicators, inactive SDK tabs, and code comments.
- #10B981 — Success Emerald: HTTP 200 OK badge, system status indicator dot, and terminal completion checks.
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px subheading, 16px body, 28px heading, 52px display. Tracking -0.03em on display, -0.01em on body. The typographical voice is authoritative, disciplined, and engineered, speaking directly to technical leads and backend architects. Inter provides a high-density, neutral vehicle that reads effortlessly at small scales in interface chrome. JetBrains Mono delivers unmistakable developer authenticity inside the console modules, with exaggerated punctuation and clear letterform distinction.
GEOMETRY & SPACING
Corner radii — cards 10px, links 4px, inputs 6px, buttons 6px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is minimal and largely planar, relying on 1px stroke boundaries rather than multi-layered shadows. The dark code terminal sits flush as an anchored monolith, while the event cards and central brand node lift slightly off the surface using a barely perceptible `0 4px 16px -2px rgba(15, 23, 42, 0.05)` elevation. The floating CLI chip at the lower right overlaps the canvas with a modest `0 8px 24px -4px rgba(0, 0, 0, 0.2)` shadow to denote foreground status.
IMAGERY
No photographic imagery is present; the interface relies entirely on structured technical diagrams, syntactical code typography, and crisp SVG technology logos. Graphic interest is generated through the physical simulation of automated event pipelines (dotted wire traces linking payload parameters to operational actions). Illustrations or lifestyle restaurant photography would destroy the hardcore developer-platform aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the multi-layered 'API-to-Reality' architectural diagram, where an authentic dark-mode JSON request visually branches through a floating branded router node via dotted circuit lines directly into real-time operational status cards. To implement it correctly, ensure the code editor feels fully operational with realistic payload data and line numbers, and keep the connection lines strictly dotted with rounded terminal pins.
MUST
- Keep code editor backgrounds deeply dark (#0D1522) to contrast sharply with the clean porcelain page canvas.
- Use electric cobalt (#0062FF) sparingly: only on the final headline phrase, primary button, and key links.
- Connect logical components using dotted 1.5px paths (#94A3B8) anchored by precise 4px circular terminal dots.
- Enclose all auxiliary metadata and statuses in compact rounded-full pills.
AVOID
- Do not apply heavy dark drop shadows; use delicate 1px border lines and faint 4px blur ambient shadows.
- Do not render the main page canvas in dark mode; the punchy contrast requires a pristine white backdrop.
- Do not use non-monospaced fonts inside the API code terminal or CLI popout chip.
- Do not clutter the schema with solid colorful connection arrows; keep paths dotted and neutral gray.
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 中尝试 
