Kerülő Atoms
A design-rendszer élő bemutatója — a valós Webflow-stílusokból (nem csak a Variables-értékekből) kinyerve: betűtípusok, méretek, margók, gomb- és kártya-állapotok, hoverrel együtt.
Színek
Alap paletta
--ka-palette-brand-100--ka-palette-brand-200--ka-palette-brand-300--ka-palette-brand-400--ka-palette-brand-500--ka-palette-brand-600--ka-palette-brand-700--ka-palette-brand-800--ka-palette-brand-900--ka-palette-brand-950--ka-palette-brand-sunSzemantikus tokenek
--ka-color-background--ka-color-background-2--ka-color-background-tertiary--ka-color-background-inverse--ka-color-text--ka-color-text-alternate--ka-color-text-error--ka-color-text-warning--ka-color-border--ka-color-primaryA böngésződ világos/sötét beállításától függően a fenti szemantikus színek automatikusan váltanak — a dark mode tényleg alkalmazva van, nem csak definiálva.
Tipográfia
A címsorok alap HTML elemként (h1–h6) jelennek meg — nincs rájuk külön class téve, a base.css adja a stílusukat, ahogy Webflow-ban is a nyers h1–h6 elemek kapják a formázást.
H1 — Kerülő túra 2026
H2 — Öt napos gyalogtúra
H3 — Tokaj-Hegyalja
H4 — Esti borkóstoló
H5 — Gyakorlati infók
H6 — Apró megjegyzés
Ez egy bekezdés szöveg (p elem) — a Webflow-ban ez nem ugyanaz a méret, mint a body alapértelmezett betűmérete: ap saját, kisebb méretet és vékonyabb súlyt kap.
Egy hivatkozás is a szövegben, ami a linkekre jellemző félkövér súlyt kapja.
Kisebb, másodlagos szöveg (.ka-text-small).
Térköz-skála
--ka-space-tiny--ka-space-xxsmall--ka-space-xsmall--ka-space-small--ka-space-custom2--ka-space-custom1--ka-space-medium--ka-space-large--ka-space-custom3--ka-space-xlargeGombok
Vidd az egeret a gombok fölé — mindegyiknek van valós hover állapota (nem csak definiálva, ténylegesen alkalmazva).
Kártya
Vidd az egeret a kártyák fölé — finoman nagyítanak (Webflow:transform: scale(1.01)).
Tokaj-Hegyalja dombjai között, esti borkóstolóval.
Az image slot elhagyható — a kártya kép nélkül is működik.