Colors

The Material 3 Expressive colour scheme — both light and dark. Every component references these tokens; there are no hardcoded colours in the library.

Open in Figma

Using a colour token

Components reference CSS custom properties directly — no JS colour helpers, no Tailwind, no preprocessors.

Every component in the library reads from these tokens. Light and dark mode switch automatically via prefers-color-scheme and [data-theme].

.my-button {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-full);
}

Inline in markup   This block uses --color-surface-container directly.
 <div style="background: var(--color-surface-container); color: var(--color-on-surface)">
  ...
</div>

Primary

Token	Light	Dark
`--color-primary`	`#354E9E`	`#4F66C6`
`--color-on-primary`	`#FFFFFF`	`#FFFFFF`
`--color-primary-container`	`#C0CCF2`	`#3043A1`
`--color-on-primary-container`	`#3043A1`	`#C0CCF2`

Secondary

Token	Light	Dark
`--color-secondary`	`#2B2B2B`	`#FFFFFF`
`--color-on-secondary`	`#FFFFFF`	`#2B2B2B`
`--color-secondary-container`	`#C2C2C2`	`#2B2B2B`
`--color-on-secondary-container`	`#2B2B2B`	`#C2C2C2`

Tertiary

Token	Light	Dark
`--color-tertiary`	`#FF7900`	`#FF7900`
`--color-on-tertiary`	`#FFFFFF`	`#FFFFFF`
`--color-tertiary-container`	`#FFEAC2`	`#FFEAC2`
`--color-on-tertiary-container`	`#FF7900`	`#FF7900`

Error

Token	Light	Dark
`--color-error`	`#D93A47`	`#D93A47`
`--color-on-error`	`#FFFFFF`	`#FFFFFF`
`--color-error-container`	`#FFD0D3`	`#FFD0D3`
`--color-on-error-container`	`#B82330`	`#B82330`

Success

Token	Light	Dark
`--color-success`	`#51A171`	`#51A171`
`--color-on-success`	`#FFFFFF`	`#FFFFFF`
`--color-success-container`	`#DCECE3`	`#DCECE3`
`--color-on-success-container`	`#51A171`	`#51A171`

Surface

Token	Light	Dark
`--color-surface`	`#FAFAFA`	`#1D1D1D`
`--color-on-surface`	`#1D1D1D`	`#FFFFFF`
`--color-surface-dim`	`#F2F2F2`	`#1D1D1D`
`--color-surface-bright`	`#FFFFFF`	`#2B2B2B`
`--color-surface-container-lowest`	`#FFFFFF`	`#353535`
`--color-surface-container-low`	`#FAFAFA`	`#4B4B4B`
`--color-surface-container`	`#EBEBEB`	`#353535`
`--color-surface-container-high`	`#C2C2C2`	`#A0A0A0`
`--color-surface-container-highest`	`#FFFFFF`	`#353535`

Outline

Token	Light	Dark
`--color-on-surface-variant`	`#353535`	`#FAFAFA`
`--color-outline`	`#4B4B4B`	`#F2F2F2`
`--color-outline-variant`	`#6B6B6B`	`#EBEBEB`

Inverse

Token	Light	Dark
`--color-inverse-surface`	`#1D1D1D`	`#FAFAFA`
`--color-inverse-on-surface`	`#FAFAFA`	`#1D1D1D`
`--color-inverse-primary`	`#C0CCF2`	`#3043A1`