Styleguide

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

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

Brend lockup — logo i rezerva

Logo klijenta zamjenjuje slovo u krugu (Podešavanja → Logo). Visina je token (--brand-logo-height); wordmark uklanja tekst naziva da se ime ne ispiše dvaput. Bez logotipa se koristi slovo — to je ono što šablon isporučuje.

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

Anart Start PLACEHOLDER · 2026 logo + logoInverted

PLACEHOLDER · 2026 logoIsWordmark: true

Na tamnoj podlozi

Tamnu varijantu bira CSS, ne prop — nav preko tamnog hero-a postaje svijetao na skrol, pa zamjena mora da radi bez ponovnog renderovanja. Jedan logo ostaje vidljiv na svim podlogama, pa `logoInverted` ostavljaj prazno SAMO kad se logo čita i na tamnom (srednji ton, primjer ispod). Tamni logo bez svijetle varijante = nevidljivo zaglavlje — traži od klijenta svijetlu varijantu.

AS Anart Start PLACEHOLDER · 2026 mark

Anart Start PLACEHOLDER · 2026 logoInverted

Anart Start PLACEHOLDER · 2026 bez tamne varijante → isti 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.

Kartice sa slikom — raster popuni, vektor se uklopi

Svaka kartica ima isti okvir (--media-aspect) da red drži ritam. Fotografija POPUNI okvir (siječe se po potrebi); vektor se UKLAPA i centrira — logo se nikad ne siječe. NAPOMENA: CMS `card` blok još ne može da postavi sliku (content-model-plan, Faza 14).

Fotografija (raster)

Popunjava okvir — cover, siječe se da red ostane u ritmu.

Vektor (SVG)

Uklopljen i centriran u istom okviru — nikad odsječen, nikad razvučen.

Logo (SVG)

Realan slučaj: logo partnera u gridu kartica.

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 Crna Gora