Hardcoded hex values in component code
Embedding raw hex colors directly into CSS or component code bypasses theme support and brand consistency.
The wrong way
Setting a brand color with a literal hex value inside a component stylesheet.
.button {
color: #ffffff;
background-color: #008996;
border: 1px solid #115662;
}Why
When the theme switches from light to dark, hardcoded colors don't move with it — they sit there looking out of place. The token system exists so a single change to `color.text.brand` updates everywhere it is used. Hardcoded values quietly turn future theme work into find-and-replace archaeology, and they make brand updates a project instead of a token change.
The right way
Reference the semantic token via its CSS custom property. The token resolves to the correct value per active theme.
.button {
color: var(--color-action-primary-text);
background-color: var(--color-action-primary-default);
border: 1px solid var(--color-border-default);
}