Overview¶

Design tokens are small, reusable design decisions that make up a design system's visual style. Tokens replace static values with self-explanatory names.

A design token consists of 2 things: * A code-like name, such as md.ref.palette.secondary90 * An associated value, such as #E8DEF8

The token's value can be one of several things: A color, typeface, measurement, or even another token.

Learn more

To learn more about the tokens used in Material design 3, read here

Color SchemesTypographyShape SystemState LayersAOSP ThemeContent ThemeKit Components

Primary Colors¶

Name	Color Code
Primary	`#8a4a65`
On Primary	`#ffffff`
Primary Container	`#ffd9e5`
On Primary Container	`#390721`

Secondary Colors¶

Name	Color Code
Secondary	`#705d0d`
On Secondary	`#ffffff`
Secondary Container	`#fce186`
On Secondary Container	`#231b00`

Tertiary Colors¶

Name	Color Code
Tertiary	`#595892`
On Tertiary	`#ffffff`
Tertiary Container	`#e2dfff`
On Tertiary Container	`#15134a`

Error & Background Colors¶

Name	Color Code
Error	`#ba1a1a`
On Error	`#ffffff`
Error Container	`#ffdad6`
On Error Container	`#410002`
Background	`#fff8f8`
On Background	`#21191c`

Name	Font Family	Weight
Display Large	Brand	Regular
Display Medium	Brand	Regular
Display Small	Brand	Regular
Headline Large	Brand	Regular
Headline Medium	Brand	Regular
Headline Small	Brand	Regular
Title Large	Brand	Regular
Title Medium	Plain	Medium
Title Small	Plain	Medium
Label Large	Plain	Medium
Body Large	Plain	Regular
Body Medium	Plain	Regular
Body Small	Plain	Regular

Corner Type	Value
None	NaN
Extra-small	NaN
Small	NaN
Medium	NaN
Large	NaN
Extra-large	NaN
Full	NaN

Primary Opacity¶

Opacity Level	Color Code
Opacity-08	`#65558f`
Opacity-12	`#65558f`
Opacity-16	`#65558f`

On Primary Opacity¶

Opacity Level	Color Code
Opacity-08	`#ffffff`
Opacity-12	`#ffffff`
Opacity-16	`#ffffff`

Name	Color Code
Primary	`#006b5f`
On Primary	`#ffffff`
On Primary Container	`#00201c`
Secondary Container	`#cde8e1`
Tertiary	`#456179`
On Surface	`#171d1b`
Surface Variant	`#dae5e1`
On Surface Variant	`#3f4946`
Outline	`#6f7976`
Outline Variant	`#bec9c5`
Scrim	`#000000`
Inverse On Surface	`#ecf2ef`
Surface Bright	`#f4fbf8`
Surface Container	`#e9efec`
Surface Container High	`#e3eae7`
Surface Container Highest	`#dde4e1`

Name	Color Code
Primary	`#69567f`
Primary Container	`#e6cefe`
Tertiary Container	`#ffc8dc`
On Tertiary Container	`#5f3346`
On Surface	`#1d1b1e`
On Surface Variant	`#4a454d`
Inverse On Surface	`#f5eff3`
On Primary Fixed	`#241338`

Component Name	Color Code
Component Container	`#f7faf8`
Variant Outline	`#bec9c5`
Camera	`#2e2e2e`