Styleguide

Styleguide je srdce vzhledu webu. Definuje barvy, fonty, typografickou škálu a spacing jako design tokeny — a změna tokenu se propíše všude, kde je použitý. Web tak zůstává jednotný.

Barvy

Barvy si založíte v Design → Colors jako pojmenované tokeny. U každé barvy zadáte název a základní odstín a platforma k ní automaticky vygeneruje škálu odstínů (např. 50 až 800), kterou pak používáte napříč webem.

Neutral (bílá, černá a odstíny šedé) je vytvořená automaticky — nemusíte ji přidávat.
Novou barvu přidáte tlačítkem Add color, pojmenujete ji a nastavíte hodnotu (výběrem nebo hex kódem).

Písma

Písma spravujete v Design → Typography, nové přidáte tlačítkem Add typeface. Máte dva zdroje fontů:

Google Fonts — platforma je napojená na Google Fonts API, takže vybíráte ze všech dostupných fontů (přes Browse fonts a vyhledávání).
Vlastní písmo — přes Add new font nahrajete vlastní font jako soubor WOFF nebo WOFF2. Zadáte název, řezy (variant, např. 400 – Regular), kategorii a záložní písmo (fallback) a potvrdíte, že máte platnou webovou licenci k jeho užití.

Doporučení:

Písmo si pojmenujte podle použití — např. Heading, Body, Accent.
Používejte ideálně dvě písma kvůli rychlosti načítání.
Omezte se jen na řezy, které na webu reálně používáte — načítá se pak méně dat.

Stylujte přes tokeny

Barvu, mezery i velikost písma nastavujte přes tokeny, ne „natvrdo“ konkrétní hodnotou. Napevno zadaná barva se při změně vizuální identity nezmění a web se rozjede.

Výjimku dělejte jen ojediněle (např. jednorázová mezera). I tak preferujte token, pokud existuje.

Responzivita

Editor i třídy stylování jedou desktop-first: základní („default“) nastavení platí pro desktop a pro menší obrazovky (tablet → mobil) ho pak upravujete směrem dolů.

Nejdřív nastavte vzhled pro desktop, potom dolaďte tablet a mobil.
Před publikací zkontrolujte náhled na desktopu i na mobilu — spousta chyb je vidět jen na jednom z nich.