Social Proof

web

Logos, testimonials, case studies, metrics. The unsexy parts that convert.

Variation 01
Logo Wall
aka Logo Cloud · Trusted By
vercel.com
Monochromatic row of customer logos. Quiet, trust-building.
When to use
Right under the hero, if you have logos worth showing. Don't fake it.
Anatomy
Small label ('Trusted by teams at')
Row of 5–8 logos, single color, ~30–40px tall
Optional infinite-scroll marquee on mobile
How the industry does it
1 examples · credited
Vercel
Subtle, ghosted, sometimes animated marquee.
via vercel.com
Prompt
```
Create a logo wall section. Tiny uppercase label centered ("Trusted by teams shipping at scale"). Below, a single row of 6–8 monochrome SVG logos at ~32px height, evenly spaced, all colored rgba(255,255,255,0.6). Add a horizontal fade-out mask on the left and right edges. On mobile, convert to an infinite marquee scrolling slowly (40s loop), paused on hover. Keep the section vertical padding generous so it breathes.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 02
Testimonial Wall
aka Quote Grid · Wall of Love
cal.com
Masonry of short customer quotes with avatars and roles.
When to use
Mid-page or near the bottom. Effective when you have many real quotes - 3 looks thin.
Anatomy
Masonry or 3-col grid
Per-quote card: avatar, name, role, quote, optional source icon
Subtle hover lift
How the industry does it
1 examples · credited
Cal.com
Live tweet wall, masonry layout.
via cal.com
Prompt
```
Generate a testimonial wall. Headline at the top. Below, a 3-column masonry grid of 9–12 quote cards. Each card: rounded-2xl, border 1px rgba(255,255,255,0.06), background rgba(255,255,255,0.02), padding 24px. Top row: 32px avatar, name (15px), role (13px ink-400), and a small source icon (X, LinkedIn) on the right. Quote: 15px text-balance, leading-relaxed. Vary quote lengths so the masonry feels organic. On hover, the card lifts 2px and the border brightens slightly.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 03
Case Study Cards
aka Customer Stories
linear.app
Image-led cards linking to long-form customer stories.
When to use
When you have written real case studies and want to surface them on the homepage.
Anatomy
3-col grid
Per-card: 4:3 image, customer logo, headline metric, short blurb
Hover: image scales 1.02
How the industry does it
1 examples · credited
Linear
Editorial photography, big quotes, restrained type.
via linear.app
Prompt
Preview · Pro to copy
```
Build a case studies section. Section heading + subhead. A 3-col grid of 3 cards. Each card: 4:3 image at the top with rounded-2xl, image-fill cover. Below the image: customer logo in monochrome (24px), a big metric ("3.2× faster onboarding"), a one-line quote, and a "Read story →" link. Whole card is clickable. On hover the image scales to 1.03 and the metric color brightens.
```
Pro
Unlock the full prompt.
Buy Pro
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 04
Metric Strip
aka By the Numbers · Stat Bar
stripe.com
A single row of large numbers - users, $ processed, requests served. Used to assert scale in one breath.
When to use
When the numbers are real and impressive. Faking these is the fastest way to lose credibility.
Anatomy
Row of 3–4 stats
Big number (48–64px), often serif or mono
One-line label beneath each
Optional fine print citation
How the industry does it
2 examples · credited
Stripe
Quiet stat strip with serif numbers and modest labels.
via stripe.com
Vercel
Four-up metric row anchored by a small reassurance line.
via vercel.com
Prompt
```
Build a metric strip. A 4-column grid of stats. Each cell: a 64px number in tabular monospace (or serif), then a 13px uppercase tracking-widest label below. Light dividers between cells on desktop, stacked on mobile. Below the grid, a tiny 11px line in ink-subtle citing the source ('as of Q1 2026'). No icons, no decoration. Background subtle. The whole section breathes. Generous vertical padding (96px).
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 05
Press / Media Mentions
aka As Seen In · Featured In
notion.so
Logos of publications and shows that have covered you, often with a pulled headline quote.
When to use
After real press coverage. 'As seen on' your own podcast appearance doesn't count.
Anatomy
Small label 'Featured in' or 'As covered by'
Row of 4–6 monochrome publication logos
Optional pulled headline per logo
Click-through to the article
How the industry does it
2 examples · credited
Notion
Press row with TechCrunch, Forbes, Bloomberg.
via notion.so
Cal.com
Press strip with pull quotes layered above the logos.
via cal.com
Prompt
```
Build a press mentions section. Small uppercase 'As covered by' label, centered above a row of 5 monochrome publication SVG logos (TechCrunch, The Verge, Forbes, Bloomberg, Hacker News). Logos at 28px height, rgba(255,255,255,0.6). Optional 13px pull-quote in serif below each logo, clickable to the article. On hover, the logo brightens to full white.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 06
Tweet Wall
aka Twitter Wall · X Wall of Love
cal.com
Masonry of real tweets / posts from happy users. Screenshots or live-embed cards.
When to use
Indie and PLG products with a real audience on X. Updates often. Pinned tweets feel curated, fresh ones feel alive.
Anatomy
3-column masonry
Each card: avatar, name, @handle, X icon
Tweet body in 14px
Subtle hover lift
Click opens the original post
How the industry does it
2 examples · credited
Cal.com
Auto-pulling tweet wall powered by real public posts.
via cal.com
Tailwind CSS
Pull-quoted tweets with avatar + handle + click-to-tweet.
via tailwindcss.com
Prompt
```
Build a tweet wall. 3-column CSS masonry layout of 12 tweet cards. Each card: rounded-2xl, surface fill, padding 20px. Top row: 32px avatar, then name (14px medium) + @handle (13px muted) stacked, X logo on the right. Body: the tweet text in 14px, links and @mentions highlighted in the accent color. Bottom row: muted timestamp. Whole card is a link to the original post and lifts 2px on hover.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 07
Live Activity Counter
aka Real-Time Stats · Ticker
cloudflare.com
A live-updating number. Signups today, requests served, builds deployed. Animating as the count climbs.
When to use
Infra and high-volume APIs. The animation does the marketing for you.
Anatomy
Big counter in monospace
Animates upward on a fixed cadence
Subtle 'live' dot pulsing next to it
Optional small geographic map background
How the industry does it
2 examples · credited
Cloudflare
Request-per-second ticker in the hero.
via cloudflare.com
Stripe
Live transactions-per-second indicator on landing.
via stripe.com
Prompt
Preview · Pro to copy
```
Build a live activity counter. A 64px number in tabular monospace that animates upward with smooth digit-by-digit transitions every 1–3 seconds (use a CountUp library). To the left of the number, a small 8px pulsing green dot with the label 'Live · Requests this minute' in 12px uppercase tracking-widest. Below: a small 'Reset hourly' note. Optionally overlay a faint world map with pulsing dots where requests come from.
```
Pro
Unlock the full prompt.
Buy Pro
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 08
App Store Rating Row
aka Rating Showcase · Star Strip
arc.net
Star ratings from public app stores (App Store, Chrome Web Store, G2, ProductHunt) lined up as evidence.
When to use
Consumer apps and browser extensions with real public ratings to point at.
Anatomy
Row of 3–4 stores
Store name + 5 stars + rating value + review count
Click-through to the store listing
How the industry does it
2 examples · credited
Arc
Cross-platform rating row with linked store badges.
via arc.net
Raycast
Mac App Store + Product Hunt + G2 ratings side by side.
via raycast.com
Prompt
```
Build a ratings row. 4 cells side by side. Each cell: store wordmark on top (App Store, Chrome Web Store, G2, Product Hunt), 5 filled star glyphs in the accent color, a numeric rating ('4.9'), and '· 2,431 reviews' in 12px muted text. Subtle divider between cells. Each cell is a link to the public store listing in a new tab.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 09
Customer Photo Collage
aka Faces Wall · Customer Avatars Mosaic
cal.com
A collage of customer headshots forming a single brand mosaic. Often paired with 'Loved by 25,000+ teams'.
When to use
Consumer + community-led products with a vibe and a face count to brag about.
Anatomy
Loose absolutely-positioned avatars
Different sizes for visual rhythm
Subtle ring border per avatar
Idle float animation if not reduced motion
Headline + number overlaid in center
How the industry does it
2 examples · credited
Cal.com
Avatar collage subtly arranged behind a headline.
via cal.com
Clerk
Floating avatars in the hero, scaled by 'fame'.
via clerk.com
Prompt
```
Build a customer avatar collage. A 600px tall section with ~24 absolutely-positioned circular avatars (32px–80px diameter), each with a 2px white ring and a soft drop shadow. Positions are deterministic (so they don't reshuffle on every paint). Idle animation: each avatar drifts ±4px on a 6–10s loop with staggered phases. Center the headline and a large number ('Loved by 25,000+ teams') over the collage with a soft radial backdrop behind the text for legibility.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 10
Investor / Founder Endorsement Strip
aka Backer Strip · Investor Quotes
linear.app
A row of named investor or founder quotes with photo, role, and fund.
When to use
Seed-to-Series-B B2B products where investor names carry weight. Optional for established brands.
Anatomy
3-up grid
Headshot (round, 48px)
Name + role + fund (12–13px)
Pull quote (15px, leading-relaxed)
How the industry does it
2 examples · credited
Linear
Investor quotes mixed with customer quotes on the same wall.
via linear.app
Vercel
Founder/investor row used as social validation in early days.
via vercel.com
Prompt
```
Build an investor endorsement strip. A 3-column grid of 3 cards. Each card: rounded-2xl with a 1px border, padding 28px. Top row of the card: 56px circular portrait, then name (15px medium), role · fund (13px muted) stacked. Below: a 15px serif pull-quote, italicized, with leading-relaxed. Subtle quote-mark glyph above the quote in the muted color. On hover the border brightens.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro

Social Proof

Logo Wall

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Testimonial Wall

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Case Study Cards

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Metric Strip

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Press / Media Mentions

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Tweet Wall

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Live Activity Counter

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

App Store Rating Row

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Customer Photo Collage

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Investor / Founder Endorsement Strip

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion