Design
Colors
Our color system is based on Tailwind CSS colors. There are two categories of colors: semantic colors and accent colors.
Semantic colors#
Semantic colors provide meaning to UI elements and are used for common states.
primary
muted
transparent
Accent colors#
Accent colors provide additional meaning to UI elements and are used in buttons, links and statuses.
gray
slate
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
Text colors#
Primary textMuted textDisabled textColored text
Color shades#
You can use any Tailwind color with a specific shade (50-950). If no shade is specified, 500 is used by default.
blue-300blue-500blue-700blue-900
Icon colors#
Icons support the same color props including shades.
Component props#
| Name | Type | Description |
|---|---|---|
| color | FontColor | SemanticColor | ColorName | TailwindColor |
| backgroundColor | BackgroundColor | SemanticColor | SurfaceColor | ColorName | TailwindColor |
| borderColor | BorderColor | SemanticColor | ColorName | TailwindColor |
Where ColorName is a base Tailwind color (e.g., blue, red) and TailwindColor is a color with shade (e.g., blue-500, red-300).
Available colors#
The following Tailwind colors are available, each with shades from 50 to 950:
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose