Color Guide

The design consists of two sets of colors: lightmode and darkmode. Each set consists of the same number of colors, each of which has its own function. At the end of the page, one can find an overview of all defined colors for quick lockup. Read on for the functions of each color.

The fore- and background colors are chosen for good contrast and are the same but swapped for light- and darkmode. Most backgrounds should use the background color and most texts should use the foreground color. In some cases, more subtelty is needed:

• If visual distinction through containers, boxes or similar is needed, the background shades can be used to use a slightly lighter background color (in case of darkmode) or a slightly darker one (in case of lightmode). Preferably, each shade should corespond to a layer of nesting, but if desired, one can also mix-and-match, as long as the background for the main content is always the regular background color.
• For more subtle text, e.g. in a footer, subtitle, etc. one can use the foreground shades to achieve this effect. To ensure a high enough contrast between fore- and background, these colors should not be used in front of the background shades mentioned above, other than for very small amounts of texts like headings and alike.

Additionally, there are also colors for various design elements. The accent colors can be used for whatever one desires, but are especially intended for use in hyperlinks like this:

Other than that, there are two more colors: the error and the success color. Intended for anything regarding user-feedback, they should tell someone that something is a critical action, has some positive or negativ meaning or progresses something in some way or form.

Digital Media

Printing

Our primary and secondary colors are also defined for CMYK printing: