Color settings
In this theme section you'll find all settings you need to make your website unique, using your choice of color.
Tab: »Color«
Step by step guide Pieces of advice
Step by step

Font color
- At Recommendations for font colors you define whether you use your own color variant (Custom) or the preset font colors black or gray blue.
- Custom: Use the input fields for Base Font Color, Light Font Color and Dark Font Color to specify the colors for different font categories.
- Click on the Save button above the workspace.

Secondary colors
- As with the primary colors, at Recommendations for secondary colors you use the drop-down list to set the »secondary color« of the website.
- Custom: Alternatively select the secondary colors of the website with the input fields Base, Light and Dark Secondary Color.
- Click on the Save button above the workspace.

Desktop and mobile navigation
- Here you determine which of the color sets is used for navigation on the desktop as well as on mobile devices. For Desktop Navigation the values Primary Colors, Secondary Colors and Font Colors are offered, for Mobile Navigation only Primary Colors and Secondary Colors.
- Click on the Save button above the workspace.
Pieces of advice

The pre-set color suggestions in toujou come as a triple: a basic color, a lighter version of the basic color and a darker version of it. The different shades serve to illustrate interaction (like mouse-over to links) or to visualize graphical depth in design. Feel free to decide whether up to three color options are created.
The source of these color sets is basically Google's Material Design ↗. These guidelines are largely considered as a »standard work« in web design.
In toujou, you determine the color value for the font (Font Color). Different color settings apply to headlines which use primary and secondary additionally:
Headline 1: Font color
Headline 2: Primary color
Headline 3: Secundary color
Headline 4: Font color
Headline 5: Font color
Linked elements
Elements from the toujou element library that are connected to this tutorial.
toujou element library
Text elements ❯
Teaser elements ❯
Blockquotes ❯
Teaser cards ❯
Media elements ❯
Map elements ❯
Blog elements ❯