Komponente i stilovi
Živi pregled svih tokena, elemenata i komponenti ovog šablona — za provjeru dizajn sistema nakon rebrendiranja.
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.
Šabloni stranica
Kompozicije cijele stranice koje renderuju vlastiti dokument (nav + footer), pa se ne mogu ugnijezditi gore — otvorite ih direktno:
ServicesPage
Indeks usluga — mreža kartica usluga (ServicesPage).
Otvori stranicuServicePage
Detaljna stranica jedne usluge iz kolekcije sadržaja (ServicePage).
Otvori stranicuContentPage — omotač za sadržaj / pravne / „o nama” stranice bez hero-a — nema zasebnu demo rutu (ovaj styleguide je zamijenio raniji /primjer/ primjer).