Design a light-mode website section: crystalline enterprise confidence expressed through dual-tone metric callouts, luminous frosted containers, and measured whitespace.
LAYOUT
The section adopts a clean, three-tiered vertical rhythm. At the top sits a centered header block (pill badge, 44px display title, and constrained 2-line subtitle). The center features a five-column uniform metric card row connected by consistent 16px gutters. At the base, a single cohesive tray spans the exact width of the 5 cards, terminating in a right-aligned CTA button.
PALETTE (use these exact hex values)
- #ffffff — Canvas Pure White: Primary background plane for cards and page viewport perimeter
- #f1f3fd — Ambient Lavender Glow: Soft radial illumination behind the left and center card clusters
- #f7f9ff — Integration Tray Fill: Subtle cool-tinted tint for the full-width workflow footer container
- #0e1726 — Midnight Charcoal: Main section title, card subheadings, and lead-in banner text
- #5e697d — Muted Slate: Section intro copy, card descriptions, and operational body text
- #2547eb — Cobalt Blue: Primary metric numerals, active icons, and primary action button background
- #0d8858 — Emerald Growth: Cost-reduction and quality metric figures alongside their dedicated icon glyphs
- #edf1f7 — Hairline Border: Delicate stroke around metric cards, icon housings, and bottom banner
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px subheading, 24px heading, 38px heading-lg, 44px display. Tracking -0.025em for display headers, +0.06em for uppercase badges. Objective, authoritative, and frictionless. The grotesque sans-serif (Inter match) conveys enterprise stability through clean vertical stress and high legibility, avoiding quirky editorial flourishes in favor of institutional credibility.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created via luminous, low-contrast diffuse shadows (0 8px 30px -4px rgba(37, 71, 235, 0.05)) paired with crisp 1px strokes (#edf1f7). The underlying canvas introduces a very subtle ambient blur to gently lift the crisp white card plane without realistic skeuomorphism.
IMAGERY
Iconographic and purely typographic without photographic imagery. Icons are precision monoline vector glyphs (lightning, currency, shield, chart, seal) rendered at 1.75px stroke width inside tinted square badges.
SIGNATURE DETAIL — the thing that makes this design itself
The strict rhythm of five uniform white metric cards capped with dual-tone square icon badges, anchored directly above a full-width integrated workflow-to-action banner. Omitting the bottom banner breaks the visual groundedness of the entire composition.
MUST
- Alternate metric colors systematically between cobalt blue (#2547eb) and emerald green (#0d8858).
- Maintain uniform 16px card border-radius across both the upper metric grid and the lower footer banner.
- Keep icon glyph background tints strictly paired with the respective metric numeral hue.
- Use generous line-height (1.5) on 13px description text to ensure high legibility against white cards.
AVOID
- Do not introduce warm tones (yellow, red, orange) into the data-driven metric palette.
- Never center-align the internal text or icons inside the metric cards.
- Avoid heavy dark borders; stroke opacity must remain under 15% on light backgrounds.
- Do not vary card widths within the horizontal 5-column grid.
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 中尝试 
