Design
Colors
There are several categories of colors that we use in this library and they are all defined in CSS variables.
Base colors
Base colors are used as the basis of every UI element including backgrounds, borders, and text.
Accent colors
Accent colors provide additional meaning to UI elements and are used in buttons, links and statuses.
gray
gold
bronze
brown
yellow
amber
orange
tomato
red
ruby
crimson
pink
plum
purple
violet
iris
indigo
blue
cyan
teal
jade
green
grass
lime
mint
sky
CSS variables
The base colors are a 11-step color range going from lightest to darkest. We used the colors created by Tailwind, so you can easily swap these out with any of their other color palettes.
| Name | Value |
|---|---|
| --base-color-50 | #fafafa |
| --base-color-100 | #f5f5f5 |
| --base-color-200 | #e5e5e5 |
| --base-color-300 | #d4d4d4 |
| --base-color-400 | #a3a3a3 |
| --base-color-500 | #737373 |
| --base-color-600 | #525252 |
| --base-color-700 | #404040 |
| --base-color-800 | #262626 |
| --base-color-900 | #171717 |
| --base-color-950 | #0a0a0a |
For accent colors, we used the colors from Radix Themes.
| Name | Value |
|---|---|
| --accent-color-gray | #8d8d8d |
| --accent-color-gold | #978365 |
| --accent-color-bronze | #a18072 |
| --accent-color-brown | #ad7f58 |
| --accent-color-yellow | #ffe629 |
| --accent-color-amber | #ffc53d |
| --accent-color-orange | #f76b15 |
| --accent-color-tomato | #e54d2e |
| --accent-color-red | #e5484d |
| --accent-color-ruby | #e54666 |
| --accent-color-crimson | #e93d82 |
| --accent-color-pink | #d6409f |
| --accent-color-plum | #ab4aba |
| --accent-color-purple | #8e4ec6 |
| --accent-color-violet | #6e56cf |
| --accent-color-iris | #5b5bd6 |
| --accent-color-indigo | #3e63dd |
| --accent-color-blue | #0090ff |
| --accent-color-cyan | #00a2c7 |
| --accent-color-teal | #12a594 |
| --accent-color-jade | #29a383 |
| --accent-color-green | #30a46c |
| --accent-color-grass | #46a758 |
| --accent-color-lime | #bdee63 |
| --accent-color-mint | #86ead4 |
| --accent-color-sky | #7ce2fe |