Design Token Names for Color Systems
Semantic token names make a color system easier to maintain. Instead of blue-600 everywhere, use names like color-action-primary or color-text-muted.
Semantic token naming
:root {
--color-text-primary: #111827;
--color-text-muted: #64748b;
--color-bg-page: #ffffff;
--color-bg-panel: #f8fafc;
--color-action-primary: #2563eb;
--color-state-danger: #dc2626;
}Developer checklist
- Use semantic names for product UI.
- Keep raw palette names for reference only.
- Document each token purpose.