Loved by the people who ship — quote-grid-emerald testimonial section

Summary

A clean, trust-forward testimonial section in a fresh emerald-on-white palette for a prompt-to-UI design product. Above a subtly dotted, emerald-washed backdrop sits a centered heading block: a rounded emerald eyebrow pill ('Words from the makers'), an extrabold Inter headline 'It's not just us saying it.' with the last two words in an emerald gradient, a muted-slate subhead, and a five-star + '4.9 average across 2,300+ reviews' rating strip. Below is a responsive 1/2/3-column grid of six testimonial cards (figure/blockquote/figcaption), each opening with an oversized serif quotation mark, a builder quote, and a footer with an avatar (emerald ring), name, role, and a brand lockup (Iconify simple-icons logo + company name). The third card is a featured variant flipped to a solid emerald-700 ground with white text and a soft blurred glow. The section closes with a 'Trusted by teams shipping at' caption above a six-logo emerald brand strip. A sticky blurred white nav sits on top. Inter throughout, Georgia for the quote marks, Phosphor + simple-icons via Iconify.

Style

A fresh, confident SaaS testimonial style built on a single emerald accent over crisp white. The section ground is white with a faint emerald dotted field (radial-dot pattern, masked to fade out) and a soft emerald-50 wash at the top. Type is all Inter with tight tracking: extrabold (800) headline, bold (700) names, medium/semibold (500/600) supporting copy, with a slate ink scale for hierarchy (near-black #0b1220 headings, slate-700 #334155 quote body, muted slate-500 #64748b captions). The accent is a single emerald scale (#10b981 / #059669 / #047857 with soft #ecfdf5 / #d1fae5 tints), used for the eyebrow pill, the gradient headline tail, the stars, the avatar rings, the quote marks and the brand-logo strip. Cards are crisp white rounded-2xl panels with hairline slate-200 borders and a barely-there shadow that, on hover, lifts (-4px) and gains an emerald-tinted glow + emerald-200 border; one featured card inverts to a solid emerald-700 ground with white text. Quotation marks are oversized Georgia serif glyphs for an editorial touch. Mood: clean, trustworthy, modern, premium; never flat, never generic.

Layout & Structure

A single full-width testimonial section under a sticky nav, all content capped at max-w-7xl with px-6 / lg:px-8 gutters and generous vertical padding (py-24 to lg:py-32). Top-down: a sticky blurred white header (h-16) with a logo lockup, center nav links, and sign-in + 'Start free' actions; then the section, layered over a masked emerald dotted field and a top emerald wash. Inside: (1) a centered heading block (max-w-3xl) with an emerald eyebrow pill, an extrabold headline whose tail is an emerald gradient, a muted subhead, and a centered five-star + average-rating strip; (2) a responsive testimonial grid (grid-cols-1 -> md:grid-cols-2 -> lg:grid-cols-3, gap-6 / lg:gap-7) of six figure cards, each = oversized serif quote mark, a blockquote, and a figcaption (avatar with emerald ring + name + role on the left, brand logo + company on the right, separated by a top hairline border), with the third card a solid-emerald featured variant; (3) a closing trust block: a top hairline border, an uppercase 'Trusted by teams shipping at' caption, and a centered wrap of six emerald brand logos. Responsive: nav center links and the sign-in link hide below md/sm respectively (a hamburger shows below md); the heading drops 4xl -> 5xl from sm; the card grid reflows 1 -> 2 -> 3 columns; the logo strip wraps. No horizontal overflow at any width despite the full-bleed dotted field and the absolute wash/glow layers.

Sticky nav

Heading block

Testimonial grid

Featured (emerald) card

Closing logo strip

Special Notes

Font: Inter only for all UI text (Google Fonts, weights 400/500/600/700/800), with tight tracking and an extrabold (800) headline + bold (700) names; Georgia (serif) is used only for the oversized decorative quotation marks (.quote-mark). Styled with Tailwind via CDN using a custom theme palette: ink 900 #0b1220 / 800 #1e293b / 700 #334155 / 600 #475569 / 500 #64748b / 400 #94a3b8 / 200 #e2e8f0 / 100 #f1f5f9 / 50 #f8fafc, and emerald 50 #ecfdf5 / 100 #d1fae5 / 500 #10b981 / 600 #059669 / 700 #047857. Body background is white with antialiased font smoothing; html has scroll-behavior:smooth. Icons via Iconify (ph:* Phosphor for UI glyphs, simple-icons:* for brand logos). The signature moves are the masked emerald dotted field + soft top wash backdrop, the editorial oversized serif quote marks, the hover-lift cards with emerald glow, and the single inverted emerald-700 featured card that anchors the grid. Keep the palette a single emerald scale over white, never introduce a second hue.