Patterns
Pages are compositions of the kit
A list page, a detail page, a settings section, an empty state and an error state each have one shape. Copy the shape; fill in the resource.
List page
Title and one-line subtitle on the left, the single primary action on the right. Below: filters (line tabs) left, search right. The table sits in an outline card and spans the full width; status is a Badge, numbers are right-aligned and tabular, row actions live at the end of the row. With no rows, the table is replaced by an EmptyState that repeats the primary action.
Domains
Send from your own address.
Detail page
The object's name as the title (mono when it is a machine value), one meta line under it, secondary actions on the right. A meta grid of overline label + value comes first, then one filled DetailSection per topic. Anything destructive is last, in a destructive-tone card.
acme.com
Verified · added 2 months ago
- Status
- Verified
- Region
- EU (Frankfurt)
- Sent (30d)
- 12,757
- Bounce rate
- 0.4%
Settings section
One filled Card per topic: title + description in the header, fields with labels above, Save right-aligned in the footer. Fields are h-8 pills; a two-column grid on wide screens collapses to one.
Empty and error states
Icon tile, a title that names what's missing, one sentence of why it matters, at most two actions (the first repeats the page's primary action). Errors say what happened and offer Retry.
Couldn't load contacts
The request timed out. Your data is safe.