Color schemes are not a standalone component but a global design setting within your headful project.
You can find them in the dashboard under:
Edit Project → Design → Color Schemes
Here, you can define different color combinations that can later be selected and applied within components.
Predefined Color Schemes
There are three color schemes that are always available: Colored, Light, and Dark.
These three cannot be deleted, but their color values can be adjusted freely.
Colored
Colored is typically the primary accent color of the project.
The badge in the Header component automatically pulls its color from the background color of the main colors within the Colored scheme. This color cannot be set separately.
Light
The Light color scheme strongly influences the basic template structure.
The background color of the main colors determines, among other things:
the navigation bar
so-called negative spaces
fundamental template areas
It is recommended to keep this color very light (ideally white), as it is used extensively in the background and cannot be overridden independently.
Dark
The Dark color scheme affects central design elements.
For example, the footer derives its color styling from this scheme. If the main color is changed here, the footer will adjust accordingly.
Structure of a Color Scheme
Each color scheme consists of two sections:
Main Colors
Background
Text
Highlight
Highlight is typically used for titles or emphasized text elements.
Text refers to body text.
Box Colors
This section also includes:
Background
Text
Highlight
Box colors apply within visually “framed” components.
They can be understood as a design layer within the main colors.
Interaction Between Main and Box Colors
Main colors define the base surface of a component.
Box colors define elements within that surface.
Example:
If the main background color is dark, the component will have a dark background.
If the box background color is light, box elements (e.g., teaser elements) will appear light on a dark background.
This principle applies to all color schemes.
Custom Color Schemes
In addition to Light, Colored, and Dark, you can create an unlimited number of custom color schemes.
It is recommended to define at least two additional schemes beyond the three defaults in order to:
gain more design flexibility
structure content more visually
create clear color contrasts within a page
Saving & Testing
Changes must be saved in order to take effect within the project.
You can experiment with colors and adjust them at any time.
Especially at the beginning, predefined example colors are included to help you understand how the colors interact.
Tips & Tricks
Define your main colors in advance and document the hex codes.
Work consistently with fixed color values to ensure a cohesive and brand-consistent result.
Pay special attention to keeping the Light background color very light.
Carefully test color contrast between text and background, especially in Dark variations.
Use additional color schemes strategically to structure pages visually.