normal variant in light mode

The normal variant is the default variant.

A variant binds named colors (for example `--color-named-*`) to semantic colors (`--ddi-color-*`).

Base colors

Each variant has an alt background, safe for small text.

Background and text colors

Borders

Buttons

alt variant in light mode

The alt variant is used for adding variation, without accentuating its content.

A variant binds named colors (for example `--color-named-*`) to semantic colors (`--ddi-color-*`).

Base colors

Each variant has an alt background, safe for small text.

Background and text colors

Borders

Buttons

elevated variant in light mode

The elevated variant is used for elevating content.

A variant binds named colors (for example `--color-named-*`) to semantic colors (`--ddi-color-*`).

Base colors

Each variant has an alt background, safe for small text.

Background and text colors

Borders

Buttons

inverted variant in light mode

The inverted variant is used for content on dark backgrounds.

A variant binds named colors (for example `--color-named-*`) to semantic colors (`--ddi-color-*`).

Base colors

Each variant has an alt background, safe for small text.

Background and text colors

Borders

Buttons

normal variant in dark mode

The normal variant

The normal variant is the default variant.

A variant binds named colors (for example `--color-named-*`) to semantic colors (`--ddi-color-*`).

Base colors

Each variant has an alt background, safe for small text.

Background and text colors

Borders

Buttons