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.
Color Utility Classes
Use color utility classes to apply text and background colors. Surface classes set the background color while text classes set the foreground color.
Example
Combining surface and text color classes.
Brand Surface
Primary brand background with inverse text
Accent Surface
Light accent background with brand-colored heading
Success Surface
Success background for positive states
Critical Surface
Critical background for error states
HTML
<!-- Brand surface with inverse text -->
<div class="pv-surface-brand pv-text-inverse pv-inset-square-16">
<p class="pv-text-title-lg">Brand Surface</p>
<p class="pv-text-body-md pv-text-subdued-inverse">Primary brand background with inverse text</p>
</div>
<!-- Accent surface with brand-colored text -->
<div class="pv-surface-accent pv-inset-square-16">
<p class="pv-text-title-lg pv-text-brand">Accent Surface</p>
<p class="pv-text-body-md pv-text-subdued">Light accent background with brand-colored heading</p>
</div>
<!-- Semantic surfaces for feedback states -->
<div class="pv-surface-success pv-inset-square-16">
<p class="pv-text-title-lg pv-text-success">Success Surface</p>
</div>
<div class="pv-surface-critical pv-inset-square-16">
<p class="pv-text-title-lg pv-text-critical">Critical Surface</p>
</div>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