Colors

Palette

Each palette contains 12 colors that are used for various UI elements.

You can use the CSS variable --{name}-hue to change the color hue.

:root, ::backdrop {
  --gray-hue: 267;
}

Also, you can use the data-ui-palette="{name}" attribute to add color CSS variables to the element, which are already added to the root element.

This is useful when you want to change the hue of the color palette for a specific element.

Steps

The gray palette contains a specific --gray-0 shade, which is used for the main background of the site.

Backgrounds: 1-2

Used for the background of the site and containers.

Highlights: 3-5

Used for highlights and accents.

Borders: 6-8

Used for borders and dividers.

Solid backgrounds: 9-10

Used for the background of buttons and control elements.

Text: 11-12

Used for text and icons.

Usage

To use colors in CSS, use variables like var(--gray-11). To use colors with an alpha channel, use variables like var(--gray-a11).

.my-button {
  background-color: var(--accent-a2);
  color: var(--accent-a11);
}
.my-button:hover {
  background-color: var(--accent-a3);
}
.my-button:active {
  background-color: var(--accent-a4);
}

The gray palette also has variations for dark var(--gray-11-dark) and light var(--gray-11-light) themes.

Themes

All colors support light and dark themes.

If you want to use only the light theme, add the data-ui-mode="light" attribute.

If you want to use only the dark theme, add the data-ui-mode="dark" attribute.

If you want to invert the theme, add the data-ui-mode="reverse" attribute.