Design a light-mode website section: warm editorial typography meets precision agentic developer tooling in calming forest green and linen white.
LAYOUT
The section is organized around a strict central vertical axis that flows into a balanced four-column grid. The top third features a centered stack: eyebrow badge, dual-typeface headline, explanatory body paragraph, dual CTA buttons, and guarantee checks. The bottom two-thirds consists of a 4-column row of metric cards, concluded by a full-width horizontally distributed trust banner.
PALETTE (use these exact hex values)
- #FAFAF7 — Canvas Ground: Full-bleed page background providing a warm, non-glare off-white baseline.
- #F3F6F4 — Card Mist: Subtle sage-gray background fill for the four metric stat cards.
- #FFFFFF — Elevated White: Background for secondary buttons, bottom trust bar, pill badges, and floating icon nodes.
- #09382A — Forest Pine: Primary CTA button background, italic headline display accent, and stat metric icon tint.
- #131715 — Obsidian Ink: Primary heading typography, metric values, and high-emphasis labels.
- #5A6560 — Muted Slate: Supporting paragraph body copy, checklist trust markers, and secondary metadata descriptions.
- #E3E8E4 — Border Subtle: Hairline outlines for secondary buttons, trust bar container, and badge perimeters.
- #DC6838 — Status Orange: Live indicator dot within the top eyebrow badge.
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, Helvetica Neue), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 18px subheading, 36px heading, 48px display. Tracking -0.02em at display, 0 at body. The typographic tone is authoritative, intellectual, and craftsman-like. Pairing high-utility Inter with an elegant literary serif (Newsreader) evokes the polish of a high-end publishing tool reimagined for systems programmers. If substitutes are needed, pair Geist with Instrument Serif to preserve the tension between cold engineering and bespoke editorial prestige.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1080px container, comfortable density.
DEPTH
Depth is created minimally via low-contrast white-on-linen layering and very faint ambient diffuse shadows (0 4px 16px rgba(0,0,0,0.03)) on elevated white buttons and floating nodes. Stat cards rely entirely on flat background tint differential (#F3F6F4 over #FAFAF7) with zero drop shadow. The overall surface language feels like crisp, precision-cut stationery on a desk.
IMAGERY
There are no photographic assets or complex 3D renders. Decorative imagery is restricted to minimal floating UI component nodes (small code glyphs and branch icons on rotated white rounded squares) connected by hairline dashed connector lines. Any heavy illustrative graphics or stock photography would immediately rupture the clean, tool-first developer atmosphere.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-line headline split: line one is a blunt, declarative technical statement in bold obsidian sans, followed immediately by an italicized serif payoff in dark forest green. Replicate this by breaking the hero value proposition into two distinct typographic registers, applying the brand tint and serif only to the branded advantage clause.
MUST
- Always pair the bold sans headline with the italic serif brand punchline in deep pine green (#09382A).
- Keep metric card surfaces in tinted sage (#F3F6F4) rather than bright pure white to preserve layout contrast.
- Use mono glyphs (>_, <>) strictly for functional developer-centric affordances and terminal contexts.
- Maintain generous 70px+ whitespace between the central CTA lockup and the metric card grid.
AVOID
- Do not use saturated greens; stick exclusively to deep, dark forest pine (#09382A).
- Do not make the metric cards solid white or give them heavy drop shadows.
- Never set body paragraphs in the serif face; reserve serifs entirely for the secondary headline.
- Avoid sharp 0px corners; all surfaces must have 10px to 16px soft radii.
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 中尝试 
