Consistency of color is critical to maintaining a coherent family of products, and accurately communicating the nature of specific content within an application.

Colors are also used to distinguish where on the screen particular content resides, such as on mobile devices where users need to be able to see visual breaks while scrolling.

Primary palette

• #10132E

  Content

• rgba(16,19,46,.66)

  Labels (#626475)

• #cacdd6

  Borders

• #F2F3F4

  Secondary bkg

• #ffffff

  Card bkg 

• #295ED9

  Interactive items

• rgba(41,94,217,.06)

  Hover (#F3F6FC)

• rgba(41,94,217,.1)

  Selected (#EAEFFA)

• #1F2555

  App header

• #344780

  App search

• #E8EAEF

  App bkg

Secondary palette

• #A6020D

  Dark red

• #D91C29

  Red

• #FFD9DB

  Pale red, pink 

• #C44500

  Dark orange

• #FD6000

  Orange

• #FFE0CC

  Light orange

• #CC8914

  Dark yellow

• #FEB53A

  Yellow

• #FFECCC

  Light yellow 

• #7F9F00

  Dark olive

• #A9D400

  Olive

• #EEF2DA

  Light olive

• #006624

  Dark green

• #20AA50

  Green

• #DAF2E3

  Light green 

• #00647D

  Dark teal

• #179595

  Teal

• #C3E6E6

  Light teal

• #113DA6

  Dark blue

• #295ED9

  Blue

• #E6EDFF

  Light blue 

• #202A79

  Dark purple

• #2B38A1

  Purple

• #D9DDFF

  Light purple

• #A9085B

  Dark magenta

• #E10B81

  Magenta

• #FFD9EE

  Light magenta 

• #3A3C4D

  Dark grey

• #585B73

  Grey

• #CFD1E6

  Light grey

Meaning of color

• Blue - Status - info / no issues, app search background, interaction
• Green - Successes, completions, increases, positive messaging
• Red - Errors, negative messaging, losses, high priority, overdue, important
• Orange - Warnings