Design tokens
Components style themselves from --md-sys-* custom properties. Override a handful of roles on any element and everything inside re-themes.
Want your own palette? The theme builder generates every colour role from your seed colours and exports the CSS.
Color roles
| Role | Light | Dark |
|---|---|---|
--md-sys-color-primary | #64558f | #cebdfe |
--md-sys-color-on-primary | #ffffff | #35275d |
--md-sys-color-primary-container | #e8ddff | #4c3e76 |
--md-sys-color-on-primary-container | #4c3e76 | #e8ddff |
--md-sys-color-secondary | #615b71 | #cbc3dc |
--md-sys-color-on-secondary | #ffffff | #332e41 |
--md-sys-color-secondary-container | #e8def8 | #494458 |
--md-sys-color-on-secondary-container | #494458 | #e8def8 |
--md-sys-color-tertiary | #7d5261 | #efb8c9 |
--md-sys-color-on-tertiary | #ffffff | #492532 |
--md-sys-color-tertiary-container | #ffd9e3 | #633b49 |
--md-sys-color-on-tertiary-container | #633b49 | #ffd9e3 |
--md-sys-color-error | #ba1a1a | #ffb4ab |
--md-sys-color-on-error | #ffffff | #690005 |
--md-sys-color-error-container | #ffdad6 | #93000a |
--md-sys-color-on-error-container | #93000a | #ffdad6 |
--md-sys-color-background | #f9f9f9 | #131313 |
--md-sys-color-on-background | #1b1b1b | #e2e2e2 |
--md-sys-color-surface | #f9f9f9 | #131313 |
--md-sys-color-on-surface | #1b1b1b | #e2e2e2 |
--md-sys-color-surface-variant | #e2e2e2 | #474747 |
--md-sys-color-on-surface-variant | #474747 | #c6c6c6 |
--md-sys-color-surface-dim | #dadada | #131313 |
--md-sys-color-surface-bright | #f9f9f9 | #393939 |
--md-sys-color-surface-container-lowest | #ffffff | #0e0e0e |
--md-sys-color-surface-container-low | #f3f3f3 | #1b1b1b |
--md-sys-color-surface-container | #eeeeee | #1f1f1f |
--md-sys-color-surface-container-high | #e8e8e8 | #2a2a2a |
--md-sys-color-surface-container-highest | #e2e2e2 | #353535 |
--md-sys-color-outline | #777777 | #919191 |
--md-sys-color-outline-variant | #c6c6c6 | #474747 |
--md-sys-color-inverse-surface | #303030 | #e2e2e2 |
--md-sys-color-inverse-on-surface | #f1f1f1 | #303030 |
--md-sys-color-inverse-primary | #cebdfe | #64558f |
--md-sys-color-scrim | #000000 | #000000 |
--md-sys-color-shadow | #000000 | #000000 |
Typescale
| Style | Size | Line height | Weight | Sample |
|---|---|---|---|---|
display-large | 3.5625rem | 4rem | 400 | The quick brown fox |
display-medium | 2.8125rem | 3.25rem | 400 | The quick brown fox |
display-small | 2.25rem | 2.75rem | 400 | The quick brown fox |
headline-large | 2rem | 2.5rem | 400 | The quick brown fox |
headline-medium | 1.75rem | 2.25rem | 400 | The quick brown fox |
headline-small | 1.5rem | 2rem | 400 | The quick brown fox |
title-large | 1.375rem | 1.75rem | 400 | The quick brown fox |
title-medium | 1rem | 1.5rem | 500 | The quick brown fox |
title-small | 0.875rem | 1.25rem | 500 | The quick brown fox |
body-large | 1rem | 1.5rem | 400 | The quick brown fox |
body-medium | 0.875rem | 1.25rem | 400 | The quick brown fox |
body-small | 0.75rem | 1rem | 400 | The quick brown fox |
label-large | 0.875rem | 1.25rem | 500 | The quick brown fox |
label-medium | 0.75rem | 1rem | 500 | The quick brown fox |
label-small | 0.6875rem | 1rem | 500 | The quick brown fox |
Shape
none0extra-small4pxsmall8pxmedium12pxlarge16pxextra-large28pxfull9999px