Pattern glossary
16 patterns, measured rather than described.
Every gallery shows you a hero, a pricing table, a bento grid. This tells you what each one is, how it goes wrong, and the exact numbers to read off a page with the decoder, then points at the showcase collections that exhibit it and the tools that build it. Each entry ends with the next one to read.
Study the set as flashcards → derived from these entries, nothing extra
Layout 4
Hero section
A hero is the first screenful of a page, built to state what the site is and offer one action before the visitor scrolls.
LayoutBento grid
A bento grid is a dense, asymmetric grid of rounded cards in mixed sizes, named after the compartmented lunch box, used to present many features or facts at once without a list.
LayoutCard grid
A card grid presents a set of like items, each in its own bordered or shadowed container, arranged in equal columns that reflow with the viewport.
LayoutMega footer
A mega footer is a multi-column footer that lists most of a site's pages under labelled headings, so that any page can be reached from any other in one step.
Component 6
Pricing table
A pricing table lays out two to four plans side by side so a buyer can compare price, limits and features in one glance.
ComponentSticky navigation
A sticky navigation bar stays fixed to the top of the viewport as the page scrolls, so the primary links and the main action are always one movement away.
ComponentTestimonial wall
A testimonial wall is a dense masonry or grid of customer quotes, each with a name, a role and often an avatar, presented as a block of social proof rather than a single featured quote.
ComponentFeature comparison table
A feature comparison table sets a product against alternatives in a grid of checkable rows, one column per option, one row per property, with the product's own column visually promoted.
ComponentFAQ accordion
An FAQ accordion is a stack of questions where each answer is collapsed until its question is clicked, letting a page carry many answers without the length.
ComponentCall-to-action band
A call-to-action band is a full-width strip near the end of a page that restates the offer in one line and repeats the primary action, usually on a contrasting background so it reads as a distinct closing beat.
Surface 3
Dark mode
Dark mode is a second colour scheme in which the page background is dark and text is light, either as the default or as a toggle that follows the visitor's system preference.
SurfaceGlassmorphism
Glassmorphism is a surface treatment where a panel is translucent and blurs whatever sits behind it, like frosted glass, usually with a thin light border to define its edge.
SurfaceGradient mesh
A gradient mesh is a background built from several overlapping radial gradients, blurred or blended so the result reads as soft, organic colour with no visible edges.
Typography 1
State 2
Empty state
An empty state is what an interface shows when there is nothing to show yet: no items, no results, no history.
StateOnboarding checklist
An onboarding checklist is a short, visible list of setup steps shown to a new user, each marked done as it is completed, that guides the first session toward the moment the product becomes useful.
Entries are typed data in version control, dated when they were last edited, and every cross-link is checked on every build so no entry ends without a next step. Missing a pattern? Say which.