Pattern catalog · 6 of 6 loaded
v1.0Spring 2026Internal reference
Web Build Templates
Pattern Reference

Testimonials library

6 testimonial patterns
v1.0 · Spring 2026
Live

Six ways to present social proof — from the marquee band to the long-form magazine pull-quote. Match the format to what the buyer needs to believe.

How to use this: The format should match what the buyer needs to be convinced of. Skeptical B2B buyer → metrics + quote. Brand-led consumer → marquee. Premium service buyer → editorial case excerpt. Logo wall is fastest to scan but does the least.

One strong featured quote often outperforms three cards of mediocre ones. Don't pad — earn each testimonial.

01

Featured Quote

Editorial

One quote treated like a hero — oversized, considered, attribution as small footnote. Better than a wall of testimonials when one says it best.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;1,9..144,400&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Inter',sans-serif;background:#f4efe6;color:#1a1814;line-height:1.5}
.s{padding:64px 48px;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;min-height:520px}
.qz{position:relative}
.qm{font-family:'Fraunces',serif;font-size:240px;line-height:.5;color:#a4341e;position:absolute;top:-40px;left:-32px;font-style:italic;font-weight:400;opacity:.4;pointer-events:none}
.q{font-family:'Fraunces',serif;font-weight:400;font-size:36px;line-height:1.25;letter-spacing:-.015em;position:relative;z-index:1}
.q em{font-style:italic;color:#a4341e}
.byline{margin-top:36px;display:flex;align-items:center;gap:18px}
.av{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#a4341e,#5a4f38);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-style:italic;font-size:24px;flex-shrink:0}
.who b{display:block;font-weight:600;font-size:15px;letter-spacing:-.005em}
.who span{display:block;font-size:13px;color:#7a6f5f}
.k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#a4341e;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.k::before{content:"";width:32px;height:1px;background:#a4341e}
.h{font-family:'Fraunces',serif;font-weight:400;font-size:42px;letter-spacing:-.025em;line-height:1.05;margin-bottom:20px}
.h em{font-style:italic;color:#a4341e}
.sb{font-size:15px;color:#5a5040;line-height:1.6;margin-bottom:32px;max-width:42ch}
.proof{display:flex;flex-direction:column;gap:14px;border-top:1px solid #d8cdb6;padding-top:24px}
.pr{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline}
.pr b{font-family:'Fraunces',serif;font-weight:600;font-size:32px;letter-spacing:-.02em;line-height:1;color:#a4341e}
.pr p{font-size:14px;color:#3a352e;line-height:1.45}
.pr p span{display:block;font-size:11px;color:#9b8e7c;text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
@media(max-width:880px){.s{grid-template-columns:1fr;padding:32px 24px;gap:32px}.q{font-size:24px}.qm{font-size:140px}.h{font-size:28px}}</style></head><body><section class="s">
<div class="qz"><span class="qm">"</span><p class="q">They asked us harder questions in week one than our last <em>three agencies</em> asked us in two years. We've been working with them ever since.</p>
<div class="byline"><div class="av">D</div><div class="who"><b>Dana Khalid</b><span>Director of Brand · Ravenwood, Series B SaaS</span></div></div></div>
<div><div class="k">Why people work with us</div><h2 class="h">94% retention. <em>Six-year</em> average tenure.</h2><p class="sb">We don't talk much about our work — most of it is under NDA, much of it isn't quote-worthy yet, and we'd rather earn the next client than impress the last one. But this is what people tell us when we ask, and most of them stick around.</p>
<div class="proof"><div class="pr"><b>94%</b><p>client retention<span>over 8 years &amp; 62 projects</span></p></div><div class="pr"><b>6 yrs</b><p>average client tenure<span>three are now in year 8+</span></p></div><div class="pr"><b>62 / 8</b><p>projects · same partners<span>no agency hopping required</span></p></div></div></div>
</section></body></html>
02

Slack Conversations

Conversational

Testimonials styled as Slack messages — avatars, timestamps, threading. Feels candid and contemporary. For SaaS, dev tools, B2B with technical buyers.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Inter',sans-serif;background:#fafafa;color:#0a0a0a;line-height:1.5}
.s{padding:48px 36px;max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.hd{margin-bottom:8px}
.k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5eead4;font-weight:600;background:#0a2a26;color:#5eead4;padding:5px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
.k::before{content:"";width:6px;height:6px;background:#5eead4;border-radius:50%}
.h{font-size:36px;font-weight:600;letter-spacing:-.025em;line-height:1.1}
.h em{font-style:italic}
.sb{font-size:15px;color:#666;margin-top:8px;max-width:54ch}
.ch{background:#fff;border:1px solid #e5e5e5;border-radius:14px;overflow:hidden}
.ch-h{padding:14px 22px;border-bottom:1px solid #e5e5e5;display:flex;justify-content:space-between;align-items:center}
.ch-name{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px}
.ch-name::before{content:"#";color:#aaa;font-weight:400}
.ch-meta{font-size:12px;color:#999}
.msgs{padding:14px 22px;display:flex;flex-direction:column;gap:18px}
.msg{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start}
.av{width:40px;height:40px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:16px}
.av.a{background:linear-gradient(135deg,#7e3aff,#ff3a8c)}
.av.b{background:linear-gradient(135deg,#5eead4,#3a5fff)}
.av.c{background:linear-gradient(135deg,#ffaa3a,#ff6b35)}
.av.d{background:linear-gradient(135deg,#ff3a8c,#a4341e)}
.av.e{background:linear-gradient(135deg,#5d6b3f,#1a1612)}
.bd .nm{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin-bottom:2px}
.bd .nm .ti{font-size:11px;color:#999;font-weight:400}
.bd .role{font-size:12px;color:#999;margin-bottom:6px}
.bd .txt{font-size:14px;line-height:1.55;color:#0a0a0a}
.bd .txt b{font-weight:600}
.bd .txt em{font-style:italic;color:#444}
.bd .txt code{background:#f0f0f0;padding:1px 6px;border-radius:4px;font-family:'SF Mono','Geist Mono',monospace;font-size:13px;color:#a4341e}
.thr{margin-top:8px;padding:10px 12px;border-left:3px solid #5eead4;background:#f0fdfa;border-radius:0 8px 8px 0;font-size:13px;color:#0a3a35;display:flex;align-items:center;gap:8px}
.thr b{font-weight:600;color:#0a2a26}
.rx{display:flex;gap:6px;margin-top:8px}
.rx span{padding:3px 8px;background:#f5f5f5;border:1px solid #e5e5e5;border-radius:12px;font-size:12px;color:#444;display:flex;align-items:center;gap:4px}
.rx span b{color:#a4341e;font-weight:600}
.f{padding:18px 22px;background:#fafafa;border-top:1px solid #e5e5e5;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#666}
.f b{color:#0a0a0a;font-weight:600}
.btn{padding:9px 18px;background:#0a0a0a;color:#fff;border:none;font-family:inherit;font-weight:500;font-size:13px;border-radius:6px;cursor:pointer}
.btn:hover{background:#5eead4;color:#0a2a26}
@media(max-width:780px){.s{padding:24px 16px}.h{font-size:24px}}</style></head><body><section class="s">
<header class="hd"><div class="k">From real customer Slacks · last 90 days</div><h1 class="h">What customers actually <em>say in Slack</em>.</h1><p class="sb">Pulled (with permission) from the team channels of three customers who let us share. Not curated.</p></header>
<div class="ch">
<div class="ch-h"><span class="ch-name">customer-conversations</span><span class="ch-meta">347 messages · 14 customers · last 90d</span></div>
<div class="msgs">
<div class="msg"><div class="av a">P</div><div class="bd"><div class="nm">Priya Mehta <span class="ti">11:42 AM</span></div><div class="role">VP Engineering · Cumulus Robotics</div><div class="txt">just hit our first 1B tokens this morning. cost is <b>about a quarter of what we were paying with our previous provider</b>. moving rest of the workloads over by EOQ.</div><div class="rx"><span>🚀 <b>14</b></span><span>💸 <b>8</b></span><span>👀 <b>4</b></span></div></div></div>
<div class="msg"><div class="av b">D</div><div class="bd"><div class="nm">Dax Lin <span class="ti">9:17 AM</span></div><div class="role">Tech lead · OrbitalOS</div><div class="txt"><em>tldr;</em> migrated our inference pipeline to <code>@lumen</code> over the weekend. p99 latency went from 480ms → 190ms. the API really is just <code>OpenAI</code>-compatible — like, drop-in. we changed two lines.</div><div class="thr"><b>↳ 8 replies</b> · last reply 12m ago</div></div></div>
<div class="msg"><div class="av c">M</div><div class="bd"><div class="nm">Marisol Fer <span class="ti">Yesterday</span></div><div class="role">Head of Product · Linnea AI</div><div class="txt">honestly i was prepared for the rollout to be a disaster. <b>it took 90 minutes including testing.</b> support replied to my one question in 4 mins. ngl skeptical of anything that goes this smoothly but here we are 🤝</div><div class="rx"><span>💯 <b>22</b></span><span>🤝 <b>11</b></span></div></div></div>
<div class="msg"><div class="av d">A</div><div class="bd"><div class="nm">Ari Tov <span class="ti">2 days ago</span></div><div class="role">Founder · Salt &amp; Tide Travel</div><div class="txt">"scale to zero" really meant scale to zero. our staging account billed us <b>$0.04 last month</b>. for the cofounders this is the actual selling point btw — variable cost, not fixed.</div></div></div>
</div>
<div class="f"><div><b>247 customers</b> · 4.9 ★ G2 · 4.8 ★ Capterra</div><button class="btn">Read more →</button></div>
</div>
</section></body></html>
03

With Metrics

Data-led

Each testimonial paired with a specific outcome metric. Quote + result. For B2B where buyers need to see ROI not vibes.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Geist',sans-serif;background:#0a0e0f;color:#e8eaea;line-height:1.5}
.s{padding:48px 36px;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.hd{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:24px}
.k{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5eead4;margin-bottom:14px}
.h{font-size:48px;font-weight:600;letter-spacing:-.025em;line-height:1.05}
.h em{font-style:italic;color:#5eead4;font-weight:500}
.sb{font-size:15px;color:#a3a8a8;line-height:1.55;max-width:38ch;padding-bottom:8px}
.cs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.c{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.c::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#5eead4,transparent)}
.c.a::before{background:linear-gradient(90deg,#7e3aff,transparent)}
.c.b::before{background:linear-gradient(90deg,#ffaa3a,transparent)}
.c.c::before{background:linear-gradient(90deg,#ff3a8c,transparent)}
.metric{display:flex;align-items:baseline;gap:8px;padding-bottom:14px;border-bottom:1px dashed rgba(255,255,255,.1)}
.metric .v{font-family:'Geist',sans-serif;font-size:48px;font-weight:600;letter-spacing:-.03em;line-height:1;color:#5eead4;font-variant-numeric:tabular-nums}
.c.a .metric .v{color:#a48cff}
.c.b .metric .v{color:#ffaa3a}
.c.c .metric .v{color:#ff3a8c}
.metric .l{font-size:13px;color:#a3a8a8;line-height:1.3}
.metric .l b{color:#fff;font-weight:500}
.q{font-size:18px;line-height:1.5;color:#e8eaea;letter-spacing:-.005em;flex:1}
.q em{font-style:italic;color:#5eead4}
.c.a .q em{color:#a48cff}
.c.b .q em{color:#ffaa3a}
.c.c .q em{color:#ff3a8c}
.q b{font-weight:600;color:#fff}
.byl{display:flex;align-items:center;gap:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);margin-top:auto}
.av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#5eead4,#3a5fff);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:16px}
.c.a .av{background:linear-gradient(135deg,#a48cff,#7e3aff)}
.c.b .av{background:linear-gradient(135deg,#ffaa3a,#ff6b35)}
.c.c .av{background:linear-gradient(135deg,#ff3a8c,#a4341e)}
.byl .nm{font-size:14px;font-weight:500}
.byl .nm span{display:block;font-size:12px;color:#a3a8a8;margin-top:1px}
.byl .logo{margin-left:auto;font-family:'Geist Mono',monospace;font-size:12px;color:#5eead4;letter-spacing:.06em;text-transform:uppercase;background:rgba(94,234,212,.08);padding:4px 10px;border-radius:999px;border:1px solid rgba(94,234,212,.2)}
.f{padding:24px 28px;background:rgba(94,234,212,.03);border:1px solid rgba(94,234,212,.15);border-radius:14px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;font-size:14px;color:#a3a8a8}
.f b{color:#fff;font-weight:500}
.btn{padding:11px 22px;background:#5eead4;color:#0a0e0f;border:none;font-family:inherit;font-weight:600;font-size:13px;border-radius:8px;cursor:pointer}
@media(max-width:880px){.cs{grid-template-columns:1fr}.hd{grid-template-columns:1fr;gap:14px}.h{font-size:32px}.f{grid-template-columns:1fr}}</style></head><body><section class="s">
<header class="hd"><div><div class="k">— Customer outcomes · last 12 months</div><h1 class="h">Real numbers, <em>not vibes</em>.</h1></div>
<p class="sb">Each story includes the metric. Each metric verified with the customer before publication.</p></header>
<div class="cs">
<div class="c"><div class="metric"><span class="v">−74%</span><span class="l">drop in inference cost<br><b>vs. previous provider</b></span></div><p class="q">"We were paying $42K/mo for inference at our peak. <em>We just closed Q1 at $11K</em> on the same volume. The board literally asked me to double-check the invoice."</p><div class="byl"><div class="av">P</div><div class="nm">Priya Mehta<span>VP Engineering</span></div><div class="logo">CUMULUS</div></div></div>
<div class="c a"><div class="metric"><span class="v">90 min</span><span class="l">total migration time<br><b>full prod cutover</b></span></div><p class="q">"We expected a quarter. <em>It took an afternoon.</em> Two-line code change, model swap, monitoring re-pointed. We were running on Lumen by lunch."</p><div class="byl"><div class="av">M</div><div class="nm">Marisol Fer<span>Head of Product</span></div><div class="logo">LINNEA AI</div></div></div>
<div class="c b"><div class="metric"><span class="v">p99: 190ms</span><span class="l">end-to-end latency<br><b>was 480ms before</b></span></div><p class="q">"Speed was the surprise. We came for the price. The latency improvement is what kept us — <em>and won us two enterprise deals</em> we'd otherwise have lost."</p><div class="byl"><div class="av">D</div><div class="nm">Dax Lin<span>Tech Lead</span></div><div class="logo">ORBITALOS</div></div></div>
<div class="c c"><div class="metric"><span class="v">$0.04</span><span class="l">our staging bill<br><b>last month</b></span></div><p class="q">"Scale-to-zero is the actual feature. <em>Variable cost, not fixed.</em> Our staging environment costs less than my coffee. For a four-person team, this is real money."</p><div class="byl"><div class="av">A</div><div class="nm">Ari Tov<span>Co-founder</span></div><div class="logo">SALT &amp; TIDE</div></div></div>
</div>
<div class="f"><b>247<br>customers</b><div>Trusted by teams at <b>Cumulus, OrbitalOS, Linnea, and Salt &amp; Tide</b> — plus 243 others. <b>4.9 ★</b> on G2 across 89 verified reviews.</div><button class="btn">Read all cases →</button></div>
</section></body></html>
04

Quote Marquee

Animated

Endless scrolling band of testimonial fragments. High-energy, social-proof-heavy. For B2C, consumer brands, anywhere social proof is the conversion lever.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;700&display=swap" rel="stylesheet">
<style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Archivo',sans-serif;background:#fff5e1;color:#1a1a1a;overflow-x:hidden;line-height:1.5}
.s{padding:48px 0 32px}
.hd{padding:0 32px 32px;text-align:center}
.k{font-family:'Archivo Black',sans-serif;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#ff3d2e;margin-bottom:14px}
.h{font-family:'Archivo Black',sans-serif;font-size:48px;letter-spacing:-.03em;line-height:1.0;text-transform:uppercase}
.h em{font-style:italic;color:#ff3d2e}
.sb{font-size:14px;color:#555;margin-top:14px;max-width:48ch;margin-left:auto;margin-right:auto}
.bands{display:flex;flex-direction:column;gap:8px;padding:24px 0;background:#1a1a1a;color:#fff5e1;border-top:3px solid #ff3d2e;border-bottom:3px solid #ff3d2e}
.band{display:flex;white-space:nowrap;overflow:hidden}
.band .tk{display:flex;animation:scroll 38s linear infinite;flex-shrink:0;gap:0}
.band.r .tk{animation:scroll-r 42s linear infinite}
.q{display:inline-flex;align-items:center;padding:0 36px;flex-shrink:0;font-family:'Archivo Black',sans-serif;font-size:24px;line-height:1.2;letter-spacing:-.01em}
.q em{font-style:italic;color:#ff3d2e;margin:0 8px}
.q .who{font-family:'Archivo',sans-serif;font-weight:500;font-size:13px;color:#aaa;margin-left:14px;text-transform:uppercase;letter-spacing:.08em}
.dot{display:inline-flex;align-items:center;font-size:32px;color:#ff3d2e;padding:0 8px;flex-shrink:0}
.band.outline .q{-webkit-text-stroke:2px #fff5e1;color:transparent}
.band.outline .q em{-webkit-text-stroke:2px #ff3d2e;color:transparent}
.band.outline .q .who{-webkit-text-stroke:0;color:#aaa}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scroll-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.f{padding:24px 32px 0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;text-align:center;align-items:end}
.f .st b{font-family:'Archivo Black',sans-serif;font-size:48px;letter-spacing:-.03em;line-height:1;display:block}
.f .st b em{font-style:italic;color:#ff3d2e}
.f .st span{font-size:13px;color:#777;font-weight:500}
@media(max-width:780px){.h{font-size:28px}.q{font-size:18px;padding:0 20px}.f{grid-template-columns:1fr;gap:16px}.f .st b{font-size:36px}}</style></head><body><section class="s">
<header class="hd"><div class="k">★★★★★ — what 1,200+ runners say</div><h1 class="h">No flexing. <em>No fluff.</em> Just runners.</h1><p class="sb">A free running club for people who keep meaning to start. This is what they tell us.</p></header>
<div class="bands">
<div class="band"><div class="tk">
<span class="q">finally a club where my <em>11-min mile</em> is welcome <span class="who">— maya, philly</span></span><span class="dot">●</span>
<span class="q">i show up <em>more</em> when i don't pay <span class="who">— dontay, brooklyn</span></span><span class="dot">●</span>
<span class="q">made <em>three real friends</em> at run #2 <span class="who">— priya, oakland</span></span><span class="dot">●</span>
<span class="q">tuesdays are sacred now <span class="who">— rae, boston</span></span><span class="dot">●</span>
<span class="q">finally a club where my <em>11-min mile</em> is welcome <span class="who">— maya, philly</span></span><span class="dot">●</span>
<span class="q">i show up <em>more</em> when i don't pay <span class="who">— dontay, brooklyn</span></span><span class="dot">●</span>
<span class="q">made <em>three real friends</em> at run #2 <span class="who">— priya, oakland</span></span><span class="dot">●</span>
<span class="q">tuesdays are sacred now <span class="who">— rae, boston</span></span><span class="dot">●</span>
</div></div>
<div class="band r outline"><div class="tk">
<span class="q">i kept the streak going <em>for six months</em> <span class="who">— jules, seattle</span></span><span class="dot">●</span>
<span class="q">no apps no logins no judgment <span class="who">— miguel, chicago</span></span><span class="dot">●</span>
<span class="q">the only ad-free fitness thing in my life <span class="who">— sasha, dc</span></span><span class="dot">●</span>
<span class="q">i finally <em>actually run</em> <span class="who">— ben, austin</span></span><span class="dot">●</span>
<span class="q">i kept the streak going <em>for six months</em> <span class="who">— jules, seattle</span></span><span class="dot">●</span>
<span class="q">no apps no logins no judgment <span class="who">— miguel, chicago</span></span><span class="dot">●</span>
<span class="q">the only ad-free fitness thing in my life <span class="who">— sasha, dc</span></span><span class="dot">●</span>
<span class="q">i finally <em>actually run</em> <span class="who">— ben, austin</span></span><span class="dot">●</span>
</div></div>
<div class="band"><div class="tk">
<span class="q">first <em>5K</em> in 12 years <span class="who">— mara, denver</span></span><span class="dot">●</span>
<span class="q">my therapist literally suggested this <span class="who">— alex, brooklyn</span></span><span class="dot">●</span>
<span class="q">running w people i'd never have met <span class="who">— rashid, sf</span></span><span class="dot">●</span>
<span class="q">it just <em>feels easy</em> <span class="who">— claire, providence</span></span><span class="dot">●</span>
<span class="q">first <em>5K</em> in 12 years <span class="who">— mara, denver</span></span><span class="dot">●</span>
<span class="q">my therapist literally suggested this <span class="who">— alex, brooklyn</span></span><span class="dot">●</span>
<span class="q">running w people i'd never have met <span class="who">— rashid, sf</span></span><span class="dot">●</span>
<span class="q">it just <em>feels easy</em> <span class="who">— claire, providence</span></span><span class="dot">●</span>
</div></div>
</div>
<div class="f"><div class="st"><b>1,200+</b><span>active members</span></div><div class="st"><b>14</b><span>cities every Tuesday</span></div><div class="st"><b><em>$0</em></b><span>cost to join · always</span></div></div>
</section></body></html>
05

Logo Wall

Visual

Just the company logos — no quotes. Says "we work with these people" without elaboration. For B2B where buyer wants to see brand recognition fast.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,600&display=swap" rel="stylesheet">
<style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Inter',sans-serif;background:#fff;color:#0a0a0a;line-height:1.5}
.s{padding:64px 36px;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:36px}
.hd{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;max-width:600px;margin:0 auto}
.k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#a4341e;font-weight:600}
.h{font-family:'Fraunces',serif;font-weight:400;font-size:42px;letter-spacing:-.025em;line-height:1.1}
.h em{font-style:italic;color:#a4341e}
.sb{font-size:15px;color:#666;line-height:1.55;max-width:48ch}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:#e5e5e5;border:1px solid #e5e5e5;border-radius:14px;overflow:hidden}
.lg{aspect-ratio:3/2;background:#fff;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:600;font-size:18px;color:#444;letter-spacing:-.01em;transition:all .25s;cursor:pointer;text-align:center;padding:14px}
.lg:hover{background:#0a0a0a;color:#fff}
.lg.mono{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-.02em;font-size:16px}
.lg.bk{background:#0a0a0a;color:#fff}
.lg.bk:hover{background:#a4341e}
.lg span{font-size:9px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;display:block;color:#999;margin-top:2px;font-family:'Inter',sans-serif}
.lg.bk span{color:#aaa}
.lg .em{font-style:italic;color:#a4341e}
.lg.bk .em{color:#ffaa3a}
.foot{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding-top:24px;border-top:1px solid #e5e5e5;font-size:14px;color:#444;line-height:1.55}
.foot b{color:#0a0a0a;font-weight:600}
.btn{padding:13px 24px;background:#0a0a0a;color:#fff;border:none;font-family:inherit;font-weight:600;font-size:14px;border-radius:999px;cursor:pointer}
.btn:hover{background:#a4341e}
.cnt{font-family:'Fraunces',serif;font-weight:600;font-size:48px;letter-spacing:-.03em;line-height:1}
.cnt em{font-style:italic;color:#a4341e}
.cnt span{display:block;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#666;font-weight:500;margin-top:4px}
@media(max-width:880px){.s{padding:32px 18px}.grid{grid-template-columns:1fr 1fr}.lg{font-size:14px;aspect-ratio:5/3}.foot{grid-template-columns:1fr}}</style></head><body><section class="s">
<header class="hd"><div class="k">— Trusted by teams at</div><h1 class="h">A few of the <em>folks</em> we've worked with.</h1><p class="sb">A small studio with deliberately small client lists. Here's everyone we've shipped for in the last three years.</p></header>
<div class="grid">
<div class="lg">Ravenwood</div>
<div class="lg mono">CUMULUS</div>
<div class="lg bk">Linnea<span>AI</span></div>
<div class="lg">OrbitalOS</div>
<div class="lg mono">SALT &amp; TIDE</div>
<div class="lg bk"><em>Maison</em><span>Voltaire</span></div>
<div class="lg mono">FUNDAMENT</div>
<div class="lg">Petal &amp; <em>Slow</em></div>
<div class="lg bk">RUN/CLUB</div>
<div class="lg mono">VOLT/22</div>
<div class="lg">The <em>Periphery</em></div>
<div class="lg bk mono">ALMANAC</div>
<div class="lg mono">FIELD &amp; FORM</div>
<div class="lg">Sterling &amp; <em>Crow</em></div>
<div class="lg bk">Hopper</div>
<div class="lg">Hollow &amp; Co.</div>
<div class="lg mono">KUNSTHALLE</div>
<div class="lg bk"><em>Marin</em><span>therapy</span></div>
</div>
<div class="foot"><div class="cnt">62<em></em><span>shipped projects</span></div><div>Across <b>8 industries</b>, mostly between <b>Series A and Series C</b>. We turn down most of what's offered, so the list grows slowly.</div><button class="btn">See cases →</button></div>
</section></body></html>
06

Case Excerpt

Editorial

One long-form testimonial styled as a magazine pull-quote with proper editorial framing. For premium services where one detailed story converts.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:'EB Garamond',serif;background:#fcfaf5;color:#1a1612;line-height:1.6;font-size:18px}
.s{padding:56px 0;max-width:880px;margin:0 auto;padding-left:48px;padding-right:48px}
.dl{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7a6f5f;margin-bottom:32px;display:flex;align-items:center;gap:10px}
.dl::after{content:"";flex:1;height:1px;background:#d4cabb;max-width:200px}
.k{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9c4a2c;font-weight:600;margin-bottom:14px}
.h{font-style:italic;font-size:42px;font-weight:400;letter-spacing:-.005em;margin-bottom:14px;line-height:1.1}
.h em{color:#9c4a2c}
.lead{font-family:'Inter',sans-serif;font-size:14px;color:#5a5040;line-height:1.55;max-width:50ch;margin-bottom:36px}
.q{font-style:italic;font-size:24px;line-height:1.4;color:#1a1612;letter-spacing:-.01em;border-left:3px solid #9c4a2c;padding-left:24px;margin:24px 0}
.q em{color:#9c4a2c}
.b p{margin-bottom:16px}
.b em{font-style:italic;color:#9c4a2c}
.b b{font-weight:500;color:#1a1612}
.byl{margin-top:36px;padding:18px 0;border-top:1px solid #d4cabb;display:flex;align-items:center;gap:18px}
.av{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#9c4a2c,#5a4f38);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'EB Garamond',serif;font-style:italic;font-size:24px;flex-shrink:0}
.byl .who{flex:1}
.byl .who b{display:block;font-family:'Inter',sans-serif;font-weight:600;font-size:15px}
.byl .who span{display:block;font-family:'Inter',sans-serif;font-size:13px;color:#7a6f5f;margin-top:2px}
.byl .meta{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9b8e7c;text-align:right}
.byl .meta b{display:block;color:#1a1612;font-family:'EB Garamond',serif;font-style:italic;font-size:21px;font-weight:400;letter-spacing:0;text-transform:none;margin-top:2px}
.f{margin-top:24px;padding:14px 0;display:flex;justify-content:space-between;align-items:center;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#9b8e7c}
.f a{color:#9b8e7c;text-decoration:none;border-bottom:1px solid #9c4a2c;padding-bottom:1px}
@media(max-width:780px){.s{padding:32px 24px}.h{font-size:28px}.q{font-size:18px}}</style></head><body><section class="s">
<div class="dl">Selected work · Issue 04</div><div class="k">A note from a client</div>
<h1 class="h">"The hardest <em>compliment</em> we've gotten."</h1>
<p class="lead">In November 2024, we shipped a complete rebrand for an indie law firm in Boston. Two months later, the managing partner sent us this. We share it here, with permission, in full.</p>
<p class="q">"You did something I genuinely didn't think was possible — you made our firm feel <em>lived in</em>."</p>
<div class="b">
<p>"We've worked with three branding agencies before this. Each one delivered something polished and professional and entirely unlike us. We always assumed that was just the cost of working with people who didn't know our industry. <em>You proved otherwise.</em></p>
<p>What stood out, looking back, was how much you pushed back early. Week two, you told us we were describing the firm we wished we were, not the firm we are. <b>Nobody had said that before.</b> The strategy doc we got at the end of Phase 01 was the first time I'd seen us described accurately by someone outside the partnership.</p>
<p>The work that came after that doc — the identity, the site, the voice guide — felt like a logical conclusion of a conversation we'd been having with ourselves for a decade. <em>It feels like us.</em> Not the version of us we present at conferences. The actual version.</p>
<p>That's the hardest compliment we've ever gotten, and the most accurate one. Thank you."</p>
</div>
<div class="byl"><div class="av">M</div><div class="who"><b>Mariam El-Sayed</b><span>Managing Partner · Periphery Law, Boston</span></div><div class="meta">Project<b>Rebrand · 2024</b></div></div>
<div class="f"><div>Read the full case →</div><div><a>14 more like this in the journal</a></div></div>
</section></body></html>
Copied