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

Back to Top