Tři rodiny písma, modulární velikostní škála a tučnosti. Nadpisy a UI používají
--font-primary, editorial prvky (ceny, hero) --font-serif.
| Token | px | Ukázka |
|---|---|---|
| --fs-200 | 12 | Drobný popisek / hint |
| --fs-300 | 14 | Sekundární text |
| --fs-400 | 16 | Základní text (base) |
| --fs-500 | 18 | Zvětšený text |
| --fs-600 | 20 | Podnadpis |
| --fs-700 | 24 | Nadpis sekce |
| --fs-800 | 30 | Velký nadpis |
| --fs-900 | 36 | Hero nadpis |
| --fs-1000 | 48 | Display |
--lh-tight · 1.2
Krátké řádky nadpisu. Příliš žluťoučký kůň úpěl ďábelské ódy.
--lh-base · 1.5
Standardní odstavec. Příliš žluťoučký kůň úpěl ďábelské ódy.
--lh-relaxed · 1.65
Vzdušný text (body). Příliš žluťoučký kůň úpěl ďábelské ódy.
Prostorová škála --size-* (base = 16 px). Bootstrap-kompatibilní aliasy
--spacing-1…5 mapují na stejné hodnoty, takže .p-3, .mt-4
a vlastní komponenty sdílí jeden rytmus.
| Token | px | Velikost |
|---|---|---|
| --size-200 | 4 | |
| --size-300 | 8 | |
| --size-400 | 16 · base | |
| --size-500 | 24 | |
| --size-600 | 32 | |
| --size-700 | 48 | |
| --size-800 | 64 | |
| --size-900 | 96 |
Zaoblení rohů pro různé prvky – od kódu po hero a pilulky.
Durace a easing. Zkratka --tx (= 0.2s +
--ease-in-out) je výchozí pro hover stavy. Najeď na dlaždice.
Z-index vždy přes tokeny, nikdy hardcoded čísla. Opacity pro disabled / overlay stavy.
| --z-dropdown | 100 |
| --z-sticky | 200 |
| --z-overlay | 400 |
| --z-modal | 500 |
| --z-toast | 1031 |
| --z-tooltip | 800 |