USWDS Version 2 Colors

The USWDS system color palette is the complete set of colors from which any project can build a theme palette. I have enabled all the system colors within USWDS 2 — which as of beta 5 is 382 colors (383 if you count gray-100 which is not generated as a bg or text color, but available as a token in the event you need #000000 - black). Enabling the colors almost triples the size of the CSS, but with GZIP enabled the load time is extremely fast. This page uses grid cards and a variety of V2 utilities: hover, shadow, border, radius, and bg-color.

Icon Guide

  • System Palette Token
  • Theme Palette Token
  • State Palette Token

The View Color Details button will take you to a page dedicated to that color.

blue

blue-5

  • Backgound: bg-blue-5
  • Text Color: text-blue-5
  • blue-5

blue-10

  • Backgound: bg-blue-10
  • Text Color: text-blue-10
  • blue-10
  • primary-lighter

blue-20

  • Backgound: bg-blue-20
  • Text Color: text-blue-20
  • blue-20

blue-30

  • Backgound: bg-blue-30
  • Text Color: text-blue-30
  • blue-30
  • primary-light

blue-40

  • Backgound: bg-blue-40
  • Text Color: text-blue-40
  • blue-40

blue-50

  • Backgound: bg-blue-50
  • Text Color: text-blue-50
  • blue-50

blue-60

  • Backgound: bg-blue-60
  • Text Color: text-blue-60
  • blue-60

blue-70

  • Backgound: bg-blue-70
  • Text Color: text-blue-70
  • blue-70

blue-80

  • Backgound: bg-blue-80
  • Text Color: text-blue-80
  • blue-80

blue-90

  • Backgound: bg-blue-90
  • Text Color: text-blue-90
  • blue-90

blue vivid

blue-30v

  • Backgound: bg-blue-30v
  • Text Color: text-blue-30v
  • blue-30v

blue-40v

  • Backgound: bg-blue-40v
  • Text Color: text-blue-40v
  • blue-40v

blue-50v

  • Backgound: bg-blue-50v
  • Text Color: text-blue-50v
  • blue-50v

blue-60v

  • Backgound: bg-blue-60v
  • Text Color: text-blue-60v
  • blue-60v
  • primary

blue-70v

  • Backgound: bg-blue-70v
  • Text Color: text-blue-70v
  • blue-70v

blue-80v

  • Backgound: bg-blue-80v
  • Text Color: text-blue-80v
  • blue-80v

blue-cool

blue-cool-5

  • Backgound: bg-blue-cool-5
  • Text Color: text-blue-cool-5
  • blue-cool-5

blue-cool-10

  • Backgound: bg-blue-cool-10
  • Text Color: text-blue-cool-10
  • blue-cool-10

blue-cool-20

  • Backgound: bg-blue-cool-20
  • Text Color: text-blue-cool-20
  • blue-cool-20

blue-cool-30

  • Backgound: bg-blue-cool-30
  • Text Color: text-blue-cool-30
  • blue-cool-30

blue-cool-40

  • Backgound: bg-blue-cool-40
  • Text Color: text-blue-cool-40
  • blue-cool-40

blue-cool-50

  • Backgound: bg-blue-cool-50
  • Text Color: text-blue-cool-50
  • blue-cool-50

blue-cool-60

  • Backgound: bg-blue-cool-60
  • Text Color: text-blue-cool-60
  • blue-cool-60
  • info-darker

blue-cool-70

  • Backgound: bg-blue-cool-70
  • Text Color: text-blue-cool-70
  • blue-cool-70

blue-cool-80

  • Backgound: bg-blue-cool-80
  • Text Color: text-blue-cool-80
  • blue-cool-80

blue-cool-90

  • Backgound: bg-blue-cool-90
  • Text Color: text-blue-cool-90
  • blue-cool-90

blue-cool vivid

blue-cool-5v

  • Backgound: bg-blue-cool-5v
  • Text Color: text-blue-cool-5v
  • blue-cool-5v
  • accent-cool-lighter

blue-cool-20v

  • Backgound: bg-blue-cool-20v
  • Text Color: text-blue-cool-20v
  • blue-cool-20v
  • accent-cool-light

blue-cool-30v

  • Backgound: bg-blue-cool-30v
  • Text Color: text-blue-cool-30v
  • blue-cool-30v

blue-cool-40v

  • Backgound: bg-blue-cool-40v
  • Text Color: text-blue-cool-40v
  • blue-cool-40v
  • accent-cool-dark

blue-cool-50v

  • Backgound: bg-blue-cool-50v
  • Text Color: text-blue-cool-50v
  • blue-cool-50v

blue-cool-60v

  • Backgound: bg-blue-cool-60v
  • Text Color: text-blue-cool-60v
  • blue-cool-60v
  • accent-cool-darker

blue-cool-70v

  • Backgound: bg-blue-cool-70v
  • Text Color: text-blue-cool-70v
  • blue-cool-70v

blue-cool-80v

  • Backgound: bg-blue-cool-80v
  • Text Color: text-blue-cool-80v
  • blue-cool-80v

blue-warm

blue-warm-5

  • Backgound: bg-blue-warm-5
  • Text Color: text-blue-warm-5
  • blue-warm-5

blue-warm-10

  • Backgound: bg-blue-warm-10
  • Text Color: text-blue-warm-10
  • blue-warm-10

blue-warm-20

  • Backgound: bg-blue-warm-20
  • Text Color: text-blue-warm-20
  • blue-warm-20

blue-warm-30

  • Backgound: bg-blue-warm-30
  • Text Color: text-blue-warm-30
  • blue-warm-30

blue-warm-40

  • Backgound: bg-blue-warm-40
  • Text Color: text-blue-warm-40
  • blue-warm-40

blue-warm-50

  • Backgound: bg-blue-warm-50
  • Text Color: text-blue-warm-50
  • blue-warm-50

blue-warm-60

  • Backgound: bg-blue-warm-60
  • Text Color: text-blue-warm-60
  • blue-warm-60

blue-warm-70

  • Backgound: bg-blue-warm-70
  • Text Color: text-blue-warm-70
  • blue-warm-70

blue-warm-80

  • Backgound: bg-blue-warm-80
  • Text Color: text-blue-warm-80
  • blue-warm-80

blue-warm-90

  • Backgound: bg-blue-warm-90
  • Text Color: text-blue-warm-90
  • blue-warm-90

blue-warm vivid

blue-warm-20v

  • Backgound: bg-blue-warm-20v
  • Text Color: text-blue-warm-20v
  • blue-warm-20v

blue-warm-30v

  • Backgound: bg-blue-warm-30v
  • Text Color: text-blue-warm-30v
  • blue-warm-30v

blue-warm-40v

  • Backgound: bg-blue-warm-40v
  • Text Color: text-blue-warm-40v
  • blue-warm-40v

blue-warm-50v

  • Backgound: bg-blue-warm-50v
  • Text Color: text-blue-warm-50v
  • blue-warm-50v
  • primary-vivid

blue-warm-60v

  • Backgound: bg-blue-warm-60v
  • Text Color: text-blue-warm-60v
  • blue-warm-60v

blue-warm-70v

  • Backgound: bg-blue-warm-70v
  • Text Color: text-blue-warm-70v
  • blue-warm-70v
  • primary-dark

blue-warm-80v

  • Backgound: bg-blue-warm-80v
  • Text Color: text-blue-warm-80v
  • blue-warm-80v
  • primary-darker

cyan

cyan-5

  • Backgound: bg-cyan-5
  • Text Color: text-cyan-5
  • cyan-5
  • info-lighter

cyan-10

  • Backgound: bg-cyan-10
  • Text Color: text-cyan-10
  • cyan-10

cyan-20

  • Backgound: bg-cyan-20
  • Text Color: text-cyan-20
  • cyan-20
  • info-light

cyan-30

  • Backgound: bg-cyan-30
  • Text Color: text-cyan-30
  • cyan-30

cyan-40

  • Backgound: bg-cyan-40
  • Text Color: text-cyan-40
  • cyan-40

cyan-50

  • Backgound: bg-cyan-50
  • Text Color: text-cyan-50
  • cyan-50

cyan-60

  • Backgound: bg-cyan-60
  • Text Color: text-cyan-60
  • cyan-60

cyan-70

  • Backgound: bg-cyan-70
  • Text Color: text-cyan-70
  • cyan-70

cyan-80

  • Backgound: bg-cyan-80
  • Text Color: text-cyan-80
  • cyan-80

cyan-90

  • Backgound: bg-cyan-90
  • Text Color: text-cyan-90
  • cyan-90

cyan vivid

cyan-10v

  • Backgound: bg-cyan-10v
  • Text Color: text-cyan-10v
  • cyan-10v

cyan-20v

  • Backgound: bg-cyan-20v
  • Text Color: text-cyan-20v
  • cyan-20v

cyan-30v

  • Backgound: bg-cyan-30v
  • Text Color: text-cyan-30v
  • cyan-30v
  • accent-cool

cyan-40v

  • Backgound: bg-cyan-40v
  • Text Color: text-cyan-40v
  • cyan-40v
  • info-dark

gold

gold-5

  • Backgound: bg-gold-5
  • Text Color: text-gold-5
  • gold-5

gold-10

  • Backgound: bg-gold-10
  • Text Color: text-gold-10
  • gold-10

gold-20

  • Backgound: bg-gold-20
  • Text Color: text-gold-20
  • gold-20

gold-30

  • Backgound: bg-gold-30
  • Text Color: text-gold-30
  • gold-30

gold-40

  • Backgound: bg-gold-40
  • Text Color: text-gold-40
  • gold-40

gold-50

  • Backgound: bg-gold-50
  • Text Color: text-gold-50
  • gold-50

gold-60

  • Backgound: bg-gold-60
  • Text Color: text-gold-60
  • gold-60

gold-70

  • Backgound: bg-gold-70
  • Text Color: text-gold-70
  • gold-70

gold-80

  • Backgound: bg-gold-80
  • Text Color: text-gold-80
  • gold-80

gold-90

  • Backgound: bg-gold-90
  • Text Color: text-gold-90
  • gold-90

gold vivid

gold-5v

  • Backgound: bg-gold-5v
  • Text Color: text-gold-5v
  • gold-5v

gold-10v

  • Backgound: bg-gold-10v
  • Text Color: text-gold-10v
  • gold-10v

gold-20v

  • Backgound: bg-gold-20v
  • Text Color: text-gold-20v
  • gold-20v

gold-30v

  • Backgound: bg-gold-30v
  • Text Color: text-gold-30v
  • gold-30v
  • warning-dark

gold-40v

  • Backgound: bg-gold-40v
  • Text Color: text-gold-40v
  • gold-40v

gold-50v

  • Backgound: bg-gold-50v
  • Text Color: text-gold-50v
  • gold-50v
  • warning-darker

gray

gray-1

  • Backgound: bg-gray-1
  • Text Color: text-gray-1
  • gray-1

gray-2

  • Backgound: bg-gray-2
  • Text Color: text-gray-2
  • gray-2

gray-3

  • Backgound: bg-gray-3
  • Text Color: text-gray-3
  • gray-3

gray-4

  • Backgound: bg-gray-4
  • Text Color: text-gray-4
  • gray-4

gray-5

  • Backgound: bg-gray-5
  • Text Color: text-gray-5
  • gray-5
  • base-lightest

gray-10

  • Backgound: bg-gray-10
  • Text Color: text-gray-10
  • gray-10
  • disabled-light

gray-20

  • Backgound: bg-gray-20
  • Text Color: text-gray-20
  • gray-20
  • disabled

gray-30

  • Backgound: bg-gray-30
  • Text Color: text-gray-30
  • gray-30
  • disabled-dark

gray-40

  • Backgound: bg-gray-40
  • Text Color: text-gray-40
  • gray-40

gray-50

  • Backgound: bg-gray-50
  • Text Color: text-gray-50
  • gray-50

gray-60

  • Backgound: bg-gray-60
  • Text Color: text-gray-60
  • gray-60

gray-70

  • Backgound: bg-gray-70
  • Text Color: text-gray-70
  • gray-70

gray-80

  • Backgound: bg-gray-80
  • Text Color: text-gray-80
  • gray-80

gray-90

  • Backgound: bg-gray-90
  • Text Color: text-gray-90
  • gray-90
  • base-darkest , ink

gray-cool

gray-cool-1

  • Backgound: bg-gray-cool-1
  • Text Color: text-gray-cool-1
  • gray-cool-1

gray-cool-2

  • Backgound: bg-gray-cool-2
  • Text Color: text-gray-cool-2
  • gray-cool-2

gray-cool-3

  • Backgound: bg-gray-cool-3
  • Text Color: text-gray-cool-3
  • gray-cool-3

gray-cool-4

  • Backgound: bg-gray-cool-4
  • Text Color: text-gray-cool-4
  • gray-cool-4

gray-cool-5

  • Backgound: bg-gray-cool-5
  • Text Color: text-gray-cool-5
  • gray-cool-5

gray-cool-10

  • Backgound: bg-gray-cool-10
  • Text Color: text-gray-cool-10
  • gray-cool-10
  • base-lighter

gray-cool-20

  • Backgound: bg-gray-cool-20
  • Text Color: text-gray-cool-20
  • gray-cool-20

gray-cool-30

  • Backgound: bg-gray-cool-30
  • Text Color: text-gray-cool-30
  • gray-cool-30
  • base-light

gray-cool-40

  • Backgound: bg-gray-cool-40
  • Text Color: text-gray-cool-40
  • gray-cool-40

gray-cool-50

  • Backgound: bg-gray-cool-50
  • Text Color: text-gray-cool-50
  • gray-cool-50
  • base

gray-cool-60

  • Backgound: bg-gray-cool-60
  • Text Color: text-gray-cool-60
  • gray-cool-60
  • base-dark

gray-cool-70

  • Backgound: bg-gray-cool-70
  • Text Color: text-gray-cool-70
  • gray-cool-70
  • base-darker

gray-cool-80

  • Backgound: bg-gray-cool-80
  • Text Color: text-gray-cool-80
  • gray-cool-80

gray-cool-90

  • Backgound: bg-gray-cool-90
  • Text Color: text-gray-cool-90
  • gray-cool-90

gray-warm

gray-warm-1

  • Backgound: bg-gray-warm-1
  • Text Color: text-gray-warm-1
  • gray-warm-1

gray-warm-2

  • Backgound: bg-gray-warm-2
  • Text Color: text-gray-warm-2
  • gray-warm-2

gray-warm-3

  • Backgound: bg-gray-warm-3
  • Text Color: text-gray-warm-3
  • gray-warm-3

gray-warm-4

  • Backgound: bg-gray-warm-4
  • Text Color: text-gray-warm-4
  • gray-warm-4

gray-warm-5

  • Backgound: bg-gray-warm-5
  • Text Color: text-gray-warm-5
  • gray-warm-5

gray-warm-10

  • Backgound: bg-gray-warm-10
  • Text Color: text-gray-warm-10
  • gray-warm-10

gray-warm-20

  • Backgound: bg-gray-warm-20
  • Text Color: text-gray-warm-20
  • gray-warm-20

gray-warm-30

  • Backgound: bg-gray-warm-30
  • Text Color: text-gray-warm-30
  • gray-warm-30

gray-warm-40

  • Backgound: bg-gray-warm-40
  • Text Color: text-gray-warm-40
  • gray-warm-40

gray-warm-50

  • Backgound: bg-gray-warm-50
  • Text Color: text-gray-warm-50
  • gray-warm-50

gray-warm-60

  • Backgound: bg-gray-warm-60
  • Text Color: text-gray-warm-60
  • gray-warm-60

gray-warm-70

  • Backgound: bg-gray-warm-70
  • Text Color: text-gray-warm-70
  • gray-warm-70

gray-warm-80

  • Backgound: bg-gray-warm-80
  • Text Color: text-gray-warm-80
  • gray-warm-80

gray-warm-90

  • Backgound: bg-gray-warm-90
  • Text Color: text-gray-warm-90
  • gray-warm-90

green

green-5

  • Backgound: bg-green-5
  • Text Color: text-green-5
  • green-5

green-10

  • Backgound: bg-green-10
  • Text Color: text-green-10
  • green-10

green-20

  • Backgound: bg-green-20
  • Text Color: text-green-20
  • green-20

green-30

  • Backgound: bg-green-30
  • Text Color: text-green-30
  • green-30

green-40

  • Backgound: bg-green-40
  • Text Color: text-green-40
  • green-40

green-50

  • Backgound: bg-green-50
  • Text Color: text-green-50
  • green-50

green-60

  • Backgound: bg-green-60
  • Text Color: text-green-60
  • green-60

green-70

  • Backgound: bg-green-70
  • Text Color: text-green-70
  • green-70

green-80

  • Backgound: bg-green-80
  • Text Color: text-green-80
  • green-80

green-90

  • Backgound: bg-green-90
  • Text Color: text-green-90
  • green-90

green vivid

green-5v

  • Backgound: bg-green-5v
  • Text Color: text-green-5v
  • green-5v

green-10v

  • Backgound: bg-green-10v
  • Text Color: text-green-10v
  • green-10v

green-20v

  • Backgound: bg-green-20v
  • Text Color: text-green-20v
  • green-20v

green-30v

  • Backgound: bg-green-30v
  • Text Color: text-green-30v
  • green-30v

green-40v

  • Backgound: bg-green-40v
  • Text Color: text-green-40v
  • green-40v

green-50v

  • Backgound: bg-green-50v
  • Text Color: text-green-50v
  • green-50v

green-cool

green-cool-5

  • Backgound: bg-green-cool-5
  • Text Color: text-green-cool-5
  • green-cool-5
  • success-lighter

green-cool-10

  • Backgound: bg-green-cool-10
  • Text Color: text-green-cool-10
  • green-cool-10

green-cool-20

  • Backgound: bg-green-cool-20
  • Text Color: text-green-cool-20
  • green-cool-20

green-cool-30

  • Backgound: bg-green-cool-30
  • Text Color: text-green-cool-30
  • green-cool-30

green-cool-40

  • Backgound: bg-green-cool-40
  • Text Color: text-green-cool-40
  • green-cool-40

green-cool-50

  • Backgound: bg-green-cool-50
  • Text Color: text-green-cool-50
  • green-cool-50
  • success-dark

green-cool-60

  • Backgound: bg-green-cool-60
  • Text Color: text-green-cool-60
  • green-cool-60
  • success-darker

green-cool-70

  • Backgound: bg-green-cool-70
  • Text Color: text-green-cool-70
  • green-cool-70

green-cool-80

  • Backgound: bg-green-cool-80
  • Text Color: text-green-cool-80
  • green-cool-80

green-cool-90

  • Backgound: bg-green-cool-90
  • Text Color: text-green-cool-90
  • green-cool-90

green-cool vivid

green-cool-5v

  • Backgound: bg-green-cool-5v
  • Text Color: text-green-cool-5v
  • green-cool-5v

green-cool-10v

  • Backgound: bg-green-cool-10v
  • Text Color: text-green-cool-10v
  • green-cool-10v

green-cool-20v

  • Backgound: bg-green-cool-20v
  • Text Color: text-green-cool-20v
  • green-cool-20v
  • success-light

green-cool-30v

  • Backgound: bg-green-cool-30v
  • Text Color: text-green-cool-30v
  • green-cool-30v

green-cool-40v

  • Backgound: bg-green-cool-40v
  • Text Color: text-green-cool-40v
  • green-cool-40v
  • success

green-cool-50v

  • Backgound: bg-green-cool-50v
  • Text Color: text-green-cool-50v
  • green-cool-50v

green-warm

green-warm-5

  • Backgound: bg-green-warm-5
  • Text Color: text-green-warm-5
  • green-warm-5

green-warm-10

  • Backgound: bg-green-warm-10
  • Text Color: text-green-warm-10
  • green-warm-10

green-warm-20

  • Backgound: bg-green-warm-20
  • Text Color: text-green-warm-20
  • green-warm-20

green-warm-30

  • Backgound: bg-green-warm-30
  • Text Color: text-green-warm-30
  • green-warm-30

green-warm-40

  • Backgound: bg-green-warm-40
  • Text Color: text-green-warm-40
  • green-warm-40

green-warm-50

  • Backgound: bg-green-warm-50
  • Text Color: text-green-warm-50
  • green-warm-50

green-warm-60

  • Backgound: bg-green-warm-60
  • Text Color: text-green-warm-60
  • green-warm-60

green-warm-70

  • Backgound: bg-green-warm-70
  • Text Color: text-green-warm-70
  • green-warm-70

green-warm-80

  • Backgound: bg-green-warm-80
  • Text Color: text-green-warm-80
  • green-warm-80

green-warm-90

  • Backgound: bg-green-warm-90
  • Text Color: text-green-warm-90
  • green-warm-90

green-warm vivid

green-warm-5v

  • Backgound: bg-green-warm-5v
  • Text Color: text-green-warm-5v
  • green-warm-5v

green-warm-10v

  • Backgound: bg-green-warm-10v
  • Text Color: text-green-warm-10v
  • green-warm-10v

green-warm-20v

  • Backgound: bg-green-warm-20v
  • Text Color: text-green-warm-20v
  • green-warm-20v

green-warm-30v

  • Backgound: bg-green-warm-30v
  • Text Color: text-green-warm-30v
  • green-warm-30v

green-warm-40v

  • Backgound: bg-green-warm-40v
  • Text Color: text-green-warm-40v
  • green-warm-40v

green-warm-50v

  • Backgound: bg-green-warm-50v
  • Text Color: text-green-warm-50v
  • green-warm-50v

indigo

indigo-5

  • Backgound: bg-indigo-5
  • Text Color: text-indigo-5
  • indigo-5

indigo-10

  • Backgound: bg-indigo-10
  • Text Color: text-indigo-10
  • indigo-10

indigo-20

  • Backgound: bg-indigo-20
  • Text Color: text-indigo-20
  • indigo-20

indigo-30

  • Backgound: bg-indigo-30
  • Text Color: text-indigo-30
  • indigo-30

indigo-40

  • Backgound: bg-indigo-40
  • Text Color: text-indigo-40
  • indigo-40

indigo-50

  • Backgound: bg-indigo-50
  • Text Color: text-indigo-50
  • indigo-50

indigo-60

  • Backgound: bg-indigo-60
  • Text Color: text-indigo-60
  • indigo-60

indigo-70

  • Backgound: bg-indigo-70
  • Text Color: text-indigo-70
  • indigo-70

indigo-80

  • Backgound: bg-indigo-80
  • Text Color: text-indigo-80
  • indigo-80

indigo-90

  • Backgound: bg-indigo-90
  • Text Color: text-indigo-90
  • indigo-90

indigo vivid

indigo-20v

  • Backgound: bg-indigo-20v
  • Text Color: text-indigo-20v
  • indigo-20v

indigo-30v

  • Backgound: bg-indigo-30v
  • Text Color: text-indigo-30v
  • indigo-30v

indigo-50v

  • Backgound: bg-indigo-50v
  • Text Color: text-indigo-50v
  • indigo-50v

indigo-60v

  • Backgound: bg-indigo-60v
  • Text Color: text-indigo-60v
  • indigo-60v

indigo-cool

indigo-cool-5

  • Backgound: bg-indigo-cool-5
  • Text Color: text-indigo-cool-5
  • indigo-cool-5

indigo-cool-10

  • Backgound: bg-indigo-cool-10
  • Text Color: text-indigo-cool-10
  • indigo-cool-10

indigo-cool-20

  • Backgound: bg-indigo-cool-20
  • Text Color: text-indigo-cool-20
  • indigo-cool-20

indigo-cool-30

  • Backgound: bg-indigo-cool-30
  • Text Color: text-indigo-cool-30
  • indigo-cool-30

indigo-cool-40

  • Backgound: bg-indigo-cool-40
  • Text Color: text-indigo-cool-40
  • indigo-cool-40

indigo-cool-50

  • Backgound: bg-indigo-cool-50
  • Text Color: text-indigo-cool-50
  • indigo-cool-50

indigo-cool-60

  • Backgound: bg-indigo-cool-60
  • Text Color: text-indigo-cool-60
  • indigo-cool-60

indigo-cool-70

  • Backgound: bg-indigo-cool-70
  • Text Color: text-indigo-cool-70
  • indigo-cool-70

indigo-cool-80

  • Backgound: bg-indigo-cool-80
  • Text Color: text-indigo-cool-80
  • indigo-cool-80

indigo-cool-90

  • Backgound: bg-indigo-cool-90
  • Text Color: text-indigo-cool-90
  • indigo-cool-90

indigo-cool vivid

indigo-cool-40v

  • Backgound: bg-indigo-cool-40v
  • Text Color: text-indigo-cool-40v
  • indigo-cool-40v

indigo-cool-60v

  • Backgound: bg-indigo-cool-60v
  • Text Color: text-indigo-cool-60v
  • indigo-cool-60v

indigo-warm

indigo-warm-5

  • Backgound: bg-indigo-warm-5
  • Text Color: text-indigo-warm-5
  • indigo-warm-5

indigo-warm-10

  • Backgound: bg-indigo-warm-10
  • Text Color: text-indigo-warm-10
  • indigo-warm-10

indigo-warm-20

  • Backgound: bg-indigo-warm-20
  • Text Color: text-indigo-warm-20
  • indigo-warm-20

indigo-warm-30

  • Backgound: bg-indigo-warm-30
  • Text Color: text-indigo-warm-30
  • indigo-warm-30

indigo-warm-40

  • Backgound: bg-indigo-warm-40
  • Text Color: text-indigo-warm-40
  • indigo-warm-40

indigo-warm-50

  • Backgound: bg-indigo-warm-50
  • Text Color: text-indigo-warm-50
  • indigo-warm-50

indigo-warm-60

  • Backgound: bg-indigo-warm-60
  • Text Color: text-indigo-warm-60
  • indigo-warm-60

indigo-warm-70

  • Backgound: bg-indigo-warm-70
  • Text Color: text-indigo-warm-70
  • indigo-warm-70

indigo-warm-80

  • Backgound: bg-indigo-warm-80
  • Text Color: text-indigo-warm-80
  • indigo-warm-80

indigo-warm-90

  • Backgound: bg-indigo-warm-90
  • Text Color: text-indigo-warm-90
  • indigo-warm-90

indigo-warm vivid

indigo-warm-30v

  • Backgound: bg-indigo-warm-30v
  • Text Color: text-indigo-warm-30v
  • indigo-warm-30v

indigo-warm-40v

  • Backgound: bg-indigo-warm-40v
  • Text Color: text-indigo-warm-40v
  • indigo-warm-40v

indigo-warm-50v

  • Backgound: bg-indigo-warm-50v
  • Text Color: text-indigo-warm-50v
  • indigo-warm-50v

indigo-warm-60v

  • Backgound: bg-indigo-warm-60v
  • Text Color: text-indigo-warm-60v
  • indigo-warm-60v

magenta

magenta-5

  • Backgound: bg-magenta-5
  • Text Color: text-magenta-5
  • magenta-5

magenta-10

  • Backgound: bg-magenta-10
  • Text Color: text-magenta-10
  • magenta-10

magenta-20

  • Backgound: bg-magenta-20
  • Text Color: text-magenta-20
  • magenta-20

magenta-30

  • Backgound: bg-magenta-30
  • Text Color: text-magenta-30
  • magenta-30

magenta-40

  • Backgound: bg-magenta-40
  • Text Color: text-magenta-40
  • magenta-40

magenta-50

  • Backgound: bg-magenta-50
  • Text Color: text-magenta-50
  • magenta-50

magenta-60

  • Backgound: bg-magenta-60
  • Text Color: text-magenta-60
  • magenta-60

magenta-70

  • Backgound: bg-magenta-70
  • Text Color: text-magenta-70
  • magenta-70

magenta-80

  • Backgound: bg-magenta-80
  • Text Color: text-magenta-80
  • magenta-80

magenta-90

  • Backgound: bg-magenta-90
  • Text Color: text-magenta-90
  • magenta-90

magenta vivid

magenta-10v

  • Backgound: bg-magenta-10v
  • Text Color: text-magenta-10v
  • magenta-10v

magenta-20v

  • Backgound: bg-magenta-20v
  • Text Color: text-magenta-20v
  • magenta-20v

magenta-30v

  • Backgound: bg-magenta-30v
  • Text Color: text-magenta-30v
  • magenta-30v

magenta-40v

  • Backgound: bg-magenta-40v
  • Text Color: text-magenta-40v
  • magenta-40v

magenta-50v

  • Backgound: bg-magenta-50v
  • Text Color: text-magenta-50v
  • magenta-50v

magenta-60v

  • Backgound: bg-magenta-60v
  • Text Color: text-magenta-60v
  • magenta-60v

mint

mint-5

  • Backgound: bg-mint-5
  • Text Color: text-mint-5
  • mint-5

mint-10

  • Backgound: bg-mint-10
  • Text Color: text-mint-10
  • mint-10

mint-20

  • Backgound: bg-mint-20
  • Text Color: text-mint-20
  • mint-20

mint-30

  • Backgound: bg-mint-30
  • Text Color: text-mint-30
  • mint-30

mint-40

  • Backgound: bg-mint-40
  • Text Color: text-mint-40
  • mint-40

mint-50

  • Backgound: bg-mint-50
  • Text Color: text-mint-50
  • mint-50

mint-60

  • Backgound: bg-mint-60
  • Text Color: text-mint-60
  • mint-60

mint-70

  • Backgound: bg-mint-70
  • Text Color: text-mint-70
  • mint-70

mint-80

  • Backgound: bg-mint-80
  • Text Color: text-mint-80
  • mint-80

mint-90

  • Backgound: bg-mint-90
  • Text Color: text-mint-90
  • mint-90

mint vivid

mint-5v

  • Backgound: bg-mint-5v
  • Text Color: text-mint-5v
  • mint-5v

mint-10v

  • Backgound: bg-mint-10v
  • Text Color: text-mint-10v
  • mint-10v

mint-20v

  • Backgound: bg-mint-20v
  • Text Color: text-mint-20v
  • mint-20v

mint-30v

  • Backgound: bg-mint-30v
  • Text Color: text-mint-30v
  • mint-30v

mint-60v

  • Backgound: bg-mint-60v
  • Text Color: text-mint-60v
  • mint-60v

mint-cool

mint-cool-5

  • Backgound: bg-mint-cool-5
  • Text Color: text-mint-cool-5
  • mint-cool-5

mint-cool-10

  • Backgound: bg-mint-cool-10
  • Text Color: text-mint-cool-10
  • mint-cool-10

mint-cool-20

  • Backgound: bg-mint-cool-20
  • Text Color: text-mint-cool-20
  • mint-cool-20

mint-cool-30

  • Backgound: bg-mint-cool-30
  • Text Color: text-mint-cool-30
  • mint-cool-30

mint-cool-40

  • Backgound: bg-mint-cool-40
  • Text Color: text-mint-cool-40
  • mint-cool-40

mint-cool-50

  • Backgound: bg-mint-cool-50
  • Text Color: text-mint-cool-50
  • mint-cool-50

mint-cool-60

  • Backgound: bg-mint-cool-60
  • Text Color: text-mint-cool-60
  • mint-cool-60

mint-cool-70

  • Backgound: bg-mint-cool-70
  • Text Color: text-mint-cool-70
  • mint-cool-70

mint-cool-80

  • Backgound: bg-mint-cool-80
  • Text Color: text-mint-cool-80
  • mint-cool-80

mint-cool-90

  • Backgound: bg-mint-cool-90
  • Text Color: text-mint-cool-90
  • mint-cool-90

mint-cool vivid

mint-cool-5v

  • Backgound: bg-mint-cool-5v
  • Text Color: text-mint-cool-5v
  • mint-cool-5v

mint-cool-10v

  • Backgound: bg-mint-cool-10v
  • Text Color: text-mint-cool-10v
  • mint-cool-10v

mint-cool-20v

  • Backgound: bg-mint-cool-20v
  • Text Color: text-mint-cool-20v
  • mint-cool-20v

mint-cool-30v

  • Backgound: bg-mint-cool-30v
  • Text Color: text-mint-cool-30v
  • mint-cool-30v

mint-cool-40v

  • Backgound: bg-mint-cool-40v
  • Text Color: text-mint-cool-40v
  • mint-cool-40v

orange

orange-5

  • Backgound: bg-orange-5
  • Text Color: text-orange-5
  • orange-5

orange-10

  • Backgound: bg-orange-10
  • Text Color: text-orange-10
  • orange-10
  • accent-warm-lighter

orange-20

  • Backgound: bg-orange-20
  • Text Color: text-orange-20
  • orange-20

orange-30

  • Backgound: bg-orange-30
  • Text Color: text-orange-30
  • orange-30

orange-40

  • Backgound: bg-orange-40
  • Text Color: text-orange-40
  • orange-40

orange-50

  • Backgound: bg-orange-50
  • Text Color: text-orange-50
  • orange-50

orange-60

  • Backgound: bg-orange-60
  • Text Color: text-orange-60
  • orange-60
  • accent-warm-darker

orange-70

  • Backgound: bg-orange-70
  • Text Color: text-orange-70
  • orange-70

orange-80

  • Backgound: bg-orange-80
  • Text Color: text-orange-80
  • orange-80

orange-90

  • Backgound: bg-orange-90
  • Text Color: text-orange-90
  • orange-90

orange vivid

orange-5v

  • Backgound: bg-orange-5v
  • Text Color: text-orange-5v
  • orange-5v

orange-10v

  • Backgound: bg-orange-10v
  • Text Color: text-orange-10v
  • orange-10v

orange-20v

  • Backgound: bg-orange-20v
  • Text Color: text-orange-20v
  • orange-20v
  • accent-warm-light

orange-30v

  • Backgound: bg-orange-30v
  • Text Color: text-orange-30v
  • orange-30v
  • accent-warm

orange-40v

  • Backgound: bg-orange-40v
  • Text Color: text-orange-40v
  • orange-40v

orange-50v

  • Backgound: bg-orange-50v
  • Text Color: text-orange-50v
  • orange-50v
  • accent-warm-dark

orange-warm

orange-warm-5

  • Backgound: bg-orange-warm-5
  • Text Color: text-orange-warm-5
  • orange-warm-5

orange-warm-10

  • Backgound: bg-orange-warm-10
  • Text Color: text-orange-warm-10
  • orange-warm-10

orange-warm-20

  • Backgound: bg-orange-warm-20
  • Text Color: text-orange-warm-20
  • orange-warm-20

orange-warm-30

  • Backgound: bg-orange-warm-30
  • Text Color: text-orange-warm-30
  • orange-warm-30

orange-warm-40

  • Backgound: bg-orange-warm-40
  • Text Color: text-orange-warm-40
  • orange-warm-40

orange-warm-50

  • Backgound: bg-orange-warm-50
  • Text Color: text-orange-warm-50
  • orange-warm-50

orange-warm-60

  • Backgound: bg-orange-warm-60
  • Text Color: text-orange-warm-60
  • orange-warm-60

orange-warm-70

  • Backgound: bg-orange-warm-70
  • Text Color: text-orange-warm-70
  • orange-warm-70

orange-warm-80

  • Backgound: bg-orange-warm-80
  • Text Color: text-orange-warm-80
  • orange-warm-80

orange-warm-90

  • Backgound: bg-orange-warm-90
  • Text Color: text-orange-warm-90
  • orange-warm-90

orange-warm vivid

orange-warm-20v

  • Backgound: bg-orange-warm-20v
  • Text Color: text-orange-warm-20v
  • orange-warm-20v

orange-warm-30v

  • Backgound: bg-orange-warm-30v
  • Text Color: text-orange-warm-30v
  • orange-warm-30v

orange-warm-40v

  • Backgound: bg-orange-warm-40v
  • Text Color: text-orange-warm-40v
  • orange-warm-40v

orange-warm-50v

  • Backgound: bg-orange-warm-50v
  • Text Color: text-orange-warm-50v
  • orange-warm-50v

red

red-5

  • Backgound: bg-red-5
  • Text Color: text-red-5
  • red-5

red-10

  • Backgound: bg-red-10
  • Text Color: text-red-10
  • red-10

red-20

  • Backgound: bg-red-20
  • Text Color: text-red-20
  • red-20

red-30

  • Backgound: bg-red-30
  • Text Color: text-red-30
  • red-30
  • secondary-light

red-40

  • Backgound: bg-red-40
  • Text Color: text-red-40
  • red-40

red-50

  • Backgound: bg-red-50
  • Text Color: text-red-50
  • red-50
  • secondary

red-60

  • Backgound: bg-red-60
  • Text Color: text-red-60
  • red-60

red-70

  • Backgound: bg-red-70
  • Text Color: text-red-70
  • red-70

red-80

  • Backgound: bg-red-80
  • Text Color: text-red-80
  • red-80

red-90

  • Backgound: bg-red-90
  • Text Color: text-red-90
  • red-90

red vivid

red-10v

  • Backgound: bg-red-10v
  • Text Color: text-red-10v
  • red-10v

red-20v

  • Backgound: bg-red-20v
  • Text Color: text-red-20v
  • red-20v

red-30v

  • Backgound: bg-red-30v
  • Text Color: text-red-30v
  • red-30v

red-40v

  • Backgound: bg-red-40v
  • Text Color: text-red-40v
  • red-40v

red-50v

  • Backgound: bg-red-50v
  • Text Color: text-red-50v
  • red-50v

red-60v

  • Backgound: bg-red-60v
  • Text Color: text-red-60v
  • red-60v
  • error-dark
  • secondary-dark

red-70v

  • Backgound: bg-red-70v
  • Text Color: text-red-70v
  • red-70v
  • error-darker
  • secondary-darker

red-80v

  • Backgound: bg-red-80v
  • Text Color: text-red-80v
  • red-80v

red-cool

red-cool-5

  • Backgound: bg-red-cool-5
  • Text Color: text-red-cool-5
  • red-cool-5

red-cool-10

  • Backgound: bg-red-cool-10
  • Text Color: text-red-cool-10
  • red-cool-10

red-cool-20

  • Backgound: bg-red-cool-20
  • Text Color: text-red-cool-20
  • red-cool-20

red-cool-30

  • Backgound: bg-red-cool-30
  • Text Color: text-red-cool-30
  • red-cool-30

red-cool-40

  • Backgound: bg-red-cool-40
  • Text Color: text-red-cool-40
  • red-cool-40

red-cool-50

  • Backgound: bg-red-cool-50
  • Text Color: text-red-cool-50
  • red-cool-50

red-cool-60

  • Backgound: bg-red-cool-60
  • Text Color: text-red-cool-60
  • red-cool-60

red-cool-70

  • Backgound: bg-red-cool-70
  • Text Color: text-red-cool-70
  • red-cool-70

red-cool-80

  • Backgound: bg-red-cool-80
  • Text Color: text-red-cool-80
  • red-cool-80

red-cool-90

  • Backgound: bg-red-cool-90
  • Text Color: text-red-cool-90
  • red-cool-90

red-cool vivid

red-cool-10v

  • Backgound: bg-red-cool-10v
  • Text Color: text-red-cool-10v
  • red-cool-10v
  • secondary-lighter

red-cool-20v

  • Backgound: bg-red-cool-20v
  • Text Color: text-red-cool-20v
  • red-cool-20v

red-cool-30v

  • Backgound: bg-red-cool-30v
  • Text Color: text-red-cool-30v
  • red-cool-30v

red-cool-40v

  • Backgound: bg-red-cool-40v
  • Text Color: text-red-cool-40v
  • red-cool-40v

red-cool-50v

  • Backgound: bg-red-cool-50v
  • Text Color: text-red-cool-50v
  • red-cool-50v
  • secondary-vivid

red-cool-60v

  • Backgound: bg-red-cool-60v
  • Text Color: text-red-cool-60v
  • red-cool-60v

red-cool-70v

  • Backgound: bg-red-cool-70v
  • Text Color: text-red-cool-70v
  • red-cool-70v

red-warm

red-warm-5

  • Backgound: bg-red-warm-5
  • Text Color: text-red-warm-5
  • red-warm-5

red-warm-10

  • Backgound: bg-red-warm-10
  • Text Color: text-red-warm-10
  • red-warm-10
  • error-lighter

red-warm-20

  • Backgound: bg-red-warm-20
  • Text Color: text-red-warm-20
  • red-warm-20

red-warm-30

  • Backgound: bg-red-warm-30
  • Text Color: text-red-warm-30
  • red-warm-30
  • error-light

red-warm-40

  • Backgound: bg-red-warm-40
  • Text Color: text-red-warm-40
  • red-warm-40

red-warm-50

  • Backgound: bg-red-warm-50
  • Text Color: text-red-warm-50
  • red-warm-50
  • error

red-warm-60

  • Backgound: bg-red-warm-60
  • Text Color: text-red-warm-60
  • red-warm-60

red-warm-70

  • Backgound: bg-red-warm-70
  • Text Color: text-red-warm-70
  • red-warm-70

red-warm-80

  • Backgound: bg-red-warm-80
  • Text Color: text-red-warm-80
  • red-warm-80

red-warm-90

  • Backgound: bg-red-warm-90
  • Text Color: text-red-warm-90
  • red-warm-90

red-warm vivid

red-warm-20v

  • Backgound: bg-red-warm-20v
  • Text Color: text-red-warm-20v
  • red-warm-20v

red-warm-30v

  • Backgound: bg-red-warm-30v
  • Text Color: text-red-warm-30v
  • red-warm-30v

red-warm-40v

  • Backgound: bg-red-warm-40v
  • Text Color: text-red-warm-40v
  • red-warm-40v

red-warm-50v

  • Backgound: bg-red-warm-50v
  • Text Color: text-red-warm-50v
  • red-warm-50v

violet

violet-5

  • Backgound: bg-violet-5
  • Text Color: text-violet-5
  • violet-5

violet-10

  • Backgound: bg-violet-10
  • Text Color: text-violet-10
  • violet-10

violet-20

  • Backgound: bg-violet-20
  • Text Color: text-violet-20
  • violet-20

violet-30

  • Backgound: bg-violet-30
  • Text Color: text-violet-30
  • violet-30

violet-40

  • Backgound: bg-violet-40
  • Text Color: text-violet-40
  • violet-40

violet-50

  • Backgound: bg-violet-50
  • Text Color: text-violet-50
  • violet-50

violet-60

  • Backgound: bg-violet-60
  • Text Color: text-violet-60
  • violet-60

violet-70

  • Backgound: bg-violet-70
  • Text Color: text-violet-70
  • violet-70

violet-80

  • Backgound: bg-violet-80
  • Text Color: text-violet-80
  • violet-80

violet-90

  • Backgound: bg-violet-90
  • Text Color: text-violet-90
  • violet-90

violet vivid

violet-10v

  • Backgound: bg-violet-10v
  • Text Color: text-violet-10v
  • violet-10v

violet-20v

  • Backgound: bg-violet-20v
  • Text Color: text-violet-20v
  • violet-20v

violet-30v

  • Backgound: bg-violet-30v
  • Text Color: text-violet-30v
  • violet-30v

violet-40v

  • Backgound: bg-violet-40v
  • Text Color: text-violet-40v
  • violet-40v

violet-50v

  • Backgound: bg-violet-50v
  • Text Color: text-violet-50v
  • violet-50v

violet-60v

  • Backgound: bg-violet-60v
  • Text Color: text-violet-60v
  • violet-60v

violet-70v

  • Backgound: bg-violet-70v
  • Text Color: text-violet-70v
  • violet-70v

violet-warm

violet-warm-5

  • Backgound: bg-violet-warm-5
  • Text Color: text-violet-warm-5
  • violet-warm-5

violet-warm-10

  • Backgound: bg-violet-warm-10
  • Text Color: text-violet-warm-10
  • violet-warm-10

violet-warm-20

  • Backgound: bg-violet-warm-20
  • Text Color: text-violet-warm-20
  • violet-warm-20

violet-warm-30

  • Backgound: bg-violet-warm-30
  • Text Color: text-violet-warm-30
  • violet-warm-30

violet-warm-40

  • Backgound: bg-violet-warm-40
  • Text Color: text-violet-warm-40
  • violet-warm-40

violet-warm-50

  • Backgound: bg-violet-warm-50
  • Text Color: text-violet-warm-50
  • violet-warm-50

violet-warm-60

  • Backgound: bg-violet-warm-60
  • Text Color: text-violet-warm-60
  • violet-warm-60

violet-warm-70

  • Backgound: bg-violet-warm-70
  • Text Color: text-violet-warm-70
  • violet-warm-70

violet-warm-80

  • Backgound: bg-violet-warm-80
  • Text Color: text-violet-warm-80
  • violet-warm-80

violet-warm-90

  • Backgound: bg-violet-warm-90
  • Text Color: text-violet-warm-90
  • violet-warm-90

violet-warm vivid

violet-warm-5v

  • Backgound: bg-violet-warm-5v
  • Text Color: text-violet-warm-5v
  • violet-warm-5v

violet-warm-10v

  • Backgound: bg-violet-warm-10v
  • Text Color: text-violet-warm-10v
  • violet-warm-10v

violet-warm-20v

  • Backgound: bg-violet-warm-20v
  • Text Color: text-violet-warm-20v
  • violet-warm-20v

violet-warm-30v

  • Backgound: bg-violet-warm-30v
  • Text Color: text-violet-warm-30v
  • violet-warm-30v

violet-warm-40v

  • Backgound: bg-violet-warm-40v
  • Text Color: text-violet-warm-40v
  • violet-warm-40v

violet-warm-50v

  • Backgound: bg-violet-warm-50v
  • Text Color: text-violet-warm-50v
  • violet-warm-50v

yellow

yellow-5

  • Backgound: bg-yellow-5
  • Text Color: text-yellow-5
  • yellow-5
  • warning-lighter

yellow-10

  • Backgound: bg-yellow-10
  • Text Color: text-yellow-10
  • yellow-10

yellow-20

  • Backgound: bg-yellow-20
  • Text Color: text-yellow-20
  • yellow-20

yellow-30

  • Backgound: bg-yellow-30
  • Text Color: text-yellow-30
  • yellow-30

yellow-40

  • Backgound: bg-yellow-40
  • Text Color: text-yellow-40
  • yellow-40

yellow-50

  • Backgound: bg-yellow-50
  • Text Color: text-yellow-50
  • yellow-50

yellow-60

  • Backgound: bg-yellow-60
  • Text Color: text-yellow-60
  • yellow-60

yellow-70

  • Backgound: bg-yellow-70
  • Text Color: text-yellow-70
  • yellow-70

yellow-80

  • Backgound: bg-yellow-80
  • Text Color: text-yellow-80
  • yellow-80

yellow-90

  • Backgound: bg-yellow-90
  • Text Color: text-yellow-90
  • yellow-90

yellow vivid

yellow-10v

  • Backgound: bg-yellow-10v
  • Text Color: text-yellow-10v
  • yellow-10v
  • warning-light

yellow-20v

  • Backgound: bg-yellow-20v
  • Text Color: text-yellow-20v
  • yellow-20v
  • warning

Page content was last updated: Sunday, March 3, 2019