Skip to content
aiarabicdev
Design systems

Radix Colors

Twelve step palettes where every step has a defined job

Radix Colors is a palette system of twelve step scales, designed so each step has a specific purpose: this step is a subtle background, this one is a border, this one is accessible text. Light and dark scales are matched, and it is only colour.

FreeMITCSSSelf hostable

Why numbered steps with jobs work

Most palettes give you nine shades and no guidance, so choosing between 600 and 700 becomes a taste decision repeated hundreds of times inconsistently. Radix assigns a role to each step, which turns those decisions into lookups.

The result is that a component built on step three for its background and step eleven for its text is accessible by construction, in both light and dark mode, without checking.

The limits

It is colour only. No spacing, no type, no components. That focus is why it composes with anything, including Tailwind, whose theme can be pointed at these scales directly.

The scales are also carefully balanced against each other, so dropping one arbitrary brand colour into the middle of a Radix palette breaks the guarantees. Generate a custom scale properly instead.

Reach for it when

  • you want colour decisions to be lookups rather than judgements
  • light and dark mode must both be accessible without manual checking
  • you need a palette that composes with any component library

Watch out for

  • colour only, so the rest of the system is still yours
  • dropping an unscaled brand colour into it breaks the contrast guarantees
  • twelve steps per scale is a lot of tokens to name and maintain
NEXT TO IT ON THE SHELF

Compare with these

@arabic_Intelligence

New entries, as they land

One channel. New tools when they are added, with the caveat included. No daily digest, no course, nothing to buy.

Join the Telegram

Free. No email required.