Components are commoditized. Every system has a Button. The differentiation lives in the layer above: how the system tells you to compose Button + Input + Banner into a multi-step form, or Modal + ConfirmInput + DangerButton into a destructive-action flow.
Patterns are harder to write up than components. They require opinions about content, sequence, and edge cases. That's why most systems duck them. The systems that don't — Polaris, Carbon, Stripe, Mailchimp — are the ones designers actually study.
The patterns that earn their docs
Forms: validation timing, error placement, progressive disclosure, save-and-continue, async-server-error recovery. Polaris's FormLayout is the reference.
Tables: sortable, filterable, with bulk actions, with row expansion, with empty/loading/error states. Carbon's DataTable and Polaris's IndexTable both ship serious depth here.
Confirmations and destructive actions: typed confirmations for delete, undo affordances, consequence-preview before commit. Stripe's ConfirmDialog is unusually rigorous.
Empty states: first-run, no-results-after-filter, lapsed-user. Mailchimp's empty-state catalog is the most-cited.
Voice as a pattern layer
Mailchimp's content style guide and Shopify's voice-and-tone guidance treat product copy as a system-level concern, not a per-team afterthought. Buttons read consistently because the system says how buttons read.
If your product has more than one writer touching UI, voice belongs in the system.
Document the negative space
Patterns are as much about what NOT to do. Polaris's pattern docs explicitly call out 'don't use this for marketing surfaces.' Atlassian distinguishes between admin and end-user patterns. Naming the wrong applications saves more debugging than naming the right ones.
- 01Patterns are above components — the composition layer where opinions live.
- 02Forms, tables, confirmations, empty states are the patterns that earn full documentation.
- 03Voice and tone is a pattern layer too if more than one writer touches your UI.
- 04Document what the pattern is NOT for as carefully as what it is for.
Polaris (Shopify)
Form, table, and admin patterns documented at depth — the reference for transactional UI.
Mailchimp Design System
Voice, tone, and empty-state patterns done with editorial discipline.
Stripe Design System
Money-moving forms and irreversible-action patterns — the reference for fintech.