# Design

## Hierarchy
- One H1 per page. Section titles describe the content, not the component ("Billing history", not "Table").
- Use size and weight for hierarchy before color. Muted text (`text-muted-foreground`) for supporting copy only.

## Spacing
- Use the 4 px scale. Group related controls with 8–12 px, separate groups with 24–32 px, sections with 64–96 px.
- Align to a single left edge per column. Avoid centered body text longer than two lines.

## Color
- Neutral surfaces, one accent (`--brand`) for the primary action and focus of attention. Status colors only for status.
- Charts use `--chart-1` … `--chart-5` in order; never encode meaning in color alone.

## Type
- Body 15–16 px, line height 1.6. Labels 13–14 px. Mono for code, IDs, keys and numbers that align.
- Use `tabular-nums` for numbers that update or line up in columns.

## Surfaces
- Cards: `rounded-xl border border-border bg-card`. Do not nest cards more than one level.
- Use borders or background shifts to separate, not both plus a shadow.