Colors
Shared
Functional colors meant to be the bedrock on which we build both user interfaces and marketing collateral. The primary blue is used for links, buttons, and other interactive elements and is also our main brand color. The neutral range is used for functional purposes like running text headlines, rules and dividers. Our original secondary blue has been deprecated; intended for use as an accent color, it has been superseded by the brand colors listed below.
Primary
— click to copy #value, ⌥ + click to copy scale.key
50
100
200
300
400
500
base
600
700
800
900
Neutral
— click to copy #value, ⌥ + click to copy scale.key
background
0
50
card, backgroundDark
100
stroke
200
300
disabled
400
500
550
textLight, secondaryText
600
700
750
800
850
875
text
900
Semantic
Used to reinforce meaning and indicate an object's state. These colors are only for this use, not as accents or for decorative purposes.
The success palette is used to indicate that the action the user took completed successfully. The warning palette warns users about non-blocking problems or events. Use the danger palette around blocking problems or events, or to indicate destructive actions.
Success
— click to copy #value, ⌥ + click to copy scale.key
50
background, primaryInvert
100
accent
200
300
400
500
secondaryInvert, secondary, base
600
700
accentInvert, primary
800
backgroundInvert
900
Warning
— click to copy #value, ⌥ + click to copy scale.key
50
background, primaryInvert
100
accent
200
300
400
500
base
600
700
accentInvert, primary
800
backgroundInvert
900
Danger
— click to copy #value, ⌥ + click to copy scale.key
background, primaryInvert
50
100
accent
200
300
400
500
secondaryInvert, secondary, base
600
700
accentInvert, primary
800
backgroundInvert
900
Brand
Used as part of marketing collateral (both digital and print), and as accents within the product. These colors should never be used to communicate state or convey meanings already covered by the semantic colors above.
Brand Navy
— click to copy #value, ⌥ + click to copy scale.key
50
100
200
300
400
500
600
700
800
900
Brand Green
— click to copy #value, ⌥ + click to copy scale.key
50
100
200
300
400
500
600
700
800
900
Brand Brown
— click to copy #value, ⌥ + click to copy scale.key
50
100
200
300
400
500
600
700
800
900
Brand Red
— click to copy #value, ⌥ + click to copy scale.key
50
100
200
300
400
500
600
700
800
900
Brand Tan
— click to copy #value, ⌥ + click to copy scale.key
50
100
200
300
400
500
600
700
800
900
Brand Orange
— click to copy #value, ⌥ + click to copy scale.key
50
100
200
300
400
500
600
700
800
900
Brand Yellow
— click to copy #value, ⌥ + click to copy scale.key
50
100
200
300
400
500
600
700
800
900
Brand Purple
— click to copy #value, ⌥ + click to copy scale.key
50
100
200
300
400
500
600
700
800
900
Transparency
For most uses, we recommend using overlayLight and overlayDark. The palettes
below are use cases where a specific level of transparency is required
(lightAlpha800 equals neutral0 at 80% opacity).
Light Alpha
— click to copy #value, ⌥ + click to copy scale.key
50
100
200
300
400
500
600
700
800
900
Dark Alpha
— click to copy #value, ⌥ + click to copy scale.key
50
100
200
300
400
500
600
700
800
900
Usage
React
See the style props documentation for the complete list of style props that use the color scale.
Bootstrap
Use the background and color utilities to apply system colors.