Design a light-mode website section: crisp technical bento architecture balancing dense operational telemetry with deliberate royal-cobalt precision.
LAYOUT
The section opens with an asymmetric header lockup: left-aligned category eyebrow, display headline, and brief introductory paragraph. Below sits a 2-column bento grid where the left card spans approximately 60% width showcasing the core architectural visual, while the right 40% contains three vertically stacked secondary capability cards. The section concludes with a full-width horizontally distributed metrics validation banner.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Base: Primary screen background and top-level card surface fill.
- #FCF9F4 — Surface Warm Tint: Background fill for bottom performance metrics strip establishing visual foundation.
- #0D1527 — Terminal Canvas: High-contrast dark container for embedded cURL syntax and code snippets.
- #2563EB — Cobalt Primary: Hero badge, active node containers, process dots, and focal icons.
- #EFF6FF — Cobalt Soft Tint: Subtle background fill for secondary icon containers and interactive states.
- #0F172A — Slate Text Primary: Primary headlines, high-value metrics, and key feature titles.
- #64748B — Slate Text Muted: Supporting paragraph body copy, micro labels, and unselected status labels.
- #E2E8F0 — Border Neutral: 1px container outlines, inner dividers, and node connecting lines.
- #F1ECE4 — Border Warm: Subtle perimeter stroke for the warm-tinted bottom metric banner.
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 32px heading-lg, 38px display. Tracking -0.025em for titles, 0.05em for uppercase micro-caps. The typographic tone is authoritative, technical, and frictionless. The neutral neo-grotesque sans (Inter match) provides clean Scandinavian legibility across tight dashboards, balanced by monospace parameters that signal real-time developer precision. When substituting, prioritize high-x-height fonts with robust tabular figure support.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is strictly tactile and structural, avoiding heavy blurred shadows. Elevation is conveyed through 1px border lines (#E2E8F0), nested light grey background surfaces (#F8FAFC), and a whisper drop shadow (0 1px 2px rgba(15, 23, 42, 0.04)) on top-level cards.
IMAGERY
No photographic imagery is used; visual interest is created purely through clean UI diagrams, wire-flow model architectures, vector glyphs, and embedded code blocks. Any photographic imagery would conflict with the engineering-first developer infrastructure aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the structural sub-tray embedded in every card: each container isolates its headline from its interactive proof-of-work (metrics, workflow tracks, compliance tags, or terminal diagrams) via 1px internal dividers and subtle background shifts.
MUST
- Maintain high contrast between slate headings (#0F172A) and muted descriptive copy (#64748B).
- Use 18px border radius consistently across all outer bento card perimeters.
- Reserve vibrant cobalt blue (#2563EB) strictly for active states, key nodes, and primary badges.
- Enclose all nested telemetry in distinct sub-surfaces with subtle 1px strokes (#E2E8F0).
AVOID
- Never apply colored or heavy drop shadows; cards rely on crisp 1px borders and soft 0 1px 3px rgba(0,0,0,0.04).
- Do not mix multiple bright accent colors; keep secondary accents restricted to subtle micro-indicators.
- Avoid full black (#000000) for body text; always use deep ink slate (#0F172A).
- Do not break the unified vertical grid alignment between left showcase card and right stacked cards.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
