Browse all of Kata

The list screen

Source docs/design/patterns/index-list.mdMarkdown

The row anatomy, and where hairlines go.

Part of the Konjo design language. The laws in the spine apply here unless this chapter contradicts them.

Row anatomy, in this order — the thing you are looking for is first and boldest:

┌──────────────────────────────────┐
│ Primary line                     │  rowTitle 16/600
│ Secondary · metadata · joined ·  │  caption 13/400 text.secondary
└──────────────────────────────────┘   row ≥ 64pt, 1px inset hairline

Never invert it. Mindbody's class list puts "Mon 4/6 at 7:00am" above "Gentle Yoga with Sound Bath" in larger grey type — the eye lands on the timestamp instead of the class. That is the single clearest anti-pattern in the competitive set.

Hairlines are inset to the text edge, not full-bleed (Apple Health, WHOOP, Things 3 all do this). A group of ≤5 rows gets no hairlines at all — just 12pt between groups.