Color Palette
Our design system color palette is based on Radix Colors, providing accessible and consistent colors for all UI components.
Theme Colors
Background
Base
--background-base
Subtle
--background-subtle
UI
--background-ui
Text
Aa
High Contrast
--text-high-contrast
Aa
Medium Contrast
--text-medium-contrast
Aa
Low Contrast
--text-low-contrast
Accent
Primary
--accent-9
Hover
--accent-10
Subtle
--accent-3
Status Colors
Success
--success
Primary
--success-background
Background
Completed
Warning
--warning
Primary
--warning-background
Background
In Progress
Error
--error
Primary
--error-background
Background
Planned
Color Scales
Slate (Main neutral color)
1
2
3
4
5
6
7
8
9
10
11
12
Blue (Primary accent color)
1
2
3
4
5
6
7
8
9
10
11
12
Green (Success states)
1
2
3
4
5
6
7
8
9
10
11
12
Red (Error states)
1
2
3
4
5
6
7
8
9
10
11
12
Amber (Warning states)
1
2
3
4
5
6
7
8
9
10
11
12
Purple (Inputs category)
1
2
3
4
5
6
7
8
9
10
11
12
Yellow (Navigation category)
1
2
3
4
5
6
7
8
9
10
11
12
Pink (Layout category)
1
2
3
4
5
6
7
8
9
10
11
12
Orange (Feedback category)
1
2
3
4
5
6
7
8
9
10
11
12
Teal (Data Display category)
1
2
3
4
5
6
7
8
9
10
11
12
Indigo (Overlays category)
1
2
3
4
5
6
7
8
9
10
11
12