Design System Palettes

A production-ready design system color palette includes five categories: the primary brand color as a complete 50–950 scale, a secondary or accent color at the same depth, a neutral grey scale from near-white to near-black (typically 11 steps), semantic colors (success, warning, error, info) each with at least three values (light/default/dark for different usage contexts), and an overlay or transparency scale for shadows, scrims, and overlay effects.

In token architecture terms, this translates to base tokens (the raw hex values in scale form), alias tokens (semantic names like --color-primary, --bg-surface, --text-muted that reference base tokens), and component tokens (component-specific values like --button-primary-bg that reference alias tokens).

The most maintainable design system palettes are built in layers. At the base layer, define all colors as scale values using a consistent naming convention: --brand-blue-500, --neutral-100, etc. At the alias layer, create semantic names that map to base values: --color-primary maps to --brand-blue-600 in light mode and --brand-blue-400 in dark mode. At the component layer, specific components reference alias tokens.

This three-layer architecture means that a brand color change only requires updating the base layer, and all semantic and component tokens cascade automatically. Use the Tints & Shades Generator to create each base scale, then export as CSS variables or JSON for integration with design token tools like Style Dictionary.