Design a light-mode website section: crisp role-tinted card modularity powering b2b enterprise feature storytelling.
LAYOUT
The section starts with a centered eyebrow tag, a display title, and an intro blurb restricted to ~640px max-width. Below, a 4-column CSS grid organizes role-specific capabilities with uniform cards. The bottom section resolves into a 2-column bento layout split roughly 60/40 between aggregated quantitative metrics and a qualitative customer testimonial.
PALETTE (use these exact hex values)
- #f8fafc — Canvas Background: Outer page background providing soft contrast against pure white cards
- #ffffff — Card Surface: Background for role cards, impact stats container, and quote testimonial
- #e2e8f0 — Border Subtle: 1px structural outline for all cards and divider lines
- #0f172a — Text Primary: Headings, persona titles, big statistics, and primary quote copy
- #64748b — Text Secondary: Body descriptions, metric subtitles, checklist items, and author metadata
- #2563eb — Blue Role: Sourcers category eyebrow, icon pill, checkmark ticks, and arrow button
- #d92672 — Magenta Role: Recruiters category eyebrow, icon pill, checkmark ticks, and arrow button
- #06b6d4 — Cyan Role: Account Managers eyebrow, icon pill, checkmark ticks, and arrow button
- #8b5cf6 — Violet Role: Operations eyebrow, icon pill, checkmark ticks, and arrow button
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 20px heading, 36px heading-lg, 44px display. Tracking -0.02em at display, 0.05em at uppercase tags. The typographic tone is authoritative, corporate, and modern-technical. Using Plus Jakarta Sans or Inter yields wide-aperture numbers that shine in the 65% and 2.3x metrics, while clean geometry keeps 13px checklist items legible at small scales.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered purely through 1px border delineation (#e2e8f0) and contrast between the #ffffff card faces and the muted #f8fafc canvas. No drop shadows or blur filters are applied, yielding an architectural, razor-sharp editorial feel.
IMAGERY
The only photography present is a small 36px circular headshot in the testimonial card, rendered naturally without gradient rings. Other graphic elements are simplified mono-line or flat dual-tone vector glyphs enclosed in solid color circles.
SIGNATURE DETAIL — the thing that makes this design itself
The strict chromatic compartmentalization: each of the four role columns owns an uncompromised monochromatic accent pipeline (icon badge -> eyebrow text -> check indicators -> corner launch button) anchored beneath an ultra-clean, hairline-divided card structure.
MUST
- Match the eyebrow text, top icon background, checklist marks, and action button to the same exact role accent color.
- Use a subtle 1px border (#e2e8f0) without heavy drop shadows to preserve flat modern clarity.
- Maintain uniform height across all four persona cards regardless of description length.
- Place the forward-arrow action button strictly in the bottom-right corner of each role card.
AVOID
- Never mix accent colors within a single persona card (e.g., green icon with magenta eyebrow).
- Avoid thick shadows, multi-layered glow effects, or dark card surfaces in this theme.
- Do not omit the hairline divider separating card descriptions from the checklist tier.
- Never expand the role cards beyond four columns on desktop viewports.
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 
