Semantic Colors
Purpose-mapped tokens that reference Base palette values. Components consume these semantic tokens — never raw hex values. Click any swatch to copy its value.
69
Tokens
7
Groups
7
Categories
Color / Background
Define primary and secondary surfaces of the interface. Used for: Main surfaces, cards, overlays, containers.
Color / Text
Colors for all textual content with proper contrast. Used for: Headlines, body text, labels, captions.
Color / Border
Define boundaries and separate content. Used for: Dividers, outlines, visual separators.
Color / Action
Highlight interactive elements and actions. Used for: Buttons, links, interactive states.
Color / Surface
Define primary and secondary surfaces of the interface. Used for: Main surfaces, cards, overlays, containers.
Color / Icon
Colors for pictograms and symbolic elements. Used for: Interface icons, buttons, status indicators.
Color / Tag
Background tints for label and tag chips across status categories.