Primary
Brand actions and key highlights
- primary-main
- primary-light
- primary-dark
- primary-contrast
Each card relies purely on palette(tone-variant) helpers. Values are computed at runtime from the applied CSS variables.
.my-element {
background-color: palette(primary-main);
color: palette(primary-contrast);
}Click on any color swatch to update the UX-DSL token.
Brand actions and key highlights
Complementary elements and secondary CTAs
Muted accents and tertiary surfaces
Positive states and confirmations
Informational surfaces and banners
Cautionary or pending actions
Destructive flows and error states
High-contrast backgrounds
Structure, frames, and dividers
Raised backgrounds and cards
Base canvas + sheets