Colors enhance the visual appeal and user experience of an interface. They serve as tools to convey information, establish hierarchy and evoke emotions. A consistent color scheme guides users, highlights important elements and creates a cohesive design. Color choices influence how users perceive and interact with the interface.
Copy link to headline:Themes
We include a free and Open Source theme out-of-the-box which supports light and dark mode. It is applied automatically without manual setup required.
Light mode
Dark mode
Protected content
There is more content available here for internal employees of the Schwarz Group.
Copy link to headline:Colors
We offer a wide variety of pre-defined color palettes that can be used universally for different use cases and adapt automatically when switched between light and dark mode.
Variables vs. hard coded colors
We strongly recommend to always the CSS or Figma variables shown below when using colors instead of hard-coding the actual color values. This ensures that the application maintains themeable and adjust correctly between light and dark mode. For more information, refer to our variables documentation.
Copy link to headline:Brand colors
Implement brand colors as minimalist identifiers rather than decorative elements.
Copy link to headline:Primary
The primary brand color serves as the core identifier in every theme.
- Base
Base colors represent a universal color palette that can be used as needed.
100200300400500600700800900 - Text & Icons
Text and icon colors should exclusively be applied to text and icons.
softmediumintensebold - States
We support specific colors for certain states such as borders or focus / outlines to maintain a consistent usage across the design system.
ctacta-hoverborderborder-hoverfocus
Copy link to headline:Secondary
Use the secondary brand color only for predefined accent occasions to maintain system stability.
- Base
Base colors represent a universal color palette that can be used as needed.
100200300400500600700800900 - Text & Icons
Text and icon colors should exclusively be applied to text and icons.
softmediumintensebold
Copy link to headline:Neutral
Used for backgrounds, borders and secondary actions. They provide a subtle contrast that allows the primary colors to stand out.
- Base
Base colors represent a universal color palette that can be used as needed.
100200300400500600700800900 - Text & Icons
Text and icon colors should exclusively be applied to text and icons.
softmediumintenseinverted - States
We support specific colors for certain states such as borders or focus / outlines to maintain a consistent usage across the design system.
cta-disabledborder-neutralborder-disabledfocus-neutral
Copy link to headline:System colors
Use system colors to communicate functional status and provide immediate semantic feedback. These colors are reserved for specific states and must not be used for decorative branding.
Copy link to headline:Danger
The danger variant indicates that urgent intervention is required. Use this variant for critical alerts, destructive actions such as deletions or blocking errors. It signals high-priority risks to help prevent data loss.
- Base
Base colors represent a universal color palette that can be used as needed.
100200300400500600700800900 - Text & Icons
Text and icon colors should exclusively be applied to text and icons.
softmediumintensebold - States
We support specific colors for certain states such as borders or focus / outlines to maintain a consistent usage across the design system.
ctacta-hoverborderborder-hoverfocus
Copy link to headline:Warning
The warning variant indicates a medium-priority caution for scenarios such as security prompts, non-blocking errors or potential consequences. Use this variant to alert the user to proceed with caution.
- Base
Base colors represent a universal color palette that can be used as needed.
100200300400500600700800900 - Text & Icons
Text and icon colors should exclusively be applied to text and icons.
softmediumintensebold
Copy link to headline:Success
The success variant confirms positive outcomes, such as task completion, "Saved" status or healthy system processes. Use this variant to provide reinforcement and task closure.
- Base
Base colors represent a universal color palette that can be used as needed.
100200300400500600700800900 - Text & Icons
Text and icon colors should exclusively be applied to text and icons.
softmediumintensebold - States
We support specific colors for certain states such as borders or focus / outlines to maintain a consistent usage across the design system.
borderborder-hoverfocus
Copy link to headline:Info
The info variant provides objective, neutral information including general updates, tips and straightforward guidance. Use this variant to provide clarity without creating alarm.
- Base
Base colors represent a universal color palette that can be used as needed.
100200300400500600700800900 - Text & Icons
Text and icon colors should exclusively be applied to text and icons.
softmediumintensebold
Copy link to headline:Quantitative colors
Use the quantitative palette exclusively for data visualization to ensure clarity and professional data storytelling.
- Application
Use only for infographics such as bar charts, pie graphs and data-heavy dashboards to distinguish between distinct data segments.
- Constraint
Do not use these colors for standard UI elements (buttons, backgrounds etc.). They are intentionally decoupled from the brand palette to avoid semantic confusion.
- Goal
Quantitative colors maximize legibility and ensure that complex datasets remain easy to interpret through high-contrast, distinct hues.
Copy link to headline:Backgrounds
Tinted background should be applied to the page background itself while individual UI components should maintain a blank background. Read our layout guide on how to create a basic app and page layout.
Copy link to headline:Backdrops
Backdrops are applied to the whole page when an overlay is currently visible such as modals. We recommend using our OnyxModal(opens in a new tab) component.
Copy link to headline:Usage
To switch between light and dark mode, define the color-scheme(opens in a new tab) CSS property on any element that you want to apply the theme to. You can define the property either globally for the whole application or only for specific components.
To also support older tools and libraries, we additionally support applying the dark mode using a .dark CSS class but using the color-scheme CSS property is recommended instead.
Copy link to headline:Automatic light/dark mode
To support a better user experience, we recommend to support automatically applying the light and dark mode depending on the users preferences / system settings. See below on how to implement this using Vue or Nuxt. Additionally, you can use our OnyxColorSchemeMenuItem(opens in a new tab) or OnyxColorSchemeDialog(opens in a new tab) inside your nav bar to let the user interactively adjust the theme between auto, light and dark mode.
- Install VueUse
If not already done, install the VueUse(opens in a new tab) npm package:
- Enable automatic light/dark mode
Add the useColorMode()(opens in a new tab) composable from VueUse to easily support the automatic light/dark mode detection: