AjemFIT design system · v0.1
Living reference pro tokeny,
komponenty a kompozice.
Specimen book + rozhodovací archiv. Když se pravidla v DESIGN.md rozejdou s tím, co je vidět tady, vyhrává tahle stránka — a aktualizuje se manuál.
Aktuální výběry
Schválené směry — produkce z nich čerpá jako baseline.
Tokens
SchválenoBarvy
Brand green + sage, 5 produktových kategorií se škálou 100–900 a soft tinty, semantic aliasy, surfaces, foregrounds, hairlines, state colors, live contrast checker + surface matrix, gradienty.
Tokens
SchválenoGlass
Apple-style liquid glass: frost blur + vibrancy + specular hrana + refrakce (SVG displacement). Nejlíp v kombinaci s gradienty a patternem.
Primitivy
SchválenoLogo
Wordmark + 3-listý piktogram, oficiální vektory (currentColor). 3 varianty × 3 barevné verze, ochranná zóna, pravidla použití.
Komponenty
SchválenoProductCard
Vertikální produktová karta složená z primitiv (Surface, Badge, CategoryBadge, PriceTag, TrustStars, UspTag, Cta). Varianty framed/plain, quick-add (icon/wide), sleva, vyprodáno + živý konfigurátor.
Tokens
Hodnoty designu — barvy, písmo, tvary & pohyb
Barvy
Brand green + sage, 5 produktových kategorií se škálou 100–900 a soft tinty, semantic aliasy, surfaces, foregrounds, hairlines, state colors, live contrast checker + surface matrix, gradienty.
Typografie
General Sans (headliny, web, body) + Barlow Condensed (etikety). Type scale, kompozice, živý type tester, Text × podklad, číslice / .num, CSS reference.
Tvary & pohyb
8 stupňů radii s playgroundem, durations, easings s bezier křivkami + animation playground, galerie mikro-interakcí, motion principy.
Motion
Motion principy (tempo, easing, přístupnost) a primitiva — scroll reveal, count-up, animated number, card stack, smooth scroll, page transitions.
Ikony
UI ikony lucide-react (stroke/size scale) + 5 značkových kategorie-piktogramů (Adaptogen, Organic, Vitamins, Organs, Beauty).
Glass
Apple-style liquid glass: frost blur + vibrancy + specular hrana + refrakce (SVG displacement). Nejlíp v kombinaci s gradienty a patternem.
Primitivy
Atomické UI — Logo, Button, Badge, Forms, Price…
Logo
Wordmark + 3-listý piktogram, oficiální vektory (currentColor). 3 varianty × 3 barevné verze, ochranná zóna, pravidla použití.
Button / CTA
Akce. 4-tier hierarchie (primary / secondary / outline / glass) + brand a utility varianty, 4 velikosti, plné stavy, lucide ikony, liquid-glass varianta.
Badge
Štítky shopu: produktové marky (novinka, bestseller, sleva, vegan, skladem…) i kategoriální identita (CategoryBadge — piktogram + název v barvě kategorie). Finishe solid / soft / gradient / liquid glass.
Price & PriceTag
Cena a cenovka. Přeškrtnutá původní cena, cena za jednotku (za kapsli / dávku / balení), auto výpočet (ušetříte X %). 3–4 velikosti, cs-CZ formát.
TrustStars
Hodnocení — 5 hvězd s desetinným plněním nebo compact (★ 4,8 z 5 · 124 hodnocení). 3 velikosti, zdroj recenzí. Hvězdy vždy jantarové.
Chip / UspTag
Utility rodina (ne Badge): Chip = filtr toggle, odebíratelný tag, počet. USP taxonomie ve dvou formách — pill (UspTag) a benefit bar s ikonou v kolečku (UspItem / UspStrip).
Avatar
Recenze a team — obrázek nebo iniciály fallback v brand tintu, 5 velikostí, 4 tóny, překryvná skupina s přetečením +N.
Eyebrow & Num
Eyebrow (štítek sekce, General Sans uppercase) + Num (tabular číslice pro ceny a počty, ať se zarovnají a neposkakují).
Separator
Vlasová linka přes hairline tokeny (žádné border-*). 4 tóny, varianta s textem uprostřed, vertikální dělení.
Skeleton
Sage shimmer placeholdery (text / rect / circle) + textový blok a kompozice karty. Honoruje reduced-motion.
Toast
Krátká zpětná vazba (sonner). notify helpery success / error / info / cart / glass + akce a promise.
Cards & Containers
Surface — základní obal. 8 povrchů (card / soft / sage / mint / blush / dark / gradient / glass) napříč světlým a tmavým registrem, elevace (ring / raised), radius, padding, hover zdvih.
Form controls
Primární textové pole má floating label (skoro všude). Plus Textarea, Select, Checkbox, Radio, Switch, Quantity stepper. Jedno useId pro aria, brand focus ring, error stav, radio = bílé bg + barevný ring + tečka.
Komponenty
Složené bloky — karty, taby, bannery… sedí kdekoliv
Sekce
Full-width pruhy stránky — hero, product rail, USP strip
Sekce
Připravujeme. Stránky se přidají, jak se staví — každá komponenta nejdřív dostane specimen tady a zápis do nav-data.
Layout & shell
Header, footer, mobile nav — site-wide chrome
Layout & shell
Připravujeme. Stránky se přidají, jak se staví — každá komponenta nejdřív dostane specimen tady a zápis do nav-data.
Modaly & overlay
Cart drawer, search, mega-menu, toasty — vše co se vyjede
Modaly & overlay
Připravujeme. Stránky se přidají, jak se staví — každá komponenta nejdřív dostane specimen tady a zápis do nav-data.
Emaily
Transakční e-maily — potvrzení, doprava, reset
Emaily
Připravujeme. Stránky se přidají, jak se staví — každá komponenta nejdřív dostane specimen tady a zápis do nav-data.
Stránky shopu
Homepage, PLP, PDP, košík, vyhledávání
Stránky shopu
Připravujeme. Stránky se přidají, jak se staví — každá komponenta nejdřív dostane specimen tady a zápis do nav-data.