Palette

Semantic color mappings for primary, secondary, and surface roles.

Interactive Demo: Palette

Background

Tone

Variant

Text

Tone

Variant

Live Palette Preview

CSS Usage

.my-element{

background:palette(primary-main);

color:palette(primary-contrast);

}

Token-Aware Colors: Use palette() to access semantic colors (primary, success, surface) and their variants (main, light, dark).

Palette Explorer

Brand actions and key highlights

main

light

dark

contrast

Primary

Secondary

Tertiary

Success

Info

Warning

Error

Dark

Neutral

Light

Surface

Global Palette

Click on any color swatch to update the UX-DSL token.