Data display & lists
In review
Components that present data. The scrollable list and its row grammar are the backbone; everything else hangs off the same rules.
One row grammar
Section titled “One row grammar”Every row reads in the same four zones, left to right:
- Leading: avatar, icon, status dot, or checkbox.
- Primary: the title / main label.
- Supporting: secondary text under or beside the primary.
- Trailing: value, timestamp, chevron, or action.
Consistency across list item, table, and tree is what makes the data scannable.
Density & depth
Section titled “Density & depth”- Pick a density (comfortable / compact) per surface and hold it: don’t mix row heights in one list.
- Rows are flat. Depth comes from the container they sit in, not from lifting each row (see Elevation & depth).
- Categorical data (file types, model types, families) uses the dedicated categorical token ramp, never brand cyan, so cyan stays the single brand anchor.
- Chips / tags are the other place the full pill radius is allowed.
Components
Section titled “Components”| Component | Status |
|---|---|
| List item | ⚠ in review |
| Chip | ⚠ in review |
| List / virtualized list | ▢ queued |
| Table / data grid | ▢ queued |
| Tree / file tree | ▢ queued |
| Avatar | ▢ queued |
| Badge / tag | ▢ queued |
| Stat / metric card | ▢ queued |
| Chart / sparkline | ▢ queued |
| Key-value / description list | ▢ queued |
| Code block | ▢ queued |
| Diff viewer | ▢ queued |
| Markdown content | ▢ queued |
| Timeline / activity feed | ▢ queued |