Lists are real tables. Each row's name is a link stretched across the row: one click, Enter or a screen reader's link list opens it (as-is rows only opened on double click and weren't reachable by keyboard). Selecting is a checkbox; the bulk bar appears when anything is selected.
Filter cards
The first draft, for pages that aren't lists yet. On list pages, summary cards replace them: a status card can be pressed again to clear, and the insight card carries a figure. One tab stop; arrow keys switch.
Data table
The table on its own. On a list page it sits in the table card, which adds the header, pinned columns, sideways scroll and phone rows; bulk actions move to the floating bar.
| Job | Status | Total price | Owner | ||
|---|---|---|---|---|---|
Mykola • Job $28,729 |
Booked | $28,729.22 | 15 Sep 2026, 3:59pm | Hello Mublejam | |
New estimate Mykola Khvylovy |
Pending | $833.69 | 15 Sep 2026, 1:53pm | Hello Mublejam | |
| In progress | $2,973,344.19 | 8 Sep 2026, 4:40pm | Dan Chong | ||
| Draft | $0.00 | 24 Aug 2026, 9:52pm | Unassigned |
Row 2 is selected, row 3 shows hover. Resize the window: status hides below 768px, date and owner below 1024px.
Cards
Recommended actions
Pipeline
General company settings
Avatars
Eight colours, all with white initials above 4.5:1 (as-is generated colours included a bright green that failed). Pick by a stable hash of the person's id.
Thumbnails
A photo of a thing, such as a catalog item (D55). What sits before a row's name is a slot: an avatar for a person or company (round), a thumbnail for a thing (square), an icon, or nothing, page by page. The photo lies over a placeholder, the image icon on a quiet tint, so while it loads, where there's none, or when its link breaks, the placeholder shows. A list with photos keeps them on phones, down the left of each item; a list without any drops the slot there, as it drops avatars.
photo · empty · broken link24 · 40 · 64. Photo: Amaxson, public domain, Wikimedia Commons