Colors
Three layers. Primitives hold raw values, semantic tokens hold meaning, and components only read semantic tokens.
Semantic tokens
Token names say what a color means, not what it looks like. Switching to dark mode only changes this layer.
Background and surface
bg-basebg-canvassurfacesurface-secondarysurface-tertiarysurface-inverse
Text
texttext-secondarytext-tertiarytext-disabledtext-accenttext-dangertext-successtext-warning
Accent and status
accentaccent-hoveraccent-pressedaccent-softdangerdanger-softsuccesssuccess-softwarningwarning-soft
Neutral fills and borders
fillfill-secondaryfill-tertiaryfill-pressedborderborder-strongborder-field
Category and chart
tealteal-softpurplepurple-softchart-1chart-2chart-3chart-4chart-5chart-6
Primitives
Blue 600 (#105ECB) is the SmartMCU brand color. Grays follow the system gray scale so they stay neutral on every platform.
blue-50blue-100blue-200blue-300blue-400blue-500blue-600blue-700blue-800blue-900blue-950
gray-0gray-50gray-100gray-200gray-300gray-400gray-500gray-600gray-700gray-800gray-900gray-950
Usage
.my-card {
background: var(--sui-surface);
color: var(--sui-text);
box-shadow: var(--sui-shadow-surface);
}Use text-tertiary as the lightest color for text. text-disabled is only for disabled controls.