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.
Magic Numbers
To understand how contrast is calculated, take the number associated with the text token, eg. $turquoise-90, and subtract it from the background token number, eg. $turquoise-10.
If the absolute value (integer regardless negative or positive sign) of the result is more than 30, then it meets AA standards. In this case, the result is 80, therefore it meets AAA standards.
The numbers represent “lightness” used in the HSL (hue, saturation, lightness) translation of each hex code. Zero (0) is white, 100 is black.
Do not rely solely on magic numbers for accessibility: contrast in lightness is not the only rule that affects readability. Red tones on green backgrounds will still be difficult to read, even for those without visual impairments.
Primary Palette
Primary Dark
- Token
- $turquoise-90
- Hex
- #02363D
- Usage
Text:
Default text color
Backgrounds:
.pv-surface-brand
Turquoise Dark
- Token
- $turquoise-70
- Hex
- #176F6F
- Usage
Text:
.pv-text-brand
Backgrounds:
.pv-surface-brand-inverse
Turquoise Light
- Token
- $turquoise-20
- Hex
- #A8E6E1
- Usage
Text:
.pv-text-brand-inverse
White
- Token
- $gray-0
- Hex
- #FFFFFF
- Usage
Text:
.pv-text-inverse
Backgrounds:
.pv-surface
Other:
Default background color
Secondary Palette
Orange Light
- Token
- $orange-50
- Hex
- #C86628
- Usage
Other:
Tags
Orange Dark
- Token
- $orange-60
- Hex
- #BA4E01
- Usage
Other:
Avatars, Tags
Yellow Dark
- Token
- $yellow-50
- Hex
- #E5A000
- Usage
Other:
Status
Red Dark
- Token
- $red-60
- Hex
- #DA1E28
- Usage
Text:
.pv-text-red
Other:
Notifications, Status, Error States
Neutral Palette
Gray 05
- Token
- $gray-05
- Hex
- #F8F8FA
- Usage
Backgrounds:
.pv-surface-accent
Gray 20
- Token
- $gray-20
- Hex
- #DCDFE4
- Usage
Text:
.pv-text-subdued-inverse
Other:
Borders
Gray 60
- Token
- $gray-60
- Hex
- #6E7784
- Usage
Text:
.pv-text-subdued
Full Color Palette
This full range of colors in the design system is for reference only. You should be able to replicate any design using Pit Viper’s component and utility classes.
Turquoise
#E2F7F5 $turquoise-10
#A8E6E1 $turquoise-20
#6FD6CE $turquoise-30
#36C5BA $turquoise-40
#2CA8A1 $turquoise-50
#218C88 $turquoise-60
#176F6F $turquoise-70
#0D5256 $turquoise-80
#02363D $turquoise-90
#011214 $turquoise-100
Orange
#FAEAE4 $orange-10
#EEC0AE $orange-20
#E29679 $orange-30
#D57E50 $orange-40
#C86628 $orange-50
#BA4E01 $orange-60
#913D01 $orange-70
#672C01 $orange-80
#3E1A01 $orange-90
#150901 $orange-100
Yellow
#FAECCC $yellow-10
#F5D999 $yellow-20
#EFC666 $yellow-30
#EAB333 $yellow-40
#E5A000 $yellow-50
#B78000 $yellow-60
#896000 $yellow-70
#5C4000 $yellow-80
#2E2000 $yellow-90
#171000 $yellow-100
Red
#FFF1F1 $red-10
#FFD7D9 $red-20
#FFB3B8 $red-30
#FF8389 $red-40
#FA4D56 $red-50
#DA1E28 $red-60
#A2191F $red-70
#750E13 $red-80
#520408 $red-90
#2D0709 $red-100
Blue
#EDF5FF $blue-10
#D0E2FF $blue-20
#A6C8FF $blue-30
#78A9FF $blue-40
#4589FF $blue-50
#0F62FE $blue-60
#0043CE $blue-70
#002D9C $blue-80
#001D6C $blue-90
#001141 $blue-100
Green
#DEFBE6 $green-10
#A7F0BA $green-20
#6FDC8C $green-30
#42BE65 $green-40
#24A148 $green-50
#198038 $green-60
#0E6027 $green-70
#044317 $green-80
#022D0D $green-90
#071908 $green-100
Purple
#F6F2FF $purple-10
#E8DAFF $purple-20
#D4BBFF $purple-30
#BE95FF $purple-40
#A56EFF $purple-50
#8A3FFC $purple-60
#6929C4 $purple-70
#491D8B $purple-80
#31135E $purple-90
#1C0F30 $purple-100
Magenta
#FFF0F7 $magenta-10
#FFD6E8 $magenta-20
#FFAFD2 $magenta-30
#FF7EB6 $magenta-40
#EE5396 $magenta-50
#D02670 $magenta-60
#9F1853 $magenta-70
#740937 $magenta-80
#510224 $magenta-90
#2A0A18 $magenta-100
Gray
#FFFFFF $gray-0
#F3F4F6 $gray-10
#DCDFE4 $gray-20
#C5CAD2 $gray-30
#ADB5C0 $gray-40
#8A95A5 $gray-50
#6E7784 $gray-60
#535963 $gray-70
#373C42 $gray-80
#1C1E21 $gray-90
#0E0F10 $gray-100