Styleguide

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

One serif scale, sized by heading level — an h2 is an h2 everywhere. Headings carry no self-margin; prose adds the rhythm: more space above than below, so a heading bonds to the text it introduces.

Display — Aa Bb Cc

Heading 1 — the page or section title

A paragraph of body copy sets the baseline. Notice the space above each heading is larger than the space below it — that groups a heading with the text that follows, not the text before it.

Heading 2 — a major section

The same h2 whether it sits in prose like this or is added as a standalone heading block. Inline bits: a text link, strong and emphasised words, plus small print and inline code.

Heading 3 — a subsection

Third-level headings step down one size. The rhythm holds: a comfortable gap above, a tighter gap below, hugging the paragraph it opens.

Heading 3 — another subsection

Two same-level headings in a row keep identical spacing, so the structure reads consistently down the page.

Heading 2 — the next major section

Returning to an h2 resets the hierarchy; the larger top margin makes the new section clearly begin.

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

--space-3xs

--space-2xs

--space-xs

--space-sm

--space-md

--space-lg

--space-xl

--space-2xl

--space-3xl

--space-4xl

--space-5xl

--space-6xl

Radii

--radius-xs

--radius-sm

--radius-md

--radius-lg

--radius-pill

Shadows

--shadow-sm

--shadow

--shadow-lg

Buttons

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

menu

arrow

chevron

check

mail

phone

pin

compass

pen

code

x

instagram

star

whatsapp

facebook

Brand lockup — logo & fallback

The client logo replaces the letter mark (Podešavanja → Logo). Height is a token (--brand-logo-height); a wordmark drops the name text so it is not printed twice. Without a logo, the letter mark is used — that is what this template ships.

AS Anart Start PLACEHOLDER · 2026 brand.logo = ""

Anart Start PLACEHOLDER · 2026 logo + logoInverted

PLACEHOLDER · 2026 logoIsWordmark: true

On a dark surface

The inverted variant is picked by CSS, not by a prop — the nav over a dark hero turns light on scroll, so the swap must happen without re-rendering. A single logo is kept visible on every surface, so leave `logoInverted` empty ONLY when the logo reads on dark too (the mid-tone mark below). A dark-ink logo with no inverted twin is an invisible header — ask the client for the light variant.

AS Anart Start PLACEHOLDER · 2026 mark

Anart Start PLACEHOLDER · 2026 logoInverted

Anart Start PLACEHOLDER · 2026 no inverted variant → the same logo

Section header parts

Kicker label

Services

A section head

Kicker, display title and a lead line, composed by the SectionHead component.

Blocks

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.

Another card

Cards fall back to a tinted placeholder when no image is set.

Cards with an image — raster fills, vector fits

Every card frame is the same height (--media-aspect) so a row keeps its rhythm. A photo FILLS it (cover, cropped if needed); a vector is CONTAINED and centered — a logo is never cropped. NOTE: the CMS `card` block cannot set an image yet (content-model-plan Phase 14).

Photo (raster)

Fills the frame — cover, cropped to keep the row on one baseline.

Vector (SVG)

Contained + centered in the same frame — never cropped, never stretched.

Logo (SVG)

The realistic case: a partner logo in a card grid.

Card variations — slots, not forks

Extend a card through slots (`icon`, `meta`, `overlay`, `title`, body) and variation classes — never a second component. See CLAUDE.md "Card variation workflow".

12 Aug 2026 · Guides

With meta

A date or categories sit above the title via the meta slot.

Tours Day trip

Pills over media

Category pills overlay the image via the overlay slot, styled with the global .card__pill.

With a title icon

Any card can prepend an icon through the icon slot.

Bar

No media area — body content is slotted: a note, a chip row, a read-more link.

8:10 10:30 13:00

Grids

Composable utilities: `.grid-cards` (auto-fit), `.grid-2…6`, tablet/mobile overrides `.grid-t-*` / `.grid-m-*`, and `.grid-1-2 / 2-1 / 1-3 / 3-1` ratios. Resize to watch them collapse.

grid-6 grid-t-3 grid-m-2

1

2

3

4

5

6

grid-2-1

2fr

1fr

Quotes

Outstanding service from start to finish. Highly recommended.

M Marko M. Podgorica

Professional, fast, and exactly as agreed.

A Ana P. Budva

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.

Contact

Get in touch

The assembled contact form block, with the modern field styling applied.

+382 00 000 000 info@example.com Montenegro