Colors
Primitive Colors
Grayscale
- white
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
- black
Orange
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- base
Green
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- base
Folly
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- base
Amber
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- base
Emerald
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- base
Blue
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- base
Stone
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- base
Semantic Colors
These colors has meaning depending on the context it is used in. They also change according to the color scheme (light vs dark mode).
Brand
-
Background
base
-
Background
100
-
Background
200
-
Foreground
base
-
Foreground
100
-
Outline
base
-
Outline
100
-
Outline
200
Primary
Secondary
Hyperlink
Neutral
Gradient
Status
| Surface | Details | Example | |
|---|---|---|---|
| Info | base 100 200 | Text Element | This is a sample notification that expresses the status of the application / system. |
| Success | base 100 200 | Text Element | This is a sample notification that expresses the status of the application / system. |
| Warning | base 100 200 | Text Element | This is a sample notification that expresses the status of the application / system. |
| Error | base 100 200 | Text Element | This is a sample notification that expresses the status of the application / system. |
Development
Developers might find the following resources helpful to understand how the color system above is implemented.