radix-ui colors
on grayscales
- gray -> true gray
- mauve -> purple hue
- slate -> blue hue
- sage -> green hue
- olive -> lime hue
- sand -> yellow hue
steps 11 and 12 of your grayscale, used for text
- blue
- sky
- cyan
- teal
- green
- grass
- mint
- yellow
- amber
- red
- tomato
- crimson
- orange
- brown
- purple
- violet
- plumb
your brand color
typically grayscale
- 1 -> app bg
- 2 -> app bg
- 3 -> component bg, default
- 4 -> component bg, hover
- 5 -> component bg, selected
- 6 -> border, default
- 7 -> border, interactive
- 8 -> border, hovered
- 9 -> color background
- 10 -> color background, hover
- 11 -> low contrast text
- 12 -> high contrast text