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

About library

6 about page patterns
v1.0 · Spring 2026
Live

Six about-page patterns — from the founder letter to the about-as-FAQ. Skip the timeline-of-milestones cliché.

How to use this: The about page does one of two jobs — establishing credibility (FAQ, team grid, manifesto) or establishing voice (founder letter, photo essay, values poster). Pick based on what visitors actually doubt about you.

For most service businesses, the FAQ pattern is underused and over-effective. It answers real questions and feels human in a way that timelines never do.

01

Founder Letter

Editorial

Long-form essay from the founder. No team grid, no timeline, no values list. Just one person explaining why the thing exists. For founder-led, considered businesses.

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.7;font-size:19px}
.s{padding:64px 48px 40px;max-width:680px;margin:0 auto}
.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;margin-bottom:8px}
.h{font-style:italic;font-size:44px;font-weight:400;letter-spacing:-.005em;margin-bottom:32px;line-height:1.1}
.b p{margin-bottom:18px}
.b p:first-of-type::first-letter{font-size:5em;font-weight:500;float:left;line-height:.85;margin:.05em .14em 0 -.04em;color:#9c4a2c}
.b em{font-style:italic;color:#9c4a2c}
.b b{font-weight:500;color:#1a1612}
.sg{margin-top:32px;padding-top:24px;border-top:1px solid #d4cabb;display:flex;align-items:center;gap:18px;font-family:'Inter',sans-serif;font-size:13px;color:#7a6f5f}
.sg .n{font-style:italic;font-size:24px;color:#1a1612;font-family:'EB Garamond',serif}
.f{margin-top:36px;padding:18px 0;border-top:1px solid #d4cabb;display:flex;justify-content:space-between;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}}</style></head><body><section class="s">
<div class="dl">No. 14 · A letter from the workshop</div><div class="k">About Hollow &amp; Co.</div>
<h1 class="h">In 2018, my father gave me a plane.</h1>
<div class="b">
<p>It was a wooden block plane from the 1920s, the kind with a brass adjuster that never quite worked. By every modern standard, it was a worse tool than the $40 one at the hardware store. <em>It was also better in every way that mattered.</em> That tension — between things that perform well and things that endure well — is more or less the whole reason this small company exists.</p>
<p>We make hand tools for woodworkers who'd rather own one good thing than a drawer full of fine ones. Each piece is made one at a time, in our shop in Camden, Maine, by me and a rotating cast of two or three apprentices who'll probably go on to start their own workshops. We don't have a catalog. We don't run sales. <b>We make about forty pieces a year, and most are spoken for before they're finished.</b></p>
<p>I started this in 2019 after fifteen years of pretending to enjoy a job in software. The first three years were lean. The next two were enough. <em>I have no plans to grow beyond what one person and a couple of apprentices can do in a 600-square-foot workshop.</em> If you're here, you probably already know why that matters. Welcome.</p>
</div>
<div class="sg"><span class="n">— Dean Hollow</span><span>founder, occasional writer, mostly a maker</span></div>
<div class="f"><div>Camden, Maine · Est. 2019</div><div><a>See what's in stock →</a></div></div></section></body></html>
02

Team Grid

Visual

Just the team — faces, names, roles, in a clean grid. No bios, no fluff. Lets the people speak. For studios, agencies, small teams where the people ARE the product.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Geist+Mono:wght@400&display=swap" rel="stylesheet">
<style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Bricolage Grotesque',sans-serif;background:#ebe8e1;color:#1a1a1a;line-height:1.5}
.s{padding:48px 36px;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:36px}
.hd{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end;border-bottom:1px solid rgba(26,26,26,.2);padding-bottom:24px}
.k{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#ff6b35;margin-bottom:12px}
.h{font-size:60px;font-weight:800;letter-spacing:-.025em;line-height:1.0}
.h em{font-style:italic;color:#ff6b35;font-weight:600}
.hd .r{padding-bottom:8px;font-size:14px;color:#5a5346;line-height:1.5;max-width:38ch}
.g{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.p{display:flex;flex-direction:column;gap:14px}
.f{aspect-ratio:3/4;border-radius:12px;display:flex;align-items:flex-end;padding:18px;color:#fff;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;position:relative;overflow:hidden}
.f::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.5));pointer-events:none}
.f.f1{background:linear-gradient(135deg,#ff6b35,#ffaa3a)}
.f.f2{background:linear-gradient(135deg,#5d6b3f,#3d4a25)}
.f.f3{background:linear-gradient(135deg,#1a1a1a,#3a3a3a)}
.f.f4{background:linear-gradient(135deg,#7e3aff,#ff3a8c)}
.f.f5{background:linear-gradient(135deg,#3d4ad9,#7e3aff)}
.f.f6{background:linear-gradient(135deg,#a4341e,#ff6b35)}
.f.f7{background:linear-gradient(135deg,#5eead4,#3a5fff)}
.f.f8{background:linear-gradient(135deg,#ffaa3a,#ff6b35)}
.f span{position:relative;z-index:2}
.bn{display:flex;justify-content:space-between;align-items:baseline}
.bn b{font-size:18px;font-weight:700;letter-spacing:-.01em}
.bn span{font-size:12px;color:#777;font-family:'Geist Mono',monospace;letter-spacing:.04em}
.tag{font-size:11px;color:#5a5346;font-family:'Geist Mono',monospace;letter-spacing:.04em;text-transform:uppercase}
.fr{padding:24px 28px;background:#fff;border-radius:14px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;font-size:14px;color:#5a5346}
.fr b{font-size:11px;font-family:'Geist Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#1a1a1a}
.fr a{color:#ff6b35;text-decoration:none;font-weight:600}
.btn{padding:12px 22px;background:#1a1a1a;color:#fff;border:none;font-family:inherit;font-weight:600;font-size:13px;border-radius:999px;cursor:pointer}
@media(max-width:880px){.hd{grid-template-columns:1fr;gap:18px}.g{grid-template-columns:1fr 1fr}.h{font-size:36px}.fr{grid-template-columns:1fr;text-align:left}}</style></head><body><section class="s">
<header class="hd"><div><div class="k">— Eight people, one studio</div><h1 class="h">A small team, picked <em>carefully</em>.</h1></div>
<div class="r">No founders' titles, no "ninjas," no inflated team page. The eight of us, in a converted 2,400 sq ft warehouse in Oakland, since 2017.</div></header>
<div class="g">
<div class="p"><div class="f f1"><span>SF · 2017–</span></div><div class="bn"><b>Janelle Reyes</b><span>JR/01</span></div><div class="tag">Partner · Strategy</div></div>
<div class="p"><div class="f f2"><span>SF · 2017–</span></div><div class="bn"><b>Reid Cao</b><span>RC/02</span></div><div class="tag">Partner · Design</div></div>
<div class="p"><div class="f f3"><span>SF · 2018–</span></div><div class="bn"><b>Mira Okafor</b><span>MO/03</span></div><div class="tag">Studio Manager</div></div>
<div class="p"><div class="f f4"><span>NYC · 2019–</span></div><div class="bn"><b>Dax Lin</b><span>DL/04</span></div><div class="tag">Senior Designer</div></div>
<div class="p"><div class="f f5"><span>SF · 2020–</span></div><div class="bn"><b>Nora Almasi</b><span>NA/05</span></div><div class="tag">Senior Designer</div></div>
<div class="p"><div class="f f6"><span>OAK · 2021–</span></div><div class="bn"><b>Gus Ehiogu</b><span>GE/06</span></div><div class="tag">Engineer</div></div>
<div class="p"><div class="f f7"><span>OAK · 2023–</span></div><div class="bn"><b>Theo Kapoor</b><span>TK/07</span></div><div class="tag">Designer</div></div>
<div class="p"><div class="f f8"><span>NYC · 2024–</span></div><div class="bn"><b>Lou Tran</b><span>LT/08</span></div><div class="tag">Designer</div></div>
</div>
<div class="fr"><b>Hiring<br>Senior eng &amp; design</b><div>Full-time, remote-first within US/EU. We post openings on <a>Read.cv</a> and our newsletter only — never on job boards.</div><button class="btn">See openings →</button></div>
</section></body></html>
03

Numbered Manifesto

Typographic

A numbered list of principles or beliefs. Big type, no images, just statements. For studios, opinionated brands, services with a strong POV.

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;0,9..144,600;1,9..144,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:'JetBrains Mono',monospace;background:#0c0a14;color:#f5f1e8;line-height:1.5}
.s{padding:64px 56px;max-width:1100px;margin:0 auto}
.hd{margin-bottom:48px;border-bottom:1px solid rgba(244,168,80,.3);padding-bottom:24px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#f4a850;margin-bottom:16px}
.h{font-family:'Fraunces',serif;font-weight:400;font-size:60px;letter-spacing:-.02em;line-height:1.0;color:#f5f1e8}
.h em{font-style:italic;color:#f4a850}
.cnt{text-align:right;font-size:12px;color:#a39c8e;letter-spacing:.06em}
.cnt b{font-family:'Fraunces',serif;font-size:48px;font-weight:400;display:block;color:#f4a850;letter-spacing:-.02em}
.lst{display:flex;flex-direction:column;gap:0}
.it{display:grid;grid-template-columns:80px 1fr;gap:32px;padding:24px 0;border-bottom:1px dashed rgba(244,168,80,.2);align-items:start}
.it:last-child{border-bottom:none}
.n{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:36px;color:#f4a850;letter-spacing:-.02em;line-height:1}
.t{font-family:'Fraunces',serif;font-weight:400;font-size:26px;line-height:1.3;letter-spacing:-.005em}
.t em{font-style:italic;color:#f4a850}
.t b{font-weight:600}
.ds{margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:13px;color:#a39c8e;line-height:1.55;letter-spacing:.02em;max-width:54ch}
.f{margin-top:48px;padding-top:18px;border-top:1px solid rgba(244,168,80,.3);display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#a39c8e}
.f a{color:#f4a850;text-decoration:none}
@media(max-width:780px){.s{padding:36px 24px}.hd{flex-direction:column;align-items:flex-start;gap:18px}.h{font-size:36px}.it{grid-template-columns:1fr;gap:8px}.t{font-size:20px}}</style></head><body><section class="s">
<header class="hd"><div><div class="k">A studio in seven sentences</div><h1 class="h">What we <em>actually</em> believe.</h1></div><div class="cnt"><b>07</b>principles · since 2017</div></header>
<div class="lst">
<div class="it"><div class="n">01</div><div><div class="t">Most design problems are <em>not actually design problems</em>.</div><p class="ds">If we can't articulate the business problem in one sentence after week one, we won't make it past week three. We start every engagement with positioning, not pixels.</p></div></div>
<div class="it"><div class="n">02</div><div><div class="t">A brand is <b>what it does</b>, not what it says it does.</div><p class="ds">We don't write taglines for clients whose product doesn't earn them. The work has to back the words. If it doesn't, we'll tell you.</p></div></div>
<div class="it"><div class="n">03</div><div><div class="t">Restraint is <em>almost always</em> the answer.</div><p class="ds">When in doubt, take it out. The best identity systems we've made are the ones with the fewest ideas, executed beautifully.</p></div></div>
<div class="it"><div class="n">04</div><div><div class="t">We charge fixed prices and <b>say no a lot</b>.</div><p class="ds">Hourly billing creates the wrong incentives for everyone. We scope tightly, price clearly, and turn down most of what's offered.</p></div></div>
<div class="it"><div class="n">05</div><div><div class="t">A small team is the feature, not <em>a bug</em>.</div><p class="ds">Eight of us, eight clients at a time. The senior people you meet are the people who do the work, beginning to end.</p></div></div>
<div class="it"><div class="n">06</div><div><div class="t">We are not a growth company.</div><p class="ds">We don't have a sales team, growth targets, or external investors. If you want to scale aggressively, you'd be better served elsewhere.</p></div></div>
<div class="it"><div class="n">07</div><div><div class="t">The best work comes from <em>real friendships</em> with clients.</div><p class="ds">We turn down clients we don't want to spend two years with. Our average engagement is six. Some have been ten.</p></div></div>
</div>
<div class="f"><div>Field &amp; Form Studio · Oakland</div><div><a>Read the full essay →</a></div></div>
</section></body></html>
04

Photo Essay

Visual

Origin story told in images with caption-style copy beneath. Magazine spread feeling. For places, founders with a story, brands with visual heritage.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,500;1,300&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:#1a1612;color:#f5f1e8;line-height:1.5}
.s{padding:48px 40px;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:36px}
.hd{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;border-bottom:1px solid rgba(196,141,79,.3);padding-bottom:24px}
.k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#c48d4f;margin-bottom:14px}
.h{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:60px;letter-spacing:-.01em;line-height:1.0;color:#f5f1e8}
.h em{font-style:italic;color:#c48d4f}
.dl{font-size:12px;color:#a89c87;letter-spacing:.06em;text-align:right}
.dl b{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;color:#f5f1e8;margin-top:4px;letter-spacing:0;font-weight:400}
.gr{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:auto auto;gap:14px}
.pl{aspect-ratio:4/3;border-radius:8px;background:linear-gradient(135deg,#3d2817,#1a0f08);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:18px;color:#fff5e1}
.pl::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 30%,rgba(196,141,79,.4),transparent 60%);pointer-events:none}
.pl::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence baseFrequency='0.9'/></filter><rect width='400' height='400' filter='url(%23n)' opacity='0.4'/></svg>");mix-blend-mode:overlay;opacity:.4}
.pl.p2{aspect-ratio:1;background:linear-gradient(135deg,#5d6b3f,#1a1612)}
.pl.p3{aspect-ratio:1;background:linear-gradient(135deg,#a4341e,#1a1612)}
.pl.p4{aspect-ratio:4/3;background:linear-gradient(135deg,#1a1612,#3a352e)}
.cap{position:relative;z-index:2;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;letter-spacing:.04em}
.cap b{display:block;font-style:normal;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c48d4f;margin-bottom:4px;font-weight:500}
.bd{display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:start;padding:24px 0}
.bd .ts{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:24px;color:#c48d4f;line-height:1.3;font-weight:300}
.bd .pp p{font-size:16px;line-height:1.7;color:#cbc1aa;margin-bottom:16px}
.bd .pp em{font-style:italic;color:#c48d4f}
.bd .pp b{color:#f5f1e8;font-weight:500}
.f{padding:18px 0;border-top:1px solid rgba(196,141,79,.3);display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#a89c87}
.f a{color:#c48d4f;text-decoration:none;border-bottom:1px solid #c48d4f;padding-bottom:1px}
@media(max-width:880px){.s{padding:32px 20px}.hd{flex-direction:column;align-items:flex-start;gap:14px}.h{font-size:36px}.gr{grid-template-columns:1fr}.bd{grid-template-columns:1fr;gap:18px}.bd .ts{font-size:20px}}</style></head><body><section class="s">
<header class="hd"><div><div class="k">Issue 04 · Provence, in summer</div><h1 class="h">A house, <em>then a hotel</em>.</h1></div>
<div class="dl">A reported piece by<b>Maison Voltaire</b>1847 — present</div></header>
<div class="gr">
<div class="pl"><div class="cap"><b>Plate I</b>The original façade, c. 1872</div></div>
<div class="pl p2"><div class="cap"><b>Plate II</b>South garden, June</div></div>
<div class="pl p3"><div class="cap"><b>Plate III</b>The bar, after dinner</div></div>
<div class="pl p4"><div class="cap"><b>Plate IV</b>The kitchen, before service</div></div>
</div>
<div class="bd"><p class="ts">"In 1847, two sisters bought a farmhouse to grow olives. Five generations later, their great-great-granddaughter still runs it."</p>
<div class="pp"><p>The Voltaire sisters bought the property in 1847, three days after burying their father. They had no plans for it beyond not having to sell it. The grove came back the next spring. <em>The hotel came later — by accident, like most good things.</em></p>
<p>By 1893 the house had become a stop on the Marseille-to-Avignon road for travelers who'd missed the last carriage. Marie Voltaire kept the keys. She refused to charge until guests insisted. <b>The first guest book, started in 1894, is still kept under glass at the front desk.</b> The handwriting changes hands every twenty or thirty years, but the tradition hasn't.</p></div></div>
<div class="f"><div>Provence · Est. 1847</div><div><a>The full history →</a></div></div>
</section></body></html>
05

Values Poster

Typographic

Six big values as a poster grid, each one its own panel. Different from the manifesto in being more visual, less typographic. For brands with strong principles.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Anton&family=Manrope:wght@400;500;700&display=swap" rel="stylesheet">
<style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Manrope',sans-serif;background:#0d0d0d;color:#fff;line-height:1.4}
.s{padding:32px;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.hd{padding:18px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #fbf24a}
.k{font-family:'Anton',sans-serif;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:#fbf24a}
.h{font-family:'Anton',sans-serif;font-size:36px;letter-spacing:-.02em;text-transform:uppercase;line-height:1}
.g{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.v{padding:32px 28px;border:2px solid #fff;display:flex;flex-direction:column;justify-content:space-between;min-height:240px;position:relative;overflow:hidden;transition:all .25s}
.v:hover{background:#fbf24a;color:#0d0d0d;border-color:#fbf24a}
.v:hover .num,.v:hover .lbl{color:#0d0d0d}
.v .num{font-family:'Anton',sans-serif;font-size:18px;letter-spacing:.1em;color:#fbf24a;margin-bottom:auto}
.v .t{font-family:'Anton',sans-serif;font-size:36px;line-height:.95;letter-spacing:-.01em;text-transform:uppercase;margin:24px 0 14px}
.v .t em{font-style:italic;font-weight:400;color:#fbf24a}
.v:hover .t em{color:#0d0d0d}
.v .ds{font-size:13px;line-height:1.5;font-weight:500;max-width:30ch}
.v .lbl{font-family:'Anton',sans-serif;font-size:11px;letter-spacing:.15em;color:#666;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.2)}
.v.ac{background:#fbf24a;color:#0d0d0d;border-color:#fbf24a}
.v.ac .num,.v.ac .lbl{color:#0d0d0d}
.v.ac .lbl{border-color:rgba(13,13,13,.2)}
.v.ac:hover{background:#fff;border-color:#fff}
.f{padding:14px 24px;display:flex;justify-content:space-between;align-items:center;border-top:2px solid #fbf24a;font-family:'Anton',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#fbf24a}
.f a{color:#fff;text-decoration:none;border-bottom:2px solid #fbf24a}
@media(max-width:880px){.g{grid-template-columns:1fr}.h{font-size:24px}.v{min-height:auto;padding:24px}.v .t{font-size:28px}}</style></head><body><section class="s">
<header class="hd"><div class="k">VOLT/22 — built different</div><h1 class="h">Six things we won't compromise on.</h1></header>
<div class="g">
<div class="v"><div class="num">/01</div><div><div class="t">Made in <em>USA</em></div><div class="ds">Frames welded in Boulder. Wheels built in Boulder. Boxes packed in Boulder. Period.</div></div><div class="lbl">Manufacturing</div></div>
<div class="v ac"><div class="num">/02</div><div><div class="t">Carbon, not <em>aluminum</em></div><div class="ds">Lighter, stiffer, stronger. Lifetime warranty. Crash replacement, no questions.</div></div><div class="lbl">Frame</div></div>
<div class="v"><div class="num">/03</div><div><div class="t">Service for <em>five years</em></div><div class="ds">Free, mail-in, no questions. We tune it, ship it back, every six months if you want.</div></div><div class="lbl">Service</div></div>
<div class="v"><div class="num">/04</div><div><div class="t">No <em>app required</em></div><div class="ds">Battery indicators on the bike. Settings on the bike. Software updates over USB-C, not a phone.</div></div><div class="lbl">Software</div></div>
<div class="v"><div class="num">/05</div><div><div class="t">Right to <em>repair</em></div><div class="ds">Open schematics. Parts available individually. Replaceable battery cells. Built to last 15 years.</div></div><div class="lbl">Repair</div></div>
<div class="v"><div class="num">/06</div><div><div class="t">No dark <em>patterns</em></div><div class="ds">No subscriptions. No locked features. No data collection. The bike is yours when you buy it.</div></div><div class="lbl">Ethics</div></div>
</div>
<div class="f"><div>Boulder, Co. · Since 2018</div><div><a href="#">Read the full charter →</a></div></div>
</section></body></html>
06

About as FAQ

Conversational

Frames the about page as the questions a real visitor would actually ask. Direct, useful, anti-marketing. For services with frequently misunderstood offerings.

Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,500;1,6..72,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:#fdf8f0;color:#2a2520;line-height:1.55}
.s{padding:48px 40px;max-width:780px;margin:0 auto}
.k{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#c9956a;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.k::before{content:"";width:32px;height:1px;background:#c9956a}
.h{font-family:'Newsreader',serif;font-weight:300;font-size:56px;line-height:1.05;letter-spacing:-.015em;margin-bottom:14px}
.h em{font-style:italic;color:#c9956a}
.sb{font-size:16px;color:#5a5347;line-height:1.6;margin-bottom:36px;max-width:50ch}
.qa{display:flex;flex-direction:column;gap:0;border-top:1px solid #e8d9bd}
.q{padding:24px 0;border-bottom:1px solid #e8d9bd}
.qq{font-family:'Newsreader',serif;font-style:italic;font-size:24px;color:#2a2520;font-weight:400;line-height:1.3;margin-bottom:12px}
.qq em{color:#c9956a}
.qa-row{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start}
.qa-row .m{font-family:'Newsreader',serif;font-style:italic;color:#c9956a;font-size:24px;line-height:1.2;flex-shrink:0}
.aa{font-size:16px;line-height:1.65;color:#3a352e}
.aa b{color:#2a2520;font-weight:500}
.aa em{font-style:italic;color:#c9956a}
.aa a{color:#2a2520;text-decoration:underline;text-decoration-color:#c9956a;text-decoration-thickness:2px;text-underline-offset:3px}
.f{margin-top:36px;padding-top:24px;border-top:2px solid #c9956a;text-align:center}
.f p{font-family:'Newsreader',serif;font-style:italic;font-size:18px;color:#5a5347;margin-bottom:14px}
.btn{padding:13px 28px;background:#2a2520;color:#fdf8f0;border:none;font-family:inherit;font-weight:500;font-size:14px;border-radius:999px;cursor:pointer}
.btn:hover{background:#c9956a}
@media(max-width:780px){.s{padding:32px 20px}.h{font-size:36px}.qq{font-size:20px}}</style></head><body><section class="s">
<div class="k">About — the actual answers</div>
<h1 class="h">Some <em>real questions</em>, answered honestly.</h1>
<p class="sb">Marketing pages tend to answer the wrong questions. These are the ones people actually ask before they call us — answered the way I'd answer them on the phone.</p>
<div class="qa">
<div class="q"><div class="qa-row"><span class="m">Q.</span><div class="qq">Are you actually <em>licensed</em>, or is this just a side hustle?</div></div><div class="qa-row"><span class="m">A.</span><p class="aa">Yes — <b>licensed in Florida since 2014</b>, FL TC #8841. This is my full-time work. I have three full-time TCs and one admin. We close roughly 80 transactions a month between us.</p></div></div>
<div class="q"><div class="qa-row"><span class="m">Q.</span><div class="qq">What does it cost?</div></div><div class="qa-row"><span class="m">A.</span><p class="aa">Flat $495 per closed transaction, paid at closing through escrow. Nothing if it doesn't close. <em>No subscription, no monthly minimums.</em> Volume pricing for agents over 30 closings a year.</p></div></div>
<div class="q"><div class="qa-row"><span class="m">Q.</span><div class="qq">When do you actually <em>get involved</em>?</div></div><div class="qa-row"><span class="m">A.</span><p class="aa">As soon as you go under contract. We open the file, build the timeline, send out the first batch of disclosures, and coordinate the inspection — usually within 2 hours. <b>Faster if it's a tight closing.</b></p></div></div>
<div class="q"><div class="qa-row"><span class="m">Q.</span><div class="qq">Can my buyer/seller <em>actually reach you</em>?</div></div><div class="qa-row"><span class="m">A.</span><p class="aa">Yes. We email everyone a "what to expect" packet on day one with our direct numbers. Most clients call once, twice maybe, just to feel heard. <em>That's part of the service.</em></p></div></div>
<div class="q"><div class="qa-row"><span class="m">Q.</span><div class="qq">What happens when something <em>goes wrong</em>?</div></div><div class="qa-row"><span class="m">A.</span><p class="aa">It does, regularly — title issues, repair credits, lender delays. <b>That's actually when we earn our fee.</b> We escalate to the right party, document everything, and keep your client informed. Most issues we catch and fix before you even know.</p></div></div>
<div class="q"><div class="qa-row"><span class="m">Q.</span><div class="qq">Do you work <em>weekends</em>?</div></div><div class="qa-row"><span class="m">A.</span><p class="aa">Office hours are M–F 9–5 ET. Urgent items handled outside of that — but only when truly urgent. <em>The work-life thing matters to us</em>, and frankly to the work.</p></div></div>
</div>
<div class="f"><p>Still have a question?</p><a class="btn" href="#">Send it directly →</a></div>
</section></body></html>
Copied