Tokeny, ze kterých je postavené všechno ostatní: barevná škála, typografický systém a mřížka prostoru.
Barva se v Ingotu nepíše hodnotou, ale rolí. Akcent má role čtyři a každá odpovídá na jinou otázku:
--accent — samotná barva. Akce, vyplněné tlačítko, ikona, focusový obrys; je to i barva textu, takže musí být čitelná na plochách.--accent-ink — tmavší stupeň akcentu. Hover akcí a barva odkazů.--accent-bg — tint pod vybraným řádkem, odznakem a calloutem. Nikdy ne text.--accent-border — linka akcentu, obrys toho tintu. Dekorativní, nenese informaci sama o sobě.Obrazovka sáhne po proměnné, ne po hodnotě. Tím se rodina i motiv dají vyměnit bez toho, aby se do obrazovek sahalo.
Akcent je jedna ze čtyř barevných rolí, které si obrazovka bere přes proměnnou — nikdy jako hex. Rodin je pět a liší se jen hodnotami těch čtyř proměnných; komponenta o tom, která zrovna platí, neví.
| Rodina | Hodnota | --accent | --accent-ink | --accent-bg | --accent-border |
|---|---|---|---|---|---|
| modrý | blue | ||||
| smaragdový | emerald | ||||
| oranžový | orange | ||||
| fialový | violet | ||||
| břidlicový | slate |
Každá rodina má vlastní světlé i tmavé hodnoty, takže přepnutí motivu ji přepočítá samo — přepínačem vlevo si to lze vyzkoušet v obou motivech. V aplikaci se rodina volí v menu účtu a pamatuje si ji účet, ne prohlížeč. Uvnitř obchodu má přednost barva toho obchodu.
Hodnoty ve sloupci se čtou za běhu z právě platné palety — přepnutí motivu vlevo je přepíše. Obrazovka proto vždycky sahá po jménu tokenu, nikdy po hodnotě.
| Token | Hodnota | K čemu | |
|---|---|---|---|
--bg | — | Plocha stránky. | |
--surface | — | Karty, tabulky. | |
--surface-2 | — | Hlavičky, hover. | |
--surface-3 | — | Track, výplně. | |
--border | — | Výchozí linka. | |
--border-strong | — | Vstupy, aktivní. | |
--ink | — | Text, primární tlačítko. | |
--ink-2 | — | Běžný text. | |
--ink-3 | — | Sekundární. | |
--ink-4 | — | Terciární, disabled. |
| Token | Hodnota | K čemu | |
|---|---|---|---|
--accent | — | Akce, focus. | |
--accent-ink | — | Hover, odkazy. | |
--accent-bg | — | Výběr, callout. | |
--accent-border | — | Linka akcentu. |
| Token | Hodnota | K čemu | |
|---|---|---|---|
--ok | — | Aktivní, hotovo. | |
--ok-bg | — | Podklad. | |
--warn | — | Čeká, limit. | |
--warn-bg | — | Podklad. | |
--danger | — | Chyba, stop. | |
--danger-bg | — | Podklad. |
Každý stav má i podkladovou variantu. Bez ní nejde postavit odznak se stavovým tintem: sytý token je v něm textem a plocha pod ním musí být vlastní barva, ne oslabená verze té první.
Škála má osm stupňů a každý má jméno i pevnou hodnotu — velikost se nevybírá od oka. Ukázka vlevo je vysázená přesně těmi třídami, které řádek jmenuje.
Bezpatkové písmo nese řeč, mono nese fakta: čísla, kódy, rozměry a identifikátory. Tabulární číslice drží číslo pod číslem, takže se částky ve sloupci dají porovnat okem.
| Ukázka | Stupeň | Velikost / váha | Třídy |
|---|---|---|---|
| Výrobní partneři | Nadpis stránky | 40 / 600 | text-h1 text-ink |
| Cenové vzorce | Nadpis sekce | 26 / 600 | text-h2 text-ink |
| Parametry stroje | Podnadpis | 18 / 600 | text-h3 text-ink |
| Nastavení, které se propíše do všech nabídek. | Perex | 17 | text-lede text-ink-2 |
| Základní text v panelech a popiscích polí. | Běžný text | 14,5 | text-body text-ink-2 |
| Sekundární informace, nápověda pod vstupem. | Drobný text | 13 | text-small text-ink-2 |
| Sekce · verzálky | Popisek | 11 / 500 | text-eyebrow uppercase text-ink-3 |
| 128 640 Kč · S235JR · 3,0 mm · 1 380 ks | Číslo | mono | font-mono tabular-nums text-body text-ink |
Mezery jdou po čtyřech pixelech. Menší krok se nezavádí — dvě sousední hodnoty, které od oka nerozeznáš, nejsou dvě hodnoty. Čtverec vlevo má přesně tu velikost, kterou popisek jmenuje.
s-1 · 4pxs-2 · 8pxs-3 · 12pxs-4 · 16pxs-5 · 24pxs-6 · 32pxs-7 · 48pxRádius roste s velikostí prvku: drobné štítky mají nejmenší, karty a rámečky největší. Plný kruh je vyhrazený pro avatary a puntíky.
rounded-sm · r-xs · 4pxrounded · r-sm · 6pxrounded-md · r-md · 10pxrounded-lg · r-lg · 14pxrounded-full · 999pxStín říká, jak vysoko nad stránkou prvek leží. Tři stupně stačí: každý má své patro a mimo ně se nepoužívá.
--shadow-smKarty na pozadí a jejich hover.
--shadow-mdRozbalovací menu a modální okno.
--shadow-lgBoční panel a toast.
Vrstvy mají pevné hladiny, aby se překryvy nepřebíjely případ od případu. Mezera mezi bloky obsahu je 24 px.
| Vrstva | Hladina |
|---|---|
| Obsah | 0 |
| Přilepený toolbar | 30 |
| Hlavička | 40 |
| Boční panel | 80 |
| Modální okno | 90 |
| Toast | 100 |
Pohyb má v systému jedno trvání a jednu křivku. Dialog, boční panel, toast i menu se tak otevírají stejně rychle — a když se má rychlost změnit, mění se na jednom místě.
--dur — 0,22 s. Dost dlouho, aby bylo vidět, odkud panel přišel; dost krátko, aby se na něj nečekalo.--ease — křivka, která rychle vyjede a měkce dosedne. Lineární pohyb působí mechanicky.