Design a light-mode website section: cool clinical bento grid balancing high-trust enterprise compliance with pastel-coded operational proof.
LAYOUT
The layout follows a centered top-down funnel. It begins with a compact category pill centered above a two-line 40px display heading and 3-line centered subtitle. Below, a 5-column horizontal grid spans the container, followed by an expansive single-tier proof ribbon containing 4 metric cells and introductory label.
PALETTE (use these exact hex values)
- #f8fafc — Canvas Background: Outer frame and section canvas providing cool, subtle contrast against pure white cards
- #ffffff — Card Surface: Background for feature cards, metrics bar, and badge chip backgrounds
- #0f172a — Heading Primary: Main headlines, card titles, and primary stat values
- #64748b — Body Muted: Explanatory paragraphs, card descriptions, and secondary stat labels
- #2563eb — Brand Blue: Accent text in headline, brand pill label, primary payment/analytics icons and chips
- #eff6ff — Blue Surface Wash: Icon container background and metric pill background for default/AI/analytics items
- #059669 — Emerald Growth: Used for operations co-pilot icon, metric text, and dollar stat icon
- #ecfdf5 — Emerald Surface Wash: Icon well and badge background for food cost efficiency metrics
- #d97706 — Amber Alert: Chargeback protection icon, chargeback reduction metric, and SOC2 lock icon
- #fffbeb — Amber Surface Wash: Background wash for chargeback shield icon and risk reduction metric badge
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 15px body, 16px body-lg, 18px subheading, 22px heading, 40px display. Tracking -0.025em for headings, -0.01em for body. The type communicates authoritative precision, resembling modern tech utility powerhouses like Stripe or Linear. The neutral grotesque font (Inter) stays completely transparent, allowing numbers, percentages, and enterprise terms to project reliability without stylistic distraction. A drop-in replacement must feature high x-height and tight tabular figures.
GEOMETRY & SPACING
Corner radii — cards 18px, links 4px, inputs 8px, buttons 999px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is flattened in favor of clean Swiss-style demarcation. Cards live on level 1, using a faint 1px border (#eaecf0) alongside an imperceptible shadow (0 1px 3px rgba(16, 24, 40, 0.04)). Surfaces rely on tonal shifts rather than cast shadows to establish layer hierarchy.
IMAGERY
No photographic imagery is present; the section communicates purely through crisp typographic scale, subtle color-coded geometry, and minimal line iconography. Any imagery introduced must strictly consist of clean vector line-work with dual-tone fills, avoiding photorealism or 3D skeuomorphism.
SIGNATURE DETAIL — the thing that makes this design itself
The semantic metric badge footer: anchoring each vertical card with an ultra-light pastel status pill that pairs a micro trend icon with specific quantitative ROI data, matching the icon well directly above it.
MUST
- Reserve the saturated royal blue (#2563eb) strictly for AI/tech focal words and primary category tokens.
- Maintain exactly 1px subtle borders (#eaecf0) on all white cards to define edges against the light canvas.
- Pair each card's icon well color exactly with its bottom metric pill color.
- Pin metric chips to the base of feature cards so all 5 columns visually align at the bottom edge.
AVOID
- Do not introduce heavy drop shadows; cards should rely on border hairines and subtle 2-4px blur offsets.
- Never fill the entire card with color; tint only the 44px icon well and metric badges.
- Do not use saturated icons on stark white backgrounds without their matching tinted squircle container.
- Avoid mixed icon styles; maintain 1.5px to 2px stroke line art consistently across all badges.
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 中尝试 
