# Visual System

## Grouping

Use whitespace first. If a boundary is needed, wrap the whole related group in one border and use dividers inside the group. Avoid individual bordered list items unless each item is a separate object with independent actions.

## Typography

Use a compact three-line hierarchy inside content units:

| Role | Size | Weight |
|---|---|---|
| title | 14-16px | medium or semibold |
| description | 12-14px | regular |
| metadata | 11-12px | regular, muted |

Reserve hero-scale type for actual heroes or landing pages. Operational tools should use smaller, tighter headings.

## Surfaces

- Page sections are full-width bands or unframed layouts.
- Cards are for repeated items, modals, and genuinely framed tools.
- Do not put cards inside cards.
- Keep card radius at 8px or less unless the existing design system says otherwise.
- Status should usually be text color, not filled badges.

## Rhythm

Use an 8pt spacing rhythm. Align baselines and left edges. Do not use viewport-width font scaling. Letter spacing should remain normal unless a brand system explicitly defines it.