Proof, Stacked: Logo Wall + Metric Trust Strip + Featured Quote (Deep-Teal)

Summary

A stacked, trust-forward social-proof page in a deep-teal-on-white palette for a prompt-to-UI design product. Under a sticky blurred nav, three proof layers stack top-down: (1) a centered heading block (a rounded teal trust badge 'Trusted in production', an extrabold Inter headline 'The design layer behind teams that ship fast.', a muted subhead) above a six-logo logo wall set in a rounded paper panel whose edges fade via a horizontal mask; (2) a three-up metric trust strip in a single hairline-divided white card (120k+ designs generated, 4.9/5 average creator rating, 9x faster idea to UI), each cell with a big teal tabular-nums number, a label, and a sublabel, plus a teal gradient top-bar that fades in on hover; (3) a featured-quote block over a faint teal grid + a soft teal blur glob: a centered rounded card (teal gradient top hairline, an oversized serif quote mark, a five-star + 'Featured story' chip, a big bold pull-quote, and a byline with a teal gradient monogram avatar + name/role + a small brand lockup), with a 'Verified customer story' seal-check line beneath. Inter throughout, Georgia for the decorative quote mark, Phosphor icons via Iconify.

Style

A calm, premium SaaS social-proof style built on a single deep-teal accent over near-white paper. The page ground is a very light slate paper (#f8fafc) with white panels; teal (#0f766e) is the only accent, reinforced by a deeper teal (#115e59), a brighter mid-teal (#14b8a6) for plus/slash/times glyphs and gradients, and a soft teal tint (#ccfbf1) for badge/glow fills. Type is all Inter with tight tracking: an extrabold (800/900) headline, semibold (600) labels, and a slate ink scale for hierarchy (near-black ink #0f172a headings, slate #475569 body, muted slate #64748b sublabels). Surfaces are crisp white rounded-2xl/3xl panels with hairline slate-200/70 borders and barely-there shadows; the featured quote card adds a soft long teal-tinted drop shadow and a teal gradient top hairline. Numbers use tabular-nums so the metric strip stays aligned. The decorative quotation mark is an oversized Georgia serif glyph at very low teal opacity for an editorial touch. Subtle motion: a teal gradient top-bar fades in on each metric cell hover, the nav CTA arrow nudges right, logos darken from slate to ink on hover. Mood: trustworthy, enterprise-credible, clean, modern; never flat, never garish.

Layout & Structure

A single-column, stacked social-proof page under a sticky nav, every band capped at max-w-6xl (the featured-quote band at max-w-4xl) with px-6 gutters and generous vertical padding. Top-down: (1) a sticky blurred paper header (h-16) with a logo lockup, center nav links, and sign-in + 'Start free' pill; (2) a white hero band (border-bottom hairline, a thin teal-fade top line) holding a centered heading block then a logo wall; (3) a paper band with a three-up metric trust strip in one hairline-divided white card; (4) a white featured-quote band layered over a faint teal grid + a soft teal blur glob, holding one centered quote card and a 'Verified customer story' seal line. Responsive: the nav center links hide below md and the sign-in link below sm; the headline goes 34px -> 44px from sm with an sm-only line break; the logo wall grid reflows 2 -> 3 -> 6 columns; the metric strip goes 1-col with horizontal divider lines to 3-col with vertical dividers from sm; the quote card padding and quote size step up from sm; the brand lockup in the byline hides below sm. No horizontal overflow at any width despite the masked logo wall, the faint grid, and the absolute glow layers.

Sticky nav

Heading block

Logo wall

Metric trust strip

Featured quote card

Verified line

Special Notes

Font: Inter only for all UI text (Google Fonts, weights 400/500/600/700/800/900), tight tracking, an extrabold/black headline + bold metric numbers; Georgia (serif) is used only for the single oversized decorative quotation mark (.quote-mark). Styled with Tailwind via CDN using a custom theme: colors ink #0f172a, slate2 #475569, slate3 #64748b, paper #f8fafc, and a teal object { DEFAULT #0f766e, deep #115e59, soft #ccfbf1, mid #14b8a6 }. Body background is paper #f8fafc with antialiased font smoothing + optimizeLegibility; html has scroll-behavior:smooth. Custom utilities: .tnum (tabular-nums) for the metric numbers; .logowall-fade (horizontal mask 6%->94%) for the logo wall; .ring-hair (box-shadow 0 1px 2px rgba(15,23,42,.04), 0 0 0 1px rgba(15,23,42,.06)) for the metric card; .quote-mark (Georgia serif) for the big quote glyph; .grain-grid (44px linear-gradient grid in rgba(15,118,110,.05)) behind the quote band. Icons via Iconify (ph:* Phosphor only). The signature moves are the three stacked proof layers (logo wall -> metric strip -> featured quote), the single deep-teal accent on near-white paper, the masked logo wall, the hairline-divided metric strip with hover top-bars and tabular-nums numbers, and the editorial oversized serif quote mark on the gradient quote card. Keep the palette a single teal scale over white/paper, never introduce a second hue.