Color Palette
We use a minimal palette to ensure meaningful color application for emphasis, tone, visual cues, and cohesive layouts. Our color combinations follow the WCAG 2.1 AA guidelines for minimum contrast ratios.
This label shows accessible and applicable text and background combinations.
Primary Palette
We use Periwinkle for interactive elements (buttons, icons, and links), Asphalt for header backgrounds in immersive views, and Snow for content area backgrounds.
Periwinkle #575195
Asphalt #353B48
Snow #FAFAFA
Neutral Palette
We use Charcoal for regular text, Gray for disabled text and disabled interactive elements (buttons, icons), and Pale Lilac Gray for table header backgrounds. We use White for text on dark backgrounds as well as card, modal, and panel backgrounds.
Charcoal #4A4A4A
Gray #6B6B6B
Pale Lilac Gray #E9E7EC
White #FFFFFF
Accent Palette
We use the accent palette for data visualization. Salmon indicates a negative connotation and Cyan indicates a positive connotation. Sleet, Midnight, and Lavender all have a neutral connotation. This palette is only for use on a white (#FFFFFF) background, and not for use as text or backgrounds.
Salmon #FF5F4E
Cyan #19A1A9
Sleet #7F97AD
Midnight #2E1B46
Lavender #8B86CA
Functional Palette
We use Forest for success messages and Firetruck for error messages and delete buttons.
Forest #088000
Firetruck #C0392B