Material Design Token System — Complete Color and Spacing Tokens

Material Design Token Architecture

Google's Material Design system defines a layered token architecture that separates reference tokens (raw color values), system tokens (role-based mappings), and component tokens (specific UI element overrides). This guide focuses on building the first two layers as design tokens.

Reference Tokens

Reference tokens are your raw palette values. In Material Design 3, each color has 13 tonal values (0, 10, 20, ..., 100):

:root {
  --colors-primary-0: #000000;
  --colors-primary-10: #21005d;
  --colors-primary-20: #381e72;
  --colors-primary-40: #6750a4;
  --colors-primary-80: #d0bcff;
  --colors-primary-100: #ffffff;
}

System Tokens

System tokens map roles to specific reference token values. This decoupling is what makes theming possible:

:root {
  --colors-on-primary: var(--colors-primary-100);
  --colors-primary-container: var(--colors-primary-90);
  --colors-surface: var(--colors-neutral-98);
  --colors-on-surface: var(--colors-neutral-10);
}

Spacing in Material Design

Material Design uses a 4px base grid. Spacing tokens follow multiples of this base:

:root {
  --spacing-xs: 4px;   /* 1x */
  --spacing-sm: 8px;   /* 2x */
  --spacing-md: 16px;  /* 4x */
  --spacing-lg: 24px;  /* 6x */
  --spacing-xl: 32px;  /* 8x */
}

Typography Tokens

Material Design 3 defines a type scale with five categories (Display, Headline, Title, Body, Label), each having Large, Medium, and Small variants. Key tokens include font family, size, weight, line height, and letter spacing.

Benefits of this Approach

The layered architecture means changing your brand's primary color requires updating only the reference tokens. All system tokens and component tokens that depend on them update automatically, making wholesale theme changes trivial.