Components & styles
A live reference of every token, element and component in this template — use it to check the design system after re-theming.
Colors
--color-bg --color-surface --color-surface-alt --color-ink --color-ink-soft --color-accent --color-accent-strong --color-accent-soft --color-accent-ink --color-dark --color-dark-ink --color-gold --color-whatsapp --color-whatsapp-ink --color-ring --color-danger Typography
Heading 1 — the quick brown fox
Heading 2 — the quick brown fox
Heading 3 — the quick brown fox
Heading 4 — the quick brown fox
Heading 5 — the quick brown fox
Heading 6 — the quick brown fox
Display — Aa Bb Cc
Lead paragraph — a slightly larger, muted intro line that sets up the section below it.
Body paragraph with a text link, some strong and
emphasised words, plus small print and inline code.
A blockquote — pulled aside with an accent rule to set it apart from the body copy.
- Unordered list item one
- Unordered list item two
- Ordered list item one
- Ordered list item two
Spacing · radii · shadows
Spacing scale
Radii
--radius-xs--radius-sm--radius-md--radius-lg--radius-pillShadows
--shadow-sm--shadow--shadow-lgButtons
On dark background
Form controls
Keyboard focus shows a ring. Required fields are marked * — press Submit (or edit then clear one) to see the invalid state.
Icons
Section header parts
Kicker labelA section head
Kicker, display title and a lead line, composed by the SectionHead component.
Cards
Static card
A plain content card with a placeholder media area and body copy.
Link card
Renders as a link with a hover lift and a read-more affordance.
Read moreAnother card
Cards fall back to a tinted placeholder when no image is set.
Quotes
Outstanding service from start to finish. Highly recommended.
Professional, fast, and exactly as agreed.
Table
| Plan | Price | Includes |
|---|---|---|
| Basic | €0 | One page, contact form |
| Standard | €290 | Up to five pages, gallery |
| Pro | €590 | Everything, plus blog |
Code block
:root {
--color-accent: oklch(0.55 0.22 var(--h-accent));
}Hero
The hero is normally the page-top header; shown here (gradient fallback, no image) for reference.
A headline that sells
A short, clear subtitle explaining what you offer.
Get in touch
The assembled contact form block, with the modern field styling applied.
Page templates
Full-page compositions that render their own document (nav + footer), so they can’t be embedded above — open them directly:
ServicesPage
Services index — a grid of service cards (ServicesPage).
Open pageServicePage
A single service detail page from the content collection (ServicePage).
Open pageContentPage — the no-hero content / legal / about wrapper — has no standalone demo route (this styleguide replaced its former /primjer/ example).