About this catalogue

Editorial angle

This site studies product UI the way an annotated atlas studies cities. Each page focuses on a single pattern, pulls together a small set of good references, and explains what changes when teams name or implement the pattern differently.

The goal is not completeness. The goal is useful contrast.

How pages are structured

Every component page combines three layers:

1. A short editorial framing section
2. Tagged examples from public systems
3. A compact list of resources and naming data

That shape keeps the catalogue readable when you jump between Buttons, Form Field, or a broader list of design systems.

Why static content

The entire site is file-backed on purpose. Static content keeps the build exportable, reviewable in pull requests, and easy to diff over time.¹

It also means the search index, route summaries, changelog, and filter data can be generated without a database or a long-running API layer.

What counts as a good reference

A linked system earns its place when it exposes enough material to teach something concrete:

• working components
• implementation clues
• naming consistency
• guidance on when to use the pattern

The directory is intentionally biased toward systems that show both polished surfaces and the reasoning around them.

Footnotes

1. Static delivery also makes quality checks simpler because broken links, missing assets, and schema drift can all fail the build. ↩