Design a light-mode website section: surgical white canvas layered with high-contrast dev schematics and luminous pastel icon badges.
LAYOUT
The section starts with an eyebrow badge centered above a centered display title (max-width 700px) and a muted two-line introductory paragraph. Below lies a uniform 3-column, 2-row grid of equal-height feature cards spaced by 24px gutters. Each card organizes textual explanation alongside a functional UI artifact (SDK terminal, mini checkout modal, node map, analytics graph, checklist, API response). A single-row trust bar of 5 items terminates the section.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Ground: Full-bleed background tone providing faint cool contrast beneath pure white cards
- #FFFFFF — Card Surface: Primary surface for feature cards, nested modals, and analytic pills
- #E2E8F0 — Surface Border: 1px hairline borders delineating cards, chips, inner modals, and divider lines
- #0F172A — Text Primary: Dominant display heading, card titles, and bold data figures
- #64748B — Text Secondary: Explanatory body copy, subheaders, and inactive interface labels
- #0066FF — Cobalt Accent: Focal headline keyword, pill badge text, active indicators, and network nodes
- #111827 — Terminal Slate: High-contrast dark surface for embedded code blocks and primary CTAs
- #10B981 — Success Mint: Checkmark badges, growth deltas (+18.7%), and 200 OK status pills
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 20px heading, 44px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is ultra-precise, modern, and developer-centric. Inter provides clean geometric authority with tight display tracking (-0.03em) that makes the main headline feel brisk and engineered. Monospace code snippets punctuate the layout, validating the product's dev-first promise directly in the typography.
GEOMETRY & SPACING
Corner radii — cards 20px, links 9999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is flattened and structural rather than atmospheric. Cards rely on 1px borders (#E2E8F0) paired with an imperceptible 0 1px 3px rgba(0,0,0,0.04) shadow to detach slightly from the #F8FAFC ground. Dark terminal windows and nested wireframe cards create elevation steps through nested opacity and contrasting surface fills rather than heavy blur.
IMAGERY
No photography is present. Visual language is composed entirely of abstract technical schematics, mini UI components (checkout cards, metrics graphs, API payloads), and line-art devices. Diagrams use dotted connectors, minimal node icons, and flat graphic tokens to depict real-time systems.
SIGNATURE DETAIL — the thing that makes this design itself
The design's unmistakable signature is the pairing of crisp, high-contrast dark code terminals and wireframe checkout widgets nested directly beside pastel-badged technical feature copy within uniform rounded cards.
MUST
- Keep card backgrounds stark white (#FFFFFF) against the subtle slate ground (#F8FAFC) to create natural depth without heavy drop shadows.
- Limit the vibrant cobalt (#0066FF) strictly to the headline accent, category eyebrow, and interactive schematic active points.
- Use pastel tint backgrounds at 10-15% saturation behind category icons to give each feature subtle chromatic differentiation.
- Render code examples strictly inside dark slate blocks (#111827) to maintain developer affordance and strong contrast.
AVOID
- Do not apply heavy blurry black drop shadows; keep elevation borders crisp with 1px #E2E8F0.
- Do not use saturated background fills on feature cards; keep the primary substrate purely neutral.
- Do not write technical code snippets in proportional sans fonts; JetBrains Mono or equivalent is mandatory.
- Do not mix rounded corner radii haphazardly; lock cards to 20px, nested modals to 12px, and badges to 9999px.
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 
