It is essential that all colors used meets accessibility standards, especially ensuring sufficient contrast between text and background (at least 4.5 for body text). State-specific colors for feedback (success, error, warning) must use accessible colors that are clearly distinguishable for all users, including those with color vision deficiencies.
Primary colors
Our primary colors should be applied to key brand elements, such as navigation components and buttons, to reinforce brand identity.
Dark and light theme
Providing users with the option to switch between light and dark themes improves accessibility and allows for a more personalized user experience. Use a light theme for product interfaces during daytime or in illuminated environments, as it improves visibility and readability. A dark theme fits better in low-light or nighttime settings to reduce eye strain and glare, especially for prolonged use. Offering users the choice to switch between themes based on their environment and preferences enhances overall usability and comfort.
Color ratio
This illustrates the recommended color ratio for both light and dark theme. Apply colors with hierarchy in mind - most elements should stay balanced, allowing key information and actions to stand out.
Background- and surface color
Below we showcase the different color combinations recommended for background and surface color. Use light colors on light background and use high contrast to highlight certain content or interactions. For dark theme, it is recommended to avoid light surface colors due to the high contrast and light sensitivity.
Accent colors for validation status updates and data vizualization
Accent colors should be used sparingly, primarily for status updates, validation messages and data visualization. They are reserved for messaging states such as error, success and information, ensuring clarity without overwhelming the interface. A separate color theme is available for data vizualization.
Accent colors for validation status updates and data vizualization - light and dark mode
To support accessibility, status colors must be adjusted for both light and dark modes. Maintain sufficient contrast against the background and reserve status colors for user interface (UI) elements only. Text should always use the recommended typography colors.
Charts and graphs
For charts and graphs, additional colors may be introduced to distinguish data points. Always prioritize readability and accessibility, ensuring clear contrast and that the information is easy to interpret. See all data vizualisation colors in the colors section.
