<!-- https://getkonjo.com/design/patterns/index-list · source: docs/design/patterns/index-list.md -->

# The list screen

The row anatomy, and where hairlines go.

> Part of the [Konjo design language](../konjo-design-language.md). 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.
