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.