• Home
  • Visual Style
  • Color

Color

The color system is designed to ensure accessible color contrast between text/icons and backgrounds. All of the colors are baked into component and utility classes, so you should never need to manually use a color value from the color palette.

  • Contrast Grid allows you to see each color’s contrast when paired with other colors in the palette at a glance.

Color Palette

Primary

  • black
    backgrounds
    #0E032A

  • white
    backgrounds, strong text, buttons
    #FAF9FD

  • indigo
    links, strong text, buttons
    #3B1B89

  • purple-200
    backgrounds, links
    #AE45FE

  • purple-400
    backgrounds, links
    #9B20F9

  • yellow
    buttons
    #EDE767

Secondary

  • green
    accent
    #1FD27C

  • orange
    accent
    #DE8E73

  • blue
    accent
    #3D8DDF

Neutral

  • gray-100

    #E9E7ED

  • gray-200

    #9A91B1

  • gray-300

    #78757f

  • gray-400

    #615384

  • gray-700

    #443960