Browse all of Kata
Patterns
The shapes screens are built from: tab homes, lists, forms, sheets, states and celebration.
- ButtonsPrimary, secondary, link — and the one-filled-primary budget.
- The tab homeHero-led or index-led, and how to tell which one this tab is.
- The list screenThe row anatomy, and where hairlines go.
- The tile gridTriage plus one tap per person: attendance, check-in, a queue.
- The detail screenOne record, in full. The second most common shape in the app, after the list.
- NavigationWhere a screen sits, how you get back, and what is allowed to be a modal.
- FormsFields, validation timing, error presentation, submit states.
- Pickers, selects, and sheetsChips, sheets, and the native picker — chosen by option count.
- Search and filterFinding one thing among many, and narrowing a list you are already looking at.
- Serious and consequential actionsLegal records, alerts, money, and anything that cannot be undone.
- Direct manipulationDrag, drop, reorder — and the keyboard equivalent that is not optional.
- BoardsColumns of cards, one column per stage, where moving the card is the edit.
- Empty, loading, errorThe three states every screen owes the person looking at it.
- Notifications and messages to the personPush, in-app banners, toasts, and badges — everything the app says without being asked.
- ProgressStreaks, badges, belts — Duolingo's mechanics in Konjo's voice.
- Celebration — the promotion certificateThe one moment the app is allowed to be loud about a person.