A palette is a collection. A color system is a set of rules for how colors earn their roles.
The difference comes down to three tiers: primitives, semantics, and components.
Primitives are raw named values — –-purple: #534AB7.
Semantics assign meaning — –action-primary: var(–purple).
Components consume the meaning, never the raw value.
Change the primitive once and every surface that references it updates automatically. Dark mode becomes a semantic swap. A rebrand becomes a one-line edit. Without this structure, every new component is a color decision from scratch.
