Triage plus one tap per person: attendance, check-in, a queue.
Part of the Konjo design language. The laws in the spine apply here unless this chapter contradicts them.
For a screen whose job is triage plus one tap per person — taking attendance, checking in a roster, marking a queue. It replaces a list where the instructor needs to see everyone at once and act on the exceptions.
Take attendance display 34/800
Adult Karate · 6:30 PM · 9 of 12 caption 13
┌────────────────────────────────────┐
│ ● 5 need attention → │ tonal row; tapping it filters the grid
└────────────────────────────────────┘
┌─────────┐ ┌─────────┐ ┌─────────┐
│ ● ↘ │ │ ● ★ │ │ ○ ⚠ │ 111×92pt, 8pt gaps, 3 across at 390pt
│ Priya │ │ Marcus │ │ Ana │ given name `rowTitle` 16/600, family `micro` 12/500
│ Raman │ │ Webb │ │ Torres │ belt dot top-left, status glyph top-right
└─────────┘ └─────────┘ └─────────┘
INK INK WHITE ink = done, white = still missing
The fill is ink, never red. Checked-in is the common state; making it red would put nine red elements on screen and spend the budget nine times. Ink reads as settled, and it leaves red meaning something.
Status glyphs are bare, never chipped. A tinted chip fill computes to 1.14:1 against a white tile and disappears. A bare glyph in its semantic colour clears 3:1 on both tile states — and every colour it needs is a token Konjo already ships.
Two tiers, one count. Only the attention tier feeds "N need attention"; good news shows its glyph but never inflates the number, so the count stays worth trusting.
| Priority | Status | Glyph | Tier |
|---|---|---|---|
| 1 | Safety flag / accommodation | warning |
Attention — the screen's one red role |
| 2 | Waiver missing or outdated | file-text |
Attention |
| 3 | Attendance declining | trend-down |
Attention |
| 4 | Payment past due | currency-dollar |
Attention |
| 5 | Test-ready | star |
Good news |
| 6 | Birthday | cake |
Good news |
Ordered by what it costs not to know, then by whether the mat is where it can be fixed. Waiver outranks payment because the instructor is the last line before someone trains unwaivered; payment cannot be settled on the mat at all.
One glyph per tile — highest priority wins. Two glyphs in a 111pt corner is cramped and
ambiguous. The accessibilityLabel enumerates everything regardless, so a screen reader
loses nothing: "Ana Torres, white belt, not checked in, safety flag, waiver missing."
Meaning comes from shape, not colour — six distinct glyphs, so the grid works for a colour-blind instructor. That is the argument for this pattern, not a concession.
The attention row is the legend. Icons with no key are anti-pattern #18. Tapping the row filters the grid to exactly those students, which teaches the glyphs by association without a key nobody would read.
Belt dots carry a hairline ring. A white belt on a white tile is 1.2:1 — invisible. The ring makes the lightest rank legible on the lightest surface, and it costs nothing on the darker ranks.