Back to blog
Why Radix Colors?
Designing with color should be expressive, not repetitive. As a product grows, however, a palette has to do more than look good: it needs predictable roles, accessible contrast, and a clear relationship between design and code.
That is why we use Radix Colors as a starting point—and why we built a small Figma plugin to remove the manual setup around it.
The hidden cost of an informal palette
Color decisions often live in the gap between design and implementation:
- Which shades are intended for backgrounds, borders, and text?
- Does the same step carry the same visual weight across different hues?
- How should a component behave when the interface switches to dark mode?
- Are Figma and the codebase still using the same values?
Without a shared system, each answer becomes local knowledge. That creates noise, slows handoff, and makes small visual changes unexpectedly expensive.
Why Radix Colors works well
Radix Colors provides carefully designed 12-step scales with:
- light and dark variants;
- solid and alpha colors;
- usage guidance for every step;
- consistent perceived brightness across hues;
- accessible combinations for common interface roles;
- wide-gamut P3 colors.
The numbered scales also create a useful shared language. A designer can choose gray12 for high-contrast text and a developer can use the same token without translating an arbitrary hex value.
Getting the system into Figma
A strong source palette still leaves a mechanical task: creating and organizing every Figma Variable. We built Radix Colors as Figma Variables to do that work directly in your file.
The plugin can:
- create a new variable collection or use an existing one;
- add solid or alpha Radix scales;
- generate light or dark values;
- map light and dark values into modes when your Figma plan supports them;
- remember its setup in the local file.
A focused setup
1. Choose the destination
Open the plugin settings and select an existing variable collection or create a new one.
2. Choose the modes
Use a light or dark mode on Figma's free plan. If your plan supports multiple Variable Modes, the plugin can map both themes into one collection.
3. Add the scales you need
Choose solid or alpha and add only the color families relevant to the current product. The result is a palette that is ready to apply to components without maintaining duplicate frames.
Less translation, more useful work
The main benefit is not the number of generated variables. It is the context shared between design and development:
- token names remain recognizable on both sides;
- light and dark behavior is defined once;
- palette experiments do not require rebuilding the system;
- handoff contains fewer one-off decisions.
That is the kind of tool we like to build at XOXO Labs: narrow in scope, clear about its job, and designed to remove noise from the work around it.