Radix Themes

The open-source theme layer over Radix Primitives: 12-step color scales (indigo accent + slate gray by default) where each step has a defined job, automatic light/dark fidelity, translucent panels, a 9-size type scale on a system font stack, and accessibility inherited from headless primitives — the quiet, engineered look behind much of the modern React ecosystem.

Primary action

Card

Signature element

The 12-step scale contract: step 1 app background, 3 hovered component, 6 borders, 9 solid accent, 11 low-contrast text, 12 high-contrast text — a palette API so predictable that dark mode is just swapping scales.

Palette

bg
#ffffff
surface
#f9f9fb
text
#1c2024
text-muted
#60646c
accent
#3e63dd
accent-hover
#3358d4
accent-text
#3a5bc7
accent-bg
#edf2fe
border
#d9d9e0
focus
#8da4ef