# Design tokens

> Every token family in one place: color, type, state, motion, shape, elevation and stacking.

## About

Every design decision in the framework is a CSS custom property, so you can override it at runtime without a rebuild. System tokens use Material 3 names (`--md-sys-*` and `--md-ref-*`). Components read them through their own `--md-comp-*` tokens, which you set to change one component at a time.

## Token families

| Family | Prefix | What it holds | Details |
| --- | --- | --- | --- |
| Color roles | `--md-sys-color-*` | 45 roles, such as `primary`, `on-surface` and `outline-variant`. Each has a `-light` and `-dark` pair | [Color](/color.html.md) |
| Tonal palettes | `--md-ref-palette-*` | Tones 0 to 100 of the primary, secondary, tertiary, neutral, neutral-variant and error ramps, generated from `--md-source` | [Themes](/themes.html.md) |
| Contrast levels | `contrast="medium" | "high"` | This is an attribute, not a token. It moves accents, outlines and `on-surface-variant` to higher-contrast tones | [Themes](/themes.html.md#contrast) |
| Type scale | `--md-sys-typescale-*` | Font, size, weight, line height and tracking for the fifteen roles, and `--md-ref-typeface-*` | [Typography](/typography.html.md) |
| State layers | `--md-sys-state-*` | Hover, focus, pressed and dragged opacities | [State layers](/state-layers.html.md) |
| Motion | `--md-sys-motion-*` | Seven easing curves and sixteen durations, `short1` to `extra-long4` | [Transitions](/css-transitions.html.md#motion-tokens) |
| Shape | `--md-sys-shape-corner-*` | The corner scale from `none` to `full` | [Shapes](/shapes.html.md#corner-scale) |
| Elevation | `--md-sys-elevation-level*` | Shadows for levels 0 to 5 and 1-half | [Elevation](/shadow.html.md) |
| Stacking | `--expressive-z-*` | The z-index order of fixed and floating surfaces | [Elevation](/shadow.html.md#stacking) |

## Overriding

Set a system token on `:root` to change every component, or on any element to change only what is inside it. Each token is declared on `:root` and `:host`, so the same overrides work when a shadow root adopts the stylesheet.

```
<style>
  :root {
    --md-source: #006495;                   /* re-themes every color role */
    --md-sys-shape-corner-medium: 8px;      /* squarer cards and menus */
    --md-sys-motion-duration-short4: 150ms; /* faster 200ms transitions */
  }
  .dense-panel { --md-sys-elevation-level1: none; }
  .my-card { --md-comp-card-container-shape: 0; }  /* one component */
</style>
```