Design

You set up the look in the page layout under Creuva design. Below the fields, a live preview shows a heading, buttons and boxes with the current selection.

Field	Options
Color scheme	17 schemes, see below
Color mode	Light / Minimal, Dark / Creative, Light or dark by system setting
Typography	Modern (Plus Jakarta Sans) or Editorial (headings in Fraunces) – can be combined with any color mode
Corner radius	Square, Small, Medium, Large – rounding of cards, buttons and images
Primary color, Accent color	optional custom colors as a hex value without `#`, they override the scheme
Logo height	Height of the logo in the header as a CSS value, e.g. `4rem` (default `2.25rem`); the header grows with it
Own stylesheets	CSS files from the file manager, see Custom CSS
Animations	All sections, CSS class only, None

Tip

The live preview checks custom colors: it shows a notice if white text on the primary color, or the accent color as text on white, falls below a contrast ratio of 4.5:1. The accent color is also used for links and small text.

Color schemes

Each scheme consists of a primary color (buttons, dark areas, links; it also tints backgrounds, borders and text) and an accent color (accents, badges, icons, focus outlines). All schemes meet the WCAG contrast requirements (text 4.5:1, large text and graphics 3:1) in light and dark mode.

Scheme	Key	Primary	Accent
Green (default)	`green`	`#1d3b2a`	`#3c9a2f`
Sage	`sage`	`#2f3e36`	`#52755f`
Olive	`olive`	`#2e3220`	`#647219`
Graphite & lime	`lime`	`#1c1f22`	`#b5e61d`
Petrol	`petrol`	`#0f3a40`	`#0b7d7d`
Ocean	`ocean`	`#0b2545`	`#08759a`
Blue	`blue`	`#1b2f4b`	`#2f6fd6`
Indigo	`indigo`	`#1a1b4b`	`#4f46e5`
Violet	`violet`	`#2a1846`	`#7c4dff`
Plum	`plum`	`#33152e`	`#9c3d8f`
Magenta	`magenta`	`#3d1430`	`#c92a63`
Red	`red`	`#3f1418`	`#c8323a`
Bordeaux	`bordeaux`	`#3b0d1f`	`#a3214e`
Terracotta	`terracotta`	`#3b2219`	`#b84f24`
Orange	`orange`	`#2d1b0e`	`#f08c00`
Yellow	`yellow`	`#26241c`	`#f2b705`
Midnight & gold	`gold`	`#141a2e`	`#c9a227`

You need the key for creuva:install --scheme=…, for the demo.yaml and for links to the style switcher.

Color mode “System”

With “Light or dark by system setting”, the website appears light or dark depending on what the visitor has set in their operating system or browser, and switches along when the setting changes. A small script sets the mode before the first render, so the page doesn’t flash. Without JavaScript, it stays light.

Design per website

In the website root, you can additionally set color scheme, color mode, typography and corner radius under “Creuva design”. These values take precedence over the page layout; a scheme in the website root also replaces the custom colors of the layout. This way, several websites can share one layout and still look different.

The installer and the demos leave the fields in the website root empty (“As in the page layout”), so changes in the page layout become visible right away.

Animations

Setting	Effect
All sections (default)	All elements in the main section fade in from below on scroll, grids and news lists element by element, “Image & text” from both sides; key figures count up
CSS class only	Only elements with a class from “Animation” (see CSS classes)
None	No scroll animations, no intro animation in the hero, numbers appear immediately

The u-reveal-* classes set the direction per element and take precedence; u-reveal-none excludes an element or a whole article.
Contents that are already visible on load are never hidden; without JavaScript, everything is visible right away.
Visitors who have “Reduce motion” turned on in their system settings don’t see any animations.
Hover effects (cards lift, images zoom, arrows move along) are always active.

You can adjust duration, distance and delay with CSS:

:root {
  --reveal-duration: 0.6s;   /* default 0.8s */
  --reveal-distance: 1.5rem; /* default 2.5rem */
  --reveal-stagger: 60ms;    /* delay per element in the grid */
  --hover-lift: -4px;        /* lift of cards on hover */
}

Fonts

Plus Jakarta Sans and Fraunces ship with the theme and are self-hosted, so there are no requests to Google. The browser only loads Fraunces if the typography “Editorial” is selected.

Style switcher

The front end module Creuva › Creuva style switcher shows a cog on the left edge. Visitors can use it to try out color scheme, color mode (Light, Dark, System), typography (Modern, Editorial) and corner radius live – ideal for a demo or for choosing a color scheme together with clients.

Setting it up

Create a module of the type Creuva style switcher under Layout › Themes › Modules (the demos already have one).
Assign it to the top section in the page layout, so the selection takes effect before the first render.

The selection is only stored in the browser (localStorage) and applies to all pages with the module.

Linking a combination

You can link to a combination directly, e.g.:

https://www.deine-domain.de/?scheme=red&theme=dark&typography=editorial&radius=none

Parameter	Values
`scheme`	Key of the color scheme, e.g. `petrol`
`theme`	`light`, `dark`, `auto`
`typography`	`modern`, `editorial`
`radius`	`none`, `small`, `medium`, `large`

Saving the selection for the website

In the front end preview, the switcher additionally shows administrators the button “Save for the website”. It saves the selection in the website root of the current website, clears the page cache and then applies to all visitors. Editors without admin rights and regular visitors don’t see the button.

Back end users only

With the module option “Logged in back end users only”, the switcher is invisible to visitors. It only appears when you are logged in to the back end; a selection previously stored in the browser then no longer applies to visitors.

Note

Set this option on live websites. Without it, every visitor sees the switcher.

Custom CSS and templates

Own stylesheets

Create a CSS file in the file manager, e.g. files/design/custom.css, and select it in the page layout under Creuva design › Own stylesheets. It is loaded after the Creuva CSS, with its modification time for cache busting. The folder must be public.

All Creuva styles live in CSS cascade layers (creuva.*). This means your own styles without a layer always take precedence – without !important and without long selectors.

Colors, spacing and rounding

Colors, spacing and typography are CSS variables and are easy to override:

:root {
  --scheme-primary: #123456; /* primary color incl. tinted backgrounds */
  --radius-l: 0.75rem;
}

For custom primary and accent colors, the page layout is usually enough (see Design).

Accordion with a custom icon

Give the accordion the class u-accordion-icon plus a class of your own, and set the icon with CSS:

.content-accordion.mein-icon {
  --accordion-icon-mask: url("/files/icons/paket.svg");
}

Customizing templates

All templates are Twig templates and can be overridden in the templates/ folder as usual, e.g. templates/content_element/creuva_hero.html.twig:

{% extends '@Contao/content_element/creuva_hero.html.twig' %}

Print

Only the content is printed, black on white, without header, footer, breadcrumb, slider controls and backgrounds. Links in the text appear with their address, accordions are expanded, and cards and images are not split across pages.

Design

Color schemes

Color mode “System”

Design per website

Animations

Fonts

Subsections of Design

Style switcher

Setting it up

Linking a combination

Saving the selection for the website

Back end users only

Custom CSS and templates

Own stylesheets

Colors, spacing and rounding

Accordion with a custom icon

Customizing templates

Print