Colors
Samples of five color themes you can apply to an application, plus the semantic colors used to express state. Each theme card shows the light and dark palette side by side. Every theme comes with a secondary/accent color in addition to its primary color, with the HEX codes shown as well.
Light
Heading Title
Subtitle text
This is body text. The impression a color scheme gives can change dramatically. Balancing visibility, brand identity, and emotional appeal is key to choosing a theme.
- ▸Balance of contrast and visibility
- ▸Consistency with brand colors
- ▸Attention to accessibility
Dark
Heading Title
Subtitle text
This is body text. The impression a color scheme gives can change dramatically. Balancing visibility, brand identity, and emotional appeal is key to choosing a theme.
- ▸Balance of contrast and visibility
- ▸Consistency with brand colors
- ▸Attention to accessibility
Forest
Section titled “Forest”Light
Heading Title
Subtitle text
This is body text. The impression a color scheme gives can change dramatically. Balancing visibility, brand identity, and emotional appeal is key to choosing a theme.
- ▸Balance of contrast and visibility
- ▸Consistency with brand colors
- ▸Attention to accessibility
Dark
Heading Title
Subtitle text
This is body text. The impression a color scheme gives can change dramatically. Balancing visibility, brand identity, and emotional appeal is key to choosing a theme.
- ▸Balance of contrast and visibility
- ▸Consistency with brand colors
- ▸Attention to accessibility
Sunset
Section titled “Sunset”Light
Heading Title
Subtitle text
This is body text. The impression a color scheme gives can change dramatically. Balancing visibility, brand identity, and emotional appeal is key to choosing a theme.
- ▸Balance of contrast and visibility
- ▸Consistency with brand colors
- ▸Attention to accessibility
Dark
Heading Title
Subtitle text
This is body text. The impression a color scheme gives can change dramatically. Balancing visibility, brand identity, and emotional appeal is key to choosing a theme.
- ▸Balance of contrast and visibility
- ▸Consistency with brand colors
- ▸Attention to accessibility
Midnight
Section titled “Midnight”Light
Heading Title
Subtitle text
This is body text. The impression a color scheme gives can change dramatically. Balancing visibility, brand identity, and emotional appeal is key to choosing a theme.
- ▸Balance of contrast and visibility
- ▸Consistency with brand colors
- ▸Attention to accessibility
Dark
Heading Title
Subtitle text
This is body text. The impression a color scheme gives can change dramatically. Balancing visibility, brand identity, and emotional appeal is key to choosing a theme.
- ▸Balance of contrast and visibility
- ▸Consistency with brand colors
- ▸Attention to accessibility
Light
Heading Title
Subtitle text
This is body text. The impression a color scheme gives can change dramatically. Balancing visibility, brand identity, and emotional appeal is key to choosing a theme.
- ▸Balance of contrast and visibility
- ▸Consistency with brand colors
- ▸Attention to accessibility
Dark
Heading Title
Subtitle text
This is body text. The impression a color scheme gives can change dramatically. Balancing visibility, brand identity, and emotional appeal is key to choosing a theme.
- ▸Balance of contrast and visibility
- ▸Consistency with brand colors
- ▸Attention to accessibility
Semantic colors
Section titled “Semantic colors”The Primary and accent colors above differ by theme, but the Success, Warning, Error, Info, and Disabled state colors are shared system colors that stay the same regardless of which theme you choose. Since they’re common to every theme, they’re listed once here rather than repeated on each theme card.
Light
Success#15803D
Warning#B45309
Error#BE123C
Info#0E7490
Disabled#9CA3AF
Dark
Success#86EFAC
Warning#FCD34D
Error#FDA4AF
Info#67E8F9
Disabled#6B7280