Design a light-mode website section: command-line dark terminal meets clinical telemetry cards in a high-contrast modular developer bento grid.
LAYOUT
Structured as a 2-column asymmetric bento grid capped with a full-width bottom telemetry bar. The left column spans the full height of the top section with a massive dark hero card. The right column stacks three equally sized horizontal feature cards showing live UI inspect panels. The bottom row integrates a horizontal stats band anchoring the social proof.
PALETTE (use these exact hex values)
- #f4f4f2 — Canvas Ground: Outer background frame setting a soft, warm neutral baseline for elevated cards
- #111317 — Hero Terminal Dark: High-contrast dark surface for the primary showcase card and node architecture container
- #ffffff — Card Elevated Light: Clean white background for all modular feature and metric cards
- #eaeaea — Subtle Card Border: Hairline perimeter stroke separating light cards from the canvas ground
- #ff4d4a — Vermilion Accent: Hero headline highlight, active gateway node glowing border, and key metric highlights
- #22c55e — Status Green: Live indicator pill, success checkmarks, and positive reliability metrics
- #3b82f6 — Telemetry Blue: Secondary icon background tint and latency telemetry metric value
- #111827 — Text Primary Dark: Primary headings and labels across all light cards
- #6b7280 — Text Muted Light: Body copy, descriptions, and data table keys on light surfaces
- #9ca3af — Text Muted Dark: Descriptive copy and architecture node labels inside the dark hero card
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text, System Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 40px display. Tracking -0.025em at display, -0.01em at body. The typography speaks with authoritative, technical clarity. Inter provides a clean, neutral, and highly legible product foundation with tight letter-spacing on display scales. JetBrains Mono introduces developer authenticity into code blocks, table keys, and the terminal logo badge.
GEOMETRY & SPACING
Corner radii — cards 20px, links 6px, inputs 10px, buttons 999px. Spacing on a 4px unit, 16px gaps, 32px between sections, 1200px container, comfortable density.
DEPTH
Depth is handled subtly with flat layering rather than dramatic elevation. Light cards use a crisp 1px perimeter border (#eaeaea) backed by a faint ambient shadow (0 1px 3px rgba(0,0,0,0.03)). The central architecture node inside the hero card uses an ambient red glow filter (0 0 16px rgba(255,77,74,0.3)) to establish active system status.
IMAGERY
Completely free of photographic or generic 3D abstract imagery. The visual vernacular is purely functional UI artifacts: raw JSON code blocks, checkmark verification lists, system telemetry metrics, and terminal iconography. Any decorative element must directly represent programmatic runtime states.
MUST
- Anchor the grid using a single dominant dark card while keeping ancillary cards crisp white.
- Use pastel tinted backgrounds (#fee2e2, #dbeafe, #dcfce7) inside 44px icon containers.
- Highlight exactly one key phrase in the display title using the vivid vermilion accent (#ff4d4a).
- Pair monospace code and telemetry snippets directly alongside conversational feature explanations.
AVOID
- Do not invert the entire interface into dark mode; the contrast relies on white cards against light grey.
- Do not use heavy, saturated drop shadows; rely on 1px borders (#eaeaea) and ultra-soft 4px blur shadows.
- Never color entire background surfaces in vermilion; reserve it strictly for glows, text accents, and key numbers.
- Do not use sharp 0px or 4px radii on cards, which breaks the modern friendly developer aesthetic.
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. Try in DraPub 
