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

--color-primary on --color-on-primary

--color-primary-container on --color-on-primary-container

Secondary

--color-secondary on --color-on-secondary

--color-secondary-container on --color-on-secondary-container

Tertiary

--color-tertiary on --color-on-tertiary

--color-tertiary-container on --color-on-tertiary-container

Error

--color-error on --color-on-error

--color-error-container on --color-on-error-container

Success (placeholder)

--color-success on --color-on-success

--color-success-container on --color-on-success-container

Surface

--color-surface on --color-on-surface

--color-surface-dim on --color-on-surface

--color-surface-bright on --color-on-surface

--color-surface-container-lowest on --color-on-surface

--color-surface-container-low on --color-on-surface

--color-surface-container on --color-on-surface

--color-surface-container-high on --color-on-surface

--color-surface-container-highest on --color-on-surface

Outline

--color-outline on --color-surface

--color-outline-variant on --color-surface

--color-on-surface-variant on --color-surface

Inverse

--color-inverse-surface on --color-inverse-on-surface

--color-inverse-on-surface on --color-inverse-surface

--color-inverse-primary on --color-inverse-surface