Tokens Beyond Colour

Chapter 16 locked tokens to colour on purpose. This chapter lifts that limit for spacing, sizing, and radius.

Harbor card

Padding, max-width, and radius all come from tokens — change :root once to retune the system.

  • --space-6 / --space-8
  • --max: 40rem
  • --radius: 0.75rem
2
3
4
6
8

Important CSS

:root {
  --space-4: 1rem;
  --space-6: 1.5rem;
  --max: 40rem;
  --radius: 0.75rem;
}

.token-card {
  max-width: var(--max);
  padding: var(--space-6);
  border-radius: var(--radius);
}