OpenGov IconCapital Design System


Capital's colors are designed to be clear and accessible. It includes an extensive palette for data visualizations. Colors should be used to elevate the experience, but should not be relied on solely to convey information.

For specific SCSS color variables, use the Token Library .

Neutral Colors

The neutral palette is designed to maximize legibility, accessibility and usability. While the full palette is shown, we limited use within the UI to the seven levels. Each neutral has a primary function within the UI, but can be leveraged for other uses.


Both text colors – medium and dark – pass AA (+4.5) on all three background values.

Foreground: Component background, the focus of the experience
Ground: Full-screen background
Inactive: Hidden tabs, collapsed components
Extra light borders: Component borders
Light borders: Element borders (e.g. tabs, buttons, filters), Text disabled
Not used
Not used
Text medium: Secondary content
Not used
Not used
Text dark: Primary content

Primary Colors

Primary colors are a brighter and more saturated set of blues, customized for buttons, links, and interactions. This palette is designed to pop, helping points of interaction and states stand out from the rest of the UI.

Semantic Colors

Use semantic colors for status icons, badge backgrounds, and modal title bars. A separate value has been selected for text. Text colors pass AA (+4.5) on all background values. Reversed text on fill values passes AA (+4.5).


Content about how base colors are used.


Content about how base colors are used.

In Progress

Content about how base colors are used.


Content about how base colors are used.


Content about how base colors are used.

© 2021 OpenGov