FoundationColor
Palette colors
Palette (basic) color tokens—CSS variables, Tailwind, and when to prefer semantic tokens.
Accessing token values
Palette tokens are available as CSS variables, for example var(--color-steel-12):
.my-class {
background-color: var(--color-steel-12);
}For detailed guidance on Tailwind theme variables and utility classes, see the Tailwind theme documentation.
Important!
Direct use of palette and core colors is not recommended, except when implementing your own components according to experience system guidelines and core color tokens do not cover your case.
Available palette tokens
Interactive table: filter by name, click a swatch to copy token names and resolved light/dark values.
Loading color tokens…