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 |
| 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 |
| 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 |
| Type scale | --md-sys-typescale-* | Font, size, weight, line height and tracking for the fifteen roles, and --md-ref-typeface-* | Typography |
| State layers | --md-sys-state-* | Hover, focus, pressed and dragged opacities | State layers |
| Motion | --md-sys-motion-* | Seven easing curves and sixteen durations, short1 to extra-long4 | Transitions |
| Shape | --md-sys-shape-corner-* | The corner scale from none to full | Shapes |
| Elevation | --md-sys-elevation-level* | Shadows for levels 0 to 5 and 1-half | Elevation |
| Stacking | --expressive-z-* | The z-index order of fixed and floating surfaces | Elevation |
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>