Patterns

Reusable groups of components that make up one interaction, shown in both themes. They are built from the foundations and components; the Figma library is the source for component details.

In this section

Register row Design 2.0.0, Built 2.0.0. One transaction: clear circle, date, payee, category, amount, actions.

Slim entry row Design 2.0.1, Built 2.0.0. Adding a transaction on wide screens, in one line.

Road to payday Design 1.0.0, Built 1.0.0. The runway in every state: on track, overdraw, no payday, trial, free.

First-time walkthrough Design 1.1.0, Built 1.1.0. Five coach marks on the home screen, then the Need help tip. Bottom sheets on phones.

Forms Planned. Labels, fields, errors, dialogs on phones.

Category picker Design 2.1.0, Built 2.1.0. Group headings, most used first, one flat list when searching.

Choose your categories Design 1.0.0, Not built. Setup step: which of these fit you.

Multiple accounts Design 1.2.0, Built 1.1.0. Accounts home, move money, paydays across accounts.

New version and What's new Design 1.0.0, Built 1.0.0. Reload bar, one-time What's new card, past notes in Help.

Loading states Design 1.0.0, Not built. Placeholders, refresh bar, busy buttons, slow-connection message.

Filtering Design 1.0.0, Built 1.0.0. Search plus All / Not cleared chips.

Tokens used here

Every role on this page comes from the Figma export (see Color). The ones these patterns lean on:

Role	Use here
`surface-action` + `text-inverse`	Add button
`surface-selected` + `text-inverse`	Selected segment, "All" chip
`surface-accent-subtle`	Unselected segment hover, selected row tint, suggestion highlight
`border-control`	Empty clear circle, field and segmented control outlines
`border-accent`	Selected-row bar, the entry row's left edge
`text-row` / `text-row-secondary`	Payee and amount / date and category