A semantic color token describes what a color is for, not just what it looks like. A component that uses --color-primary can follow a new theme; one that hard-codes a particular purple cannot.
A compact role map
:root {
--color-primary: #7357e8;
--color-primary-content: #ffffff;
--color-base-100: #ffffff;
--color-base-content: #24212d;
--color-success: #147d55;
--color-warning: #8a5700;
--color-error: #b42318;
}Names vary between frameworks, but the relationship matters: a surface token needs a content color, and a status color needs a text label or icon when the status affects a decision.
Keep roles distinct
Do not use the primary color for every highlight. Reserve it for the main action or active state, keep neutral surface tokens for most of the page, and use status colors only where they communicate status. If two roles become hard to distinguish, adjust their lightness, contrast, placement, or labels—not hue alone.
Test the token set as a system
Review a full screen with buttons, links, cards, input fields, success and error messages, and keyboard focus. Check the actual text/background pairs and verify that color is not the only cue for errors or selection.
For DaisyUI projects, see its documented theme color variables. You can also check a text pair or generate a palette draft.