Design systém
Také známo jako Design system, Design tokens
Stručně
Sdílené tokeny a komponenty, díky kterým vypadá každá nová stránka stejně — a které někdo musí udržovat.
Design systém má dvě vrstvy: tokeny (barvy, rozestupy, typografie, radiusy, stíny jako pojmenované hodnoty) a komponenty postavené na nich (tlačítka, inputy, karty, dialogy). Jeho úlohou je udělat správnou volbu snadnou, aby dvanáct stránek neskončilo s dvanácti odstíny šedé.
Rozjetí je výchozí stav
Bez systému není rozjetí chyba, ale přirozený stav. Každou novou stránku staví někdo ve spěchu: tady #71717a, tam #6b7280, tlačítko s radiusem 8 px vedle tlačítka s 9999 px. Nikdo to nerozhodne, aplikace to prostě nasbírá.
Tokeny to zastaví levně. Jeden soubor s `--color-text-muted`, `--space-4`, `--radius-md` a pravidlem, že hexadecimální hodnoty v komponentách nejsou povolené, vyřeší 80 % rozjetí. Zbytek je znovupoužití komponent — dialog, který už řeší focus trap, Escape a zamčení scrollu, je lepší odpověď než nový.
Účet, který se neplánuje
Design systém je produkt s uživateli. Potřebuje changelog, pravidla pro ukončování komponent, ukázky všech stavů (prázdný, chybový, neaktivní, dlouhý český text), dokumentaci a někoho, kdo do dne odpoví na „proč je tohle tlačítko jiné“. Když ho nikdo nevlastní, zamrzne a týmy ho obejdou — a to je horší než žádný systém, protože máte rozjetí i mrtvou knihovnu.
Malý web s jedním nebo dvěma vývojáři vystačí s tokeny, 10–15 komponentami a dokumentací na úrovni Storybooku. Knihovna pro víc značek s themingem, verzemi a vlastním týmem se vyplatí až od určité velikosti — a obhájit se má ušetřenými hodinami při předávání od designu kódu, ne touhou být „vyspělý“.
Zdroje
Související pojmy
Komponenta
Znovupoužitelná část rozhraní, která má jednu úlohu — kartu produktu, cenovku, filtr — a svůj malý stav.
Kontrastní poměr
Jak moc se text liší od pozadí: WCAG chce 4,5:1 u běžného textu a 3:1 u velkého.
Přístupnost (a11y)
Aby web fungoval klávesnicí, se čtečkou obrazovky i při slabém zraku — a v EU už i jako zákonný požadavek.