Pattern catalog · 10 libraries operational
v1.078 patternsSpring 2026
Web Build Templates
Pattern Reference · Internal Use
§ Catalog · 10 of 10 loaded

Pick a pattern. Copy the source.

Libraries
10live
Patterns
78total
Build
v1.0
Updated
Q226

A working library of web patterns we draw from on every build — heroes, footers, pricing, contact, and the rest. Pick, copy, customize.

How this is meant to be used: when starting a new client build, scan the relevant library, pick the pattern that fits the client's voice, and copy the source HTML directly. Each pattern is self-contained — fonts, styles, markup all in one file.

Patterns commit to a clear aesthetic direction rather than offer generic SaaS defaults. The goal is to skip the "centered headline + screenshot" cliché on every project.

2026-001Featured

Heroes library

Eighteen hero patterns spanning editorial, brutalist, animated, atmospheric, and more. The largest library — every project starts here.

EditorialBrutalistTypographicAnimated+10 more
2026-002Active

Footers

From the editorial masthead to the brutalist sitemap. Footers that aren't dumping grounds for links — each a clear voice piece.

EditorialBrutalistFunctionalMinimal+5
2026-003Active

Pricing

Three-tier classics, comparison tables, calculators, prose pricing, pay-what-you-want, and process-based engagements.

Card-basedTabularCalculatorEditorial
2026-004Active

Contact pages

Calendar booking, conversation flows, founder letters, single email fields. The contact page sets the tone of the relationship.

FunctionalMinimalEditorialConversational
2026-005Active

About

Founder letters, team grids, numbered manifestos, photo essays, values posters, about-as-FAQ. Skip the timeline cliché.

EditorialVisualTypographicConversational
2026-006Active

Services

Typographic lists, vs-the-usual comparisons, process steps, decision trees, service menus. Skip the three-icon-grid.

TypographicComparisonSequentialVisual
2026-007Active

Testimonials

Featured pull-quotes, Slack-style threads, metrics-led cards, marquee bands, logo walls, editorial case excerpts.

EditorialConversationalData-ledAnimatedVisual
2026-008Active

Navigation

Side rails, command palettes, drawer-only, bottom-pinned docks, editorial top bars. The nav signals what kind of site this is.

PersistentPower-userReductiveModernClassic
2026-009Active

FAQ

Searchable accordions, prose Q&A, chat conversations, decision trees, topic cards. Pick based on the buyer's actual question shape.

ClassicEditorialConversationalFunctionalVisual
2026-010Active

Forms

Multi-step wizards, one-question-at-a-time, inline-prose forms, card sections, calculator forms. The form factor is form psychology.

SequentialConversationalFunctional

Use the source.

Each pattern includes "View code" and "Copy HTML" buttons. The HTML is self-contained — fonts, styles, markup, all in one file. Paste it into your build and customize from there. fonts.googleapis.com requests are inline; no extra dependencies.

Filter by vibe.

Each library has filter chips at the top — Editorial / Brutalist / Minimal / Animated, etc. Useful when you've decided on a tone but haven't picked a pattern yet. The chip counts tell you how much variation exists in each direction.

Mix & match.

Patterns aren't matched sets. An editorial hero pairs fine with a brutalist footer — the contrast often works better than aesthetic consistency. Pick what serves each section's job, not what feels cohesive on paper.