Design tokens

Every component styles itself from --md-sys-* custom properties. Override a handful of roles on any element and everything inside re-themes.

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

none0

extra-small4px

small8px

medium12px

large16px

extra-large28px

full9999px