Getting started

Colors

Minium builds its colors from Radix Colors. This page shows every Radix scale that the color themes use. To choose a theme or change a color, see Customization.

Scales, roles, and semantic tokens

Minium colors pass through three levels:

  1. Scale: A Radix color scale, such as blue or sand. Each scale has 12 solid steps and 12 alpha steps, with light and dark values.
  2. Role: A purpose, such as primary or neutral. A theme assigns one scale to each role, for example --primary-9.
  3. Semantic token: A token that components use, such as --color-primary or --color-surface. Each semantic token reads a role step.

Components and semantic tokens never reference scale names. A theme changes colors by assigning different scales to roles. See Change color roles for the role list and steps.

Full solid palette

The table lists the solid steps of every scale. The swatches follow the active light or dark mode.

Alpha fill colors

Minium CSS uses partially transparent color tokens for many fill surfaces, such as --color-fill, --color-primary-fill, and --color-accent-fill. Partially transparent fills blend with their background. Components can therefore use the same fill tokens across different surfaces without separate hard-coded colors.

The following example shows how the same default and accent badges blend with four surface levels.

Learn more about Radix Colors

See the Radix Colors documentation for scale definitions, token naming, accessibility guidance, alpha colors, and Display P3 support.