Colors

VM Teal

HEX #0A5B58

<div class="bg-teal"></div>

HEX #02786E

<div class="bg-teal-dark"></div>

HEX #66C7C3

<div class="bg-teal-light"></div>

HEX #C2EBE8

<div class="bg-teal-pale"></div>

VM Dark Teal

HEX #0A5B58

<div class="bg-dark-teal"></div>

HEX #02786E

<div class="bg-dark-teal-dark"></div>

HEX #66C7C3

<div class="bg-dark-teal-light"></div>

HEX #C2EBE8

<div class="bg-dark-teal-pale"></div>

Cadet

HEX #3DB1AD

<div class="bg-cadet"></div>

HEX #026E78

<div class="bg-cadet-dark"></div>

HEX #8BD8D5

<div class="bg-cadet-light"></div>

HEX #D8F0F0

<div class="bg-cadet-pale"></div>

Med Gray

HEX #6C757D

<div class="bg-med-gray"></div>

HEX #343434

<div class="bg-med-gray-dark"></div>

HEX #A3A6A9

<div class="bg-med-gray-light"></div>

Gray

HEX #C7C8CA

<div class="bg-gray"></div>

HEX #E4E4E4

<div class="bg-gray-light"></div>

HEX #F3F3F3

<div class="bg-gray-pale"></div>

VH Green

HEX #00704A

<div class="bg-green"></div>

HEX #10AC77

<div class="bg-green-dark"></div>

HEX #72CFAF

<div class="bg-green-light"></div>

HEX #D1F2E7

<div class="bg-green-pale"></div>

VH Dark Green

HEX #005736

<div class="bg-dark-green"></div>

HEX #002A1A

<div class="bg-dark-green-dark"></div>

HEX #6FAC95

<div class="bg-dark-green-light"></div>

HEX #CCDED8

<div class="bg-dark-green-pale"></div>

Light Grass

HEX #B5DEC8

<div class="bg-light-grass"></div>

HEX #97CB97

<div class="bg-light-grass-dark"></div>

HEX #D4EFD4

<div class="bg-light-grass-light"></div>

HEX #F5FBF5

<div class="bg-light-grass-pale"></div>

Med Grass

HEX #8DAE81

<div class="bg-med-grass"></div>

HEX #BAD4B4

<div class="bg-med-grass-dark"></div>

HEX #D1E0CC

<div class="bg-med-grass-light"></div>

HEX #E7F0E5/span>

<div class="bg-med-grass-pale"></div>

Dark Grass

HEX #3C763D

<div class="bg-dark-grass"></div>

HEX #A6C6A9

<div class="bg-dark-grass-dark"></div>

HEX #C4DAC4

<div class="bg-dark-grass-light"></div>

HEX #E1EBE1

<div class="bg-dark-grass-pale"></div>

Purple

HEX #987EC1

<div class="bg-purple"></div>

HEX #5C4580

<div class="bg-purple-dark"></div>

HEX #CEC1EA

<div class="bg-purple-light"></div>

HEX #EFE9FC

<div class="bg-purple-pale"></div>

Yellow

HEX #FFCC3B

<div class="bg-yellow"></div>

HEX #D3A42D

<div class="bg-yellow-dark"></div>

HEX #FFF2B5

<div class="bg-yellow-light"></div>

Orange

HEX #E76F1F

<div class="bg-orange"></div>

HEX #A65523

<div class="bg-orange-dark"></div>

HEX #EFC0A0

<div class="bg-orange-light"></div>

Red

HEX #9B3F34

<div class="bg-red"></div>

HEX #622128

<div class="bg-red-dark"></div>

HEX #BD625E

<div class="bg-red-light"></div>

HEX #F59FC0

<div class="bg-red-pale"></div>

Alert Colors

Information

HEX #48A3FC

color: var(--alert-info)

Info colors are used to share general information that isn't linked to validation or time-sensitive information.

HEX #31708F

color: var(--alert-info-dark)

HEX #F0F7FF

background-color: var(--alert-info-pale)

Danger/Error

HEX #D92D20

color: var(--alert-danger)

Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as a failure to validate your password.

HEX #6C1610

color: var(--alert-danger-dark)

HEX #FEF4F4

background-color: var(--alert-danger-pale)

Warning

HEX #F3C84C

color: var(--alert-warning)

Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users attention.

HEX #AB8A2F

color: var(--alert-warning-dark)

HEX #FFF7E6

background-color: var(--alert-warning-pale)

Success

HEX #12B76A

color: var(--alert-success)

Success colors communicate a positive action, positive trend, or a successful confirmation.

HEX #3C763D

color: var(--alert-success-dark)

HEX #ECFDF3

background-color: var(--alert-success-pale)

Disabled

HEX #343A40

color: var(--alert-disabled-dark)

Disabled colors communicate an inactive state that users cannot interact with.

HEX #6F7176

color: var(--alert-disabled)

HEX #B6BCC3

color: var(--alert-disabled-light)

HEX #F3F3F3

color: var(--alert-disabled-pale)