Design a light-mode website section: structured public-sector impact metrics balanced by soft luminous pastels and disciplined typography.
LAYOUT
The layout follows a centered vertical hierarchy: centered eyebrow and two-line display header with descriptive subtext at the top; a balanced horizontal row of 5 equal-width metric cards in the center; and a full-width dark contrasting horizontal strip at the base with 5 inline metric segments.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas Base: Pure white background canvas hosting the header and cards
- #0F172A — Anchor Surface: Deep slate background for the bottom proof/metrics banner
- #FFFFFF — Card Surface: Background for floating metric cards with subtle border or shadow
- #111827 — Primary Text: Primary headings, major numeric values, and dark banner subtitles
- #64748B — Secondary Text: Body copy inside cards, section descriptions, and dark banner captions
- #2563EB — Civic Blue: Gradient start for title highlight, primary icons, and first card pill
- #9333EA — Impact Purple: Gradient end for title highlight and bottom banner 'Proven outcomes' text
- #F43F5E — Rose Tint: Icon and pill tint for risk reduction and FedRAMP security indicators
- #059669 — Emerald Tint: Accuracy metrics icon stroke and pill background
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Roboto), weights 400/500/600/700/800. Sizes 11px caption, 12px body-sm, 13px body, 15px subheading, 22px heading, 26px heading-lg, 42px display. Tracking -0.02em on headings, 0.08em on eybrow caps. The typography is clean, modern, and authoritative via a dense neo-grotesque sans-serif like Inter. High-weight headline numerals paired with compact, readable 12px explanatory copy communicate enterprise-grade governance without visual clutter.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 16px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created via soft ambient shadows on white cards (e.g., 0 4px 20px rgba(0,0,0,0.04)) over a pure white canvas, complemented by subtle atmospheric radial blurs behind the layout edges. No heavy drop shadows or hard borders are used on the light surfaces.
IMAGERY
No photographic imagery is present. Visual rhythm relies solely on clean, geometric vector line icons enclosed in pastel-tinted squares and rounded badges, alongside glowing gradient backdrops.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone display title paired with the high-contrast dark foundation bar anchoring an otherwise pastel, airy five-column metric deck. Misuse often occurs when replacing the dark bottom anchor with another light container, which eliminates the grounding contrast.
MUST
- Keep card proportions identical across all five vertical metric columns.
- Use distinct pastel color coding for each of the 5 cards consistently between icon and pill.
- Maintain the two-tone gradient on the second line of the main display title.
- Ground the bottom of the section with the dark slate institutional proof bar.
AVOID
- Do not use dark card backgrounds within the five primary metric cards.
- Avoid sharp 0px corners; maintain 16px radius on cards and 20px on the banner.
- Do not crowd the headline; leave at least 36px between subtitle and cards.
- Never use solid primary blue for all cards; vary across blue, rose, teal, and magenta.
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 中尝试 
