Design System v1 · 2026-08-20

Styleguide

Esküvői Kézikönyv — „Warm Editorial" irány, az élő oldal auditja alapján lezárt tokenekkel (szilva/lavender paletta, Merriweather serif). Minden komponens és állapot itt vizsgázhat.

Color palette

Az alábbi hex-értékek az eskuvoikezikonyv.hu élő oldal DevTools auditjából származnak (2026-08-20).

--ek-primary
#444163
--ek-primary-dark
#322f4c
--ek-primary-light
#696788
--ek-accent
#a4a2ba
--ek-accent-light
#d5d2db
--ek-lavender
#ebe9ee
--ek-cream
#faf9fc
--ek-cream-dark
#f1eff6
--ek-slate
#55526b
--ek-text
#2d2a3d
--ek-success
#4a7c59
--ek-danger
#b3413c
--ek-info
#3d7a8c

Typography

Display és body egyaránt Merriweather (az élő oldal serif-je), fallback: Georgia.

Címsorok

h1 — 2.5rem

h2 — 2rem

h3 — 1.6rem

h4 — 1.3125rem

h5 — 1.125rem
h6 — 1rem
Test

Az esküvői kézikönyv a magyar esküvős szolgáltatók megbízható kalauza — friss jogszabályokkal, több száz szolgáltatóval, hagyományokkal és trendekkel, megyénkénti bontásban.

Lead szöveg — 1.25rem, kiemelt bekezdés.

Buttons

5 variáns × 3 méret. Fókusz-látás: Tab-lal lépj körbe.

Variánsok
Méretek

Badges & tags

Szilva Kész Infó Hiba Kontúr Soft Legújabb Trend Budapest megye

Cards

Alapkártya + 3 variáns (issue / post / review), hover-állapottal.

Új
2026 Budapest
2026 / március

Márciusi lapszám

128 oldal · Budapest + Pest

„A kézikönyvből találtuk meg a tökéletes helyszínt — minden ajánlás működött."

Anna & Bence, 2025

Forms

Alap mezők

Kötelező mező.

Validációs állapotok

Helyes!
Túl rövid, minimum 3 karakter.

Segédszöveg a mező alatt — a legkisebb betűméret, WCAG AA kontraszttal.

PDF-nézegető UI-váz

Statikus váz — a valós PDF-motor a backend körbe kerül.

ekk-2026-marcius.pdf

PDF-nézegető helye — teljes képernyős olvasás, mobil-optimalizált lapozás, működő belső linkek (backend kör).

Megosztás:

„Játékok" — szavazás UI

Többválasztós kijelölés (is-selected, checkbox-hierarchia), lezárás szavazás után (is-locked), játék-szintű is-voted állapot a futó játék szekción.

Blog elemek

1

Magyarország-térkép (megyei)

CC0 SVG (Wikimedia Commons), JS-sel betöltve; hover/klikk/fókusz állapotok. Forrás + licenc: ASSETS_LICENSES.md.

Kattints egy megyére.

Empty / loading states

Nincs találat

A kiválasztott évre nincs lapszám. Próbálj meg másik évet a szűrőben.

Nincsenek kedvencek

Még nem jelezted, melyik helyszín a favoritod.

Motion & microinteractions

Animate.css 4 (vendored) + egyedi ek-* keyframe-ek. Minden mozgóelem transform/opacity-only (compositor-friendly), prefers-reduced-motion: reduce-nél kikapcsol — a tartalom sosem rejtőzik el. Időzítés: 150–400 ms micro, 550 ms entrance, exit ~300 ms (gyorsabb, mint az enter).

Entrance (Animate.css, staggered)
fadeInDown
fadeInUp
zoomIn
Micro (custom keyframe)
bump (számláló / count)
headShake (már szavaztál)
shakeX (form hibák)
Reading progress + toast
Köszönjük a szavazatot!

Toast: aria-live="polite", 3.5 s auto-dismiss, progress csík, exit 300 ms.

Klasszok: .ek-entrance (hero/index orchestrated load, 50–100 ms delay-lépcsők), [data-stagger] (grid reveal, 70 ms/item), .ek-bump, .ek-bar-fill, .ek-hidden-until-anim. A html.js osztály nélkül (no-JS) minden látható marad.

Globális elemek

Hirdetési helyek, Facebook-doboz placeholder, cookie banner, featured blokk.

IAB standard méretek — minden egység fix arányú (CLS = 0), mobilon 320×50-re cserélődnek
Featured issue (főoldal kiemelt blokkja)