Browse all of Kata

The tile grid

Source docs/design/patterns/tile-grid.mdMarkdown

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.