Figma color styles template

Color is the part of a design system that decays fastest. One designer eyedrops a shade that was never in the palette, someone else adds a slightly darker gray for a border, and a year later the product has forty neutrals and no way to change any of them. A color system exists to make that impossible. You pick by role, not by eye.

Twenty-seven families, 50 through 950

Every family in this file runs eleven steps: 50, 100, 200 and upward to 900, with 950 at the dark end. Twenty-seven families cover the range, named by hue rather than by job, so the file contains Red and Olive rather than a palette full of primary-2.

Roles are assigned on top with a small badge: Red is tagged Default error, Brand is tagged Default brand, and the gray families carry a note saying they can be swapped for the default gray, which makes changing your neutral a reassignment rather than a repaint. Under all of it sit three base styles you use constantly and never think about: white, black, and a fully transparent fill.

There are 333 color styles in total, with gradients kept in their own section rather than mixed into the scale. When a product lets someone choose a color, these families are what a color picker should offer before it offers a spectrum.

Contrast ratios printed on the swatch

Each swatch shows its hex value and its WCAG 2.1 contrast rating, so brand-600 reads AA 4.95 and brand-800 reads AAA 8.65 before you have opened a single plugin. That number changes behavior.

Brand-500 sits at 3.32, which is fine behind an icon or a large heading and short of the 4.5:1 that WCAG's contrast minimum asks of body text, and the shade that looks most like a button color is usually the one that fails. Knowing this at the swatch is cheaper than finding out in an audit, and it pairs with the size and weight decisions made in the typography styles.

Semantic variables carry both modes

The raw scale is not what your components should reference. A second layer names colors by what they do, grouped into text, background, border and foreground, and every row is documented with its light mode value, its dark mode value, and a note on where it belongs. So text-primary is neutral-900 in light and neutral-50 in dark. Border-primary flips from neutral-300 to neutral-700. Because both values live on one variable, a component built on semantic tokens switches theme with no overrides at all, which is the whole reason the layer exists; Figma's own guide to variables and modes covers the mechanics.

Hover and on-brand states hang off the same names, as text-secondary_hover and text-tertiary_on-brand, so an inverted CTA section is a mode away rather than a manual repaint.

Alpha colors for everything transparent

A separate utility collection handles the cases a solid scale cannot. Alpha colors give you white and black in ten percent steps from 10 to 100, and they invert correctly: alpha-white-40 resolves to neutral-950 at 40 percent in dark mode, alpha-black-40 resolves to white. Scrims, glass panels, and the fills behind background blurs all need transparency rather than a flat color, and hardcoding rgba values is how a file ends up with three subtly different modal backgrounds.

Light mode is still the better default for long reading, according to Nielsen Norman Group's comparison, so build dark mode as a real choice rather than a personality trait. The grids and spacing tokens are shaped the same way, primitives underneath and named roles on top, so a finished component should almost never contain a raw hex or a typed pixel value.

The same system exists in code. Untitled UI React theming is open source, built with Tailwind CSS and React Aria, and exposes the palette as CSS custom properties in the form --color-brand-500, so rebranding a build means redefining a handful of variables instead of hunting hex values through components.