A color palette is to a design system what a foundation is to a house: essential, but not livable on its own. Once you have built and validated your palette in PaletteRx, the next step is extending it into semantic tokens with usage rules.
From Palette Colors to Semantic Tokens
Your PaletteRx palette gives you base tokens: Primary Blue, Supporting Orange, Light Base, Dark Base. A design system adds semantic tokens that reference these bases: --color-cta points to Primary Blue, --color-text-body points to Dark Base, --color-surface points to Light Base.
The semantic layer is what makes your system maintainable. When the brand color changes from blue to purple, you update the base token and every semantic reference follows.
Defining Usage Rules
Every token should have documented usage rules: where it appears, what it pairs with, and what it does not get used for. For example: "Primary Blue is used for CTA buttons, active nav states, and focus rings. It is not used for large background fills or body text."
Shade Scales
PaletteRx gives you the base colors. For production, you will typically need shade scales. Most frameworks use scales from 50 (lightest) to 900 (darkest), with your base color sitting around 500 to 600.
Interactive States
Every interactive color needs at least three states: default, hover, and active/pressed. A common pattern is to darken by 8 to 12% for hover and 15 to 20% for active.