Color

The set of colors chosen for the design system should be as reduced as possible to avoid clutter and inconsistencies. Every color has a specific purpose it should solely be used for. We do so to create expectations for what a specific color means and to foster the intuitive nature of our UI.

The colors used in the design system are split up into the definitions of the colors themselves and the definition of a palette. The latter assigns the colors to their meanings and use cases. For example, the palette would assign a specific color to be the accent color of the design system.

Brand

Use for:

• Secondary Buttons
• Deemphasised Headlines
• Interactive Text
• Primary Icon Color

Don't use for:

• Body text
• Primary actions
• Backgrounds

Accent

The accent color on its own demands attention, without being as overpowering as red. It should be only used for what it's best: demanding attention. We use the color only for the single most important action on the screen.

Use for:

• Primary Buttons

Don't use for:

• Anything else 😉

Gray

Gray is the color that powers most of our UI—typography, backgrounds, borders, and shadows. We try to use as few grays as possible to avoid a cluttered look.

gray-50

• Level 0 Background

gray100 and gray200

• Shadows

gray400

• Borders

gray600

• Secondary Text

gray900

• Primary Text

White

Use for:

• Level 1 Background
• Primary Background
• Inverse Text

Success

Use for:

• Everything that indicates something positive.

Error

Use for:

• Everything that indicates something negative.

Accessibility

To make sure that our product is accessible we need to have foreground and background colors with enough contrast according to the WCAG 2.0 (Web Content Accessibility Guidelines).

You can check your colors with a contrast checker (e.g. https://barrierefreies.design/werkzeuge/kontrastrechner-fuer-farben) to make sure we always fulfill this request.