Spacing

A 4px-based scale for padding, gaps and layout. Values come from colorography/tokens.css.

Spacing tokens live in src/ui/colorography/tokens.css. Use them for padding, margins and gaps.

How to choose

Space	Typical use
4 to 8px	Between an icon and its label, inside chips and pills
12px	Between related controls in a row
16px	Card padding, gaps in a grid of cards
24px	Between groups inside a page section
32 to 48px	Between page sections
64 to 80px	Above and below a page's hero area

.recommendation-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
}

In Tailwind, use the default spacing utilities (gap-3 is 12px, p-4 is 16px). They follow the same 4px steps.

Group related things by putting less space between them than between groups.
Inside a component, keep padding the same on all sides unless the content is a single line of text.
Avoid 6px and 10px for new layout. They exist for a few compact components.