Color
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.
Accessibility
Both text colors – medium and dark – pass AA (+4.5) on all three background values.
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).
Info
Content about how base colors are used.
Success
Content about how base colors are used.
In Progress
Content about how base colors are used.
Warning
Content about how base colors are used.
Error
Content about how base colors are used.