Color
Pit Viper’s color system is designed to ensure accessible color contrast between text/icons and backgrounds. All of the colors are baked into Pit Viper component and utility classes, so you should never need to manually use a color value from the color palette.
If a design comes your way that requires a color usage that’s not covered in a Pit Viper class, let us know in the #design-system Slack channel and we’ll get it added, if necessary.
Primary Palette
Main - Primary
- Token
- $main-primary
- Hex
- #16696D
- Usage
- Branded text, border and backgrounds
Main - Hover
- Token
- $main-hover
- Hex
- #0D5256
- Usage
- Hover state for brand color
Main - Pressed
- Token
- $main-pressed
- Hex
- #02363D
- Usage
- Pressed state for brand color
White
- Token
- $white
- Hex
- #FFFFFF
- Usage
- Default page background, inverse text
Neutral Palette
Text - Primary
- Token
- $text-primary
- Hex
- #121313
- Usage
- Default body text
Text - Secondary
- Token
- $text-secondary
- Hex
- #4B595C
- Usage
- Subdued text
Text - Tertiary
- Token
- $text-tertiary
- Hex
- #6E8081
- Usage
- Subdued text
Text - Quaternary
- Token
- $text-quaternary
- Hex
- #89989B
- Usage
- Subdued text
Text - Disabled
- Token
- $text-disabled
- Hex
- #7D898D
- Usage
- Disabled input text
Stroke - Light
- Token
- $stroke-light
- Hex
- #E3E7EA
- Usage
- Border color
Stroke - Dark
- Token
- $stroke-dark
- Hex
- #D2D8DC
- Usage
- Border color
Surface - BG Gray
- Token
- $surface-bg-gray
- Hex
- #F7F8F8
- Usage
- Background color
Secondary Palette
Text/Stroke - Error
- Token
- $text-error, $stroke-error
- Hex
- #FF471A
- Usage
- Error text, borders
Surface - Error
- Token
- $surface-error
- Hex
- #FFEFEB
- Usage
- Error background
Text - Warning
- Token
- $text-warning
- Hex
- #B26500
- Usage
- Warning text
Stroke - Warning
- Token
- $stroke-warning
- Hex
- #FFA632
- Usage
- Warning borders
Surface - Warning
- Token
- $surface-warning
- Hex
- #FFEED9
- Usage
- Warning background
Text/Stroke - Success
- Token
- $text-success, $stroke-success
- Hex
- #0E8019
- Usage
- Success text, borders
Surface - Success
- Token
- $surface-success
- Hex
- #D4FAD7
- Usage
- Success background
Surface - Highlight
- Token
- $surface-highlight
- Hex
- #E4F8F6
- Usage
- Accent background