Color System Template for Product Managers

A well-scoped system typically has 8-12 primitives per hue across 4-6 hues, plus a neutral scale. That gives you 50-80 primitive tokens. Semantic tokens are usually 30-50, depending on the complexity of your UI. If you have more than 100 semantic tokens, the system is likely over-specified and will be difficult to maintain. Start small and add tokens only when an existing token cannot serve the purpose.

For documentation and Figma, hex is the most readable. For CSS implementation, consider oklch or hsl because they make it easier to create consistent lightness scales and adjust saturation. oklch produces perceptually uniform steps across hues, which means your blue-500 and green-500 will actually look the same lightness. hex values do not guarantee this. Store the canonical value in one format and derive others.

Use semantic tokens. If components reference semantic tokens (not primitives), dark mode is a token swap, not a redesign. Define each semantic token with both a light and dark value. CSS custom properties or Figma modes handle the switch. The component code stays identical. The upfront investment in the semantic layer pays for itself immediately in dark mode and pays again every time you add a new theme.

Roughly 8% of men and 0.5% of women have some form of color vision deficiency. The most common type (deuteranopia) makes red and green difficult to distinguish. Never use color as the sole indicator of state. Pair error red with an icon or label. Use patterns in charts. Test your palette with tools like Sim Daltonism or the Chromatic Vision Simulator. Your [accessibility audit](/templates/accessibility-audit-template) should include a color blindness check for every data visualization.

Quarterly is a good cadence. The audit should check for unauthorized colors in the codebase (new hex values not in the token list), contrast ratio regressions from recent changes, and dark mode gaps where new components were built without dark variants. Automate what you can with linting rules that flag raw hex values outside the token set. ---