Design a light-mode website section: clinical trust meets mint-tinted clarity with crisp editorial metrics and quiet authoritative layouts.
LAYOUT
The top section adopts an asymmetrical 45/55 split: the left column hosts the headline, descriptive value proposition, primary/secondary CTA pair, and compliance badges. The right column holds the expansive 4-column metric card with an integrated bottom trust disclaimer. Below an edge-to-edge dividing line, the footer shifts to a 6-part balanced grid: a 2-column brand and newsletter block on the far left, followed by 4 distinct navigation columns, terminating in a sub-footer legal bar.
PALETTE (use these exact hex values)
- #093731 — Primary Dark Spruce: Primary interactive buttons, key brand headers, and bold typographic emphasis
- #0d825f — Accent Emerald: Headline highlight words, metric text labels, and active icon glyphs
- #d6f2e8 — Mint Icon Wash: Circular 40px icon containers and badge backdrops for trust indicators
- #ffffff — Clean White: Main canvas surface, stat card background, and email input fills
- #111827 — Charcoal Black: Headings, big metric figures, and primary logo wordmark
- #52616b — Muted Slate Gray: Descriptive copy, column link lists, and metric caption explanations
- #e5e7eb — Subtle Border Gray: Divider lines, input borders, and floating metric card strokes
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter,General Sans,Urbanist), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 18px body-lg, 20px subheading, 28px heading, 48px display. Tracking -0.025em on display, -0.01em on body. The voice is authoritative, modern, and clinical, achieved through tight negative tracking on geometric sans-serif display headings. Large numerical stats (2.3x, 40%+, 98%) bring immediate quantitative legitimacy. Plus Jakarta Sans or Inter serves this well due to their high x-height, round geometric counters, and exceptional legibility across dense navigational hierarchies.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is achieved through minimal elevation rather than dramatic layering. The primary stats card floats via a 1px border (#e5e7eb) bolstered by an ultra-diffuse box shadow (0 12px 32px rgba(0, 0, 0, 0.04)). The primary dark button features an understated directional shadow (0 4px 12px rgba(9, 55, 49, 0.25)) that pulls forward against the flat white canvas.
IMAGERY
No photographic imagery is present in this conversion slice; icons serve as the primary visual anchors. Icons are uniform 18px-20px glyphs with 2px stroke weights encased in soft 40px circular mint pillows (#d6f2e8). Decorative photography or 3D cartoon avatars would directly compromise this design's clinical, SOC-2 compliant credibility.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the four-metric monolithic white card floating over an imperceptible mint gradient haze, partitioned by fine hairline dividers and capped with soft mint icon circles. Replicate this by enclosing 4 quantitative metrics in a rounded 24px bordered card with a bottom-spanning locked security testimonial. It is misused when broken into disjointed individual cards or when bright saturated primary colours override the mint containers.
MUST
- Use deep spruce #093731 for the primary CTA button to maintain severe enterprise authority.
- Accent key emotive words in headlines using botanical emerald #0d825f.
- Enclose all metric hero numbers in a single contiguous 24px rounded white card.
- Separate metric card columns using delicate, partial-height vertical dividers (#edf2f7).
AVOID
- Do not use high-saturation neon greens; keep emeralds muted and forest-derived.
- Do not apply dark backdrops or heavy gradients to the footer section.
- Do not exceed 10px border radius on interactive buttons while cards remain 24px.
- Do not hide compliance badges inside dropdown menus; they must remain visible near CTAs.
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 
