Design a light-mode website section: developer ergonomics rendered in clinical mint and obsidian glass, balancing code density with executive clarity.
LAYOUT
The section adopts a structured Bento grid arranged in three tiers: top header, main 2-column feature block, and bottom full-width metrics ribbon. In the main block, the left side houses the double-width dark flagship card, while the right stacks three equal-height light cards vertically. The bottom ribbon spans the entire container width, split between a headline block and 4 equidistant numeric metric columns.
PALETTE (use these exact hex values)
- #F8FAF9 — Canvas Background: Global page background providing subtle warmth compared to pure white.
- #FFFFFF — Card Surface Light: Background for secondary feature cards and the bottom impact statistics bar.
- #F3F7F5 — Card Surface Muted: Nested panels and micro-diagram surfaces inside the secondary feature cards.
- #0D1516 — Card Surface Dark: Background for the hero flagship use case card creating primary focal weight.
- #141E20 — Code Editor Surface: Interior panel background for syntax view and terminal execution windows.
- #1D9A6C — Brand Emerald: Primary indicator for verified states, icon badges, accents, and progress metrics.
- #EAF4EE — Mint Accent Wash: Fills for pill tags, category badges, and active state pill containers.
- #0E1719 — Text Primary Dark: Primary headings and stat numbers on light surface canvases.
- #5D6D67 — Text Muted Light: Secondary copy, labels, and descriptions on light cards.
- #FFFFFF — Text On Dark: Headings, titles, and high-priority labels inside dark cards.
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Text), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 22px heading, 28px heading-lg, 38px display. Tracking -0.02em at display, 0.01em at body. The typography is disciplined, authoritative, and developer-centric. Inter provides neutral, highly legible sans-serif clarity across product marketing copy, while JetBrains Mono injects authentic code-terminal texture into the widgets. If substituting, use Geist or SF Pro to preserve the exact geometric precision and tight negative tracking on display headings.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 999px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is communicated purely through planar value contrast and crisp 1px borders (#E1EBE5 on light, #1D2A2C on dark) rather than diffuse box shadows. Internal elements like code blocks and CLI widgets sit one step deeper or higher via subtle background shade variations (#141E20 inside #0D1516). The overall surface feel is flat, clinical, and architectural.
IMAGERY
Visual assets are strictly schematic and interactive in nature: syntax-highlighted code editors, terminal output logs, integration flow diagrams, and tech stack logo networks. Photography and illustrative 3D artwork are completely absent and would violate the engineering-first aesthetic. Every graphic directly represents code or automated runtime telemetry.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric flagship inversion: a single, massive, dark obsidian card set alongside stacked pale-mint light cards within a light-mode page. This deliberate contrast concentrates visual attention immediately on the primary code execution demonstration before guiding the eye through the secondary light features.
MUST
- Anchor the layout with a high-contrast dark card against the predominantly light canvas.
- Use emerald (#1D9A6C) solely for active indicators, verified checks, and critical accents.
- Maintain a uniform 20px outer corner radius on all main grid cards.
- Pair monospace typefaces strictly with code snippets, terminal commands, and system filenames.
AVOID
- Do not invert all cards to dark mode; the contrast relies on the asymmetrical single dark card.
- Do not use saturated rainbow colors for syntax highlighting; keep code tokens muted.
- Do not apply heavy drop shadows; cards rely on fine 1px borders and surface contrast for separation.
- Do not make pill badges rectangular or sharp; always use 999px full pills.
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 中尝试 
