Components· Theme
Theme
Colours, typography, spacing, corners, buttons, colour schemes and ready-made palettes that every component takes its look from.
2 components
Theme values
Every section and block takes its colours, fonts, spacing and corners from these values. Changing the site's look in the editor changes these, and every component follows. The table shows the chosen theme's values.
Colours
| Name | Value | Sample |
|---|---|---|
--color-accent | var(--color-primary) | |
--color-background | #ffffff | |
--color-border | #d5d9e0 | |
--color-danger | #b3261e | |
--color-info | var(--color-primary) | |
--color-muted | #5b6470 | |
--color-onDanger | #ffffff | |
--color-onInfo | var(--color-onPrimary) | |
--color-onPrimary | #ffffff | |
--color-onSuccess | #ffffff | |
--color-onWarning | #ffffff | |
--color-primary | #0055ff | |
--color-secondary | #1f2937 | |
--color-success | #15803d | |
--color-surface | #f4f5f7 | |
--color-text | #111111 | |
--color-warning | #b45309 |
Typography
| Name | Value | Sample |
|---|---|---|
--font-body | Inter, system-ui, sans-serif | Aa Ää Öö |
--font-heading | Inter, system-ui, sans-serif | Aa Ää Öö |
--font-letterSpacing | 0em | |
--font-lineHeight | 1.65 | |
--font-scale | 1 | |
--font-weight | 400 |
Spacing
| Name | Value | Sample |
|---|---|---|
--space-lg | 32px | |
--space-md | 16px | |
--space-mdLg | 24px | |
--space-section | 4rem | |
--space-sectionGap | 2rem | |
--space-sm | 8px | |
--space-xl | 4rem | |
--space-xs | 4px |
Corner radius
| Name | Value | Sample |
|---|---|---|
--radius-full | 9999px | |
--radius-md | 8px | |
--radius-sm | 4px | |
--radius-xl | 24px |
Buttons
| Name | Value | Sample |
|---|---|---|
--button-paddingX | 30px | |
--button-paddingY | 14px | |
--button-radius | 8px | |
--button-style | solid | |
--button-weight | 400 |
Cards
| Name | Value | Sample |
|---|---|---|
--card-border | 1px | |
--card-radius | 16px | |
--card-shadow | var(--shadow-card) |
Shadows
| Name | Value | Sample |
|---|---|---|
--shadow-card | 0 2px 8px rgba(0,0,0,0.1) | |
--shadow-lg | 0 8px 24px rgba(0,0,0,0.12) | |
--shadow-md | 0 2px 8px rgba(0,0,0,0.1) | |
--shadow-none | none | |
--shadow-sm | 0 1px 2px rgba(0,0,0,0.06) | |
--shadow-xl | 0 16px 48px rgba(0,0,0,0.16) |
Colour schemes
| Name | Value | Sample |
|---|---|---|
--scheme-accent-background | var(--color-primary) | |
--scheme-accent-border | color-mix(in srgb, var(--color-onPrimary) 30%, transparent) | |
--scheme-accent-muted | color-mix(in srgb, var(--color-onPrimary) 80%, transparent) | |
--scheme-accent-primary | var(--color-onPrimary) | |
--scheme-accent-surface | color-mix(in srgb, var(--color-onPrimary) 15%, var(--color-primary)) | |
--scheme-accent-text | var(--color-onPrimary) | |
--scheme-dark-background | var(--color-text) | |
--scheme-dark-border | color-mix(in srgb, var(--color-background) 25%, transparent) | |
--scheme-dark-muted | color-mix(in srgb, var(--color-background) 75%, transparent) | |
--scheme-dark-primary | var(--color-background) | |
--scheme-dark-surface | color-mix(in srgb, var(--color-background) 12%, var(--color-text)) | |
--scheme-dark-text | var(--color-background) | |
--scheme-light-background | var(--color-background) | |
--scheme-light-border | var(--color-border) | |
--scheme-light-muted | var(--color-muted) | |
--scheme-light-primary | var(--color-primary) | |
--scheme-light-surface | var(--color-surface) | |
--scheme-light-text | var(--color-text) | |
--scheme-muted-background | var(--color-surface) | |
--scheme-muted-border | var(--color-border) | |
--scheme-muted-muted | var(--color-muted) | |
--scheme-muted-primary | var(--color-primary) | |
--scheme-muted-surface | var(--color-background) | |
--scheme-muted-text | var(--color-text) |
Ready-made palettes
The palettes of the editor's Look panel and the gallery's "Try other colours". Each one passes WCAG AA contrast in every colour scheme.
- Northern forest light
- Sea breeze light
- Sandy beach light
- Brick and concrete light
- Blueberry light
- Pastel light
- Night and gold dark
- Black and white light
- Graphic black dark
- Northern lights dark
- Smoke sauna dark
Colour schemes
Theme schemes
A section's colour scheme (light, muted, dark, accent) changes its background and text, and buttons and links follow. Contrast is checked in each.
Accessibility
Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Typography
Theme typography
Headings H1–H4, body text, link, list and quote in the theme's fonts and sizes.
Accessibility
Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.