Designový jazyk
Systém, který se dá zkontrolovat
Barvy, písmo a tvarosloví tohoto webu nejsou věc vkusu. Jsou to pravidla zapsaná v kódu, která se ověřují při každé úpravě. Stejná pravidla platí pro systémy, které stavíme klientům.
Proč to řešíme
Design systém je provozní nástroj, ne estetika
Firemní systém žije roky a sahá do něj víc lidí než jeden. Bez zapsaných pravidel se po druhém roce rozpadne do dialektů: tři odstíny šedé, pět velikostí tlačítka, formulář, který se na každé obrazovce chová jinak.
Rozhodnutí se dělá jednou
Odstín, rozestup nebo poloměr rohu se vyřeší jednou a zapíše do tokenu. Další obrazovka už se o tom nerozhoduje, bere hotové.
Přístupnost se nekontroluje ručně
Kontrast každé dvojice, kterou web skutečně vykresluje, měří skript. Když někdo sáhne na barvu a poměr spadne pod normu, změna neprojde kontrolou.
Nový člověk se chytí rychleji
Pravidla jsou napsaná a dohledatelná. Vývojář, který přijde na projekt v pátém měsíci, nemusí hádat, proč je něco zlaté a něco jiného ne.
Barvy
Osmdesát procent plochy je neutrální
Poměr je 80 % neutrální podklad, 15 % inkoust, 5 % akcent. Zlatá je v tomhle systému teplo, ne čitelnost, a každý její odstín má právě jedno povolené místo.
Hodnoty níž se nevypisují ručně. Každá plocha se vykresluje tímtéž tokenem, kterým se sází zbytek webu, a poměry kontrastu se z něj počítají při sestavení stránky.
Neutrální — světlý podklad
White
--cbk-paper · #ffffff
Základní podklad.
Spring Wood
--cbk-paper-warm · #f9f6f3
Teplé sekce a obsahové dokumenty.
Surface
--cbk-surface · #f7f7f7
Podklad karet a formulářů.
Surface Sunk
--cbk-surface-sunk · #f0f0f1
Zapuštěné plochy — kód v kartě, neaktivní pole.
Line
--cbk-line · #eaeaeb
Předěly a vlasové rámečky. Grafika, nikdy text.
Line Strong
--cbk-line-strong · #d8d8da
Linky v tabulce, rámeček aktivního pole.
1,42 : 1 na bílé — prochází (min 1,35 : 1)
Mute
--cbk-mute · #a8a8a8
Na světlém jen dekorace — nikdy text.
Medium Gray
--cbk-ink-soft · #6f7071
Sekundární text, popisky, placeholdery.
4,96 : 1 na bílé — prochází (min 4,5 : 1)
Ink Mid
--cbk-ink-mid · #3f4143
Podnadpisy a ikony tam, kde je inkoust příliš tvrdý.
10,25 : 1 na bílé — prochází (min 4,5 : 1)
Charcoal
--cbk-ink · #1c1d1f
Veškerý běžný text, tmavé plochy, primární tlačítka.
16,87 : 1 na bílé — prochází (min 4,5 : 1)
Neutrální — tmavý podklad
Dark Sunk
--cbk-dark-sunk · #141516
Zapuštěné plochy na tmavém — kód, vstupní pole.
Dark Base
--cbk-dark · #1c1d1f
Základní tmavá plocha. Totožná s inkoustem.
Dark Raised
--cbk-dark-raised · #26282a
Karta a vyvýšená plocha na tmavém.
Dark Line
--cbk-dark-line · #35383a
Předěly na tmavém.
1,43 : 1 na uhlové — prochází (min 1,35 : 1)
Dark Line Strong
--cbk-dark-line-strong · #4a4d50
Rámečky a linky tabulky na tmavém.
On Dark
--cbk-on-dark · #ffffff
Hlavní text na tmavém.
16,87 : 1 na uhlové — prochází (min 4,5 : 1)
On Dark Soft
--cbk-on-dark-soft · #a8a8a8
Sekundární text na tmavém — tentýž odstín, který je na světlém zakázaný.
7,09 : 1 na uhlové — prochází (min 4,5 : 1)
On Dark Mute
--cbk-on-dark-mute · #7e8082
Neaktivní stav a dekorace na tmavém.
4,26 : 1 na uhlové — prochází (min 3 : 1)
Teplá řada
Gold 50
--cbk-gold-50 · #fdf3e3
Nejsvětlejší krok sekvenční škály v grafech. Ne plošný podklad.
Gold 100
--cbk-gold-100 · #f2dcb0
Označený text, druhý krok sekvenční škály.
Sand
--cbk-sand · #e7c584
Jen na tmavém: akcentní text, linky, čísla.
Jen na tmavém podkladu
10,22 : 1 na uhlové — prochází (min 4,5 : 1)
Bronze
--cbk-bronze · #d39121
Modul uvnitř značky; grafika na tmavém.
Jen na tmavém podkladu
6,30 : 1 na uhlové — prochází (min 3 : 1)
Tussock
--cbk-tussock · #bc8947
Grafika na světlém: linky, ikony, rámečky. Ne text.
3,08 : 1 na bílé — prochází (min 3 : 1)
Deep Gold
--cbk-gold-deep · #8d6116
Jediná zlatá, kterou se na světlém smí psát. Akcentní text a odkazy.
5,45 : 1 na bílé — prochází (min 4,5 : 1)
Gold 900
--cbk-gold-900 · #5c3f0e
Odkaz po najetí na světlém, nejtmavší krok škály.
9,67 : 1 na bílé — prochází (min 4,5 : 1)
Stavy — světlý podklad
OK
--cbk-ok · #1b6f48
Potvrzení — vždy s ikonou a slovem.
5,58 : 1 na vlastní ploše — prochází (min 4,5 : 1)
OK Background
--cbk-ok-bg · #eaf7f0
Podklad potvrzovací hlášky.
OK Line
--cbk-ok-line · #b3dfc9
Rámeček potvrzovací hlášky.
1,47 : 1 na bílé — prochází (min 1,35 : 1)
Info
--cbk-info · #136b75
Doplňující sdělení.
5,39 : 1 na vlastní ploše — prochází (min 4,5 : 1)
Info Background
--cbk-info-bg · #e5f1f8
Podklad informační hlášky.
Info Line
--cbk-info-line · #b9dee4
Rámeček informační hlášky.
1,44 : 1 na bílé — prochází (min 1,35 : 1)
Warn
--cbk-warn · #985301
Varování.
4,86 : 1 na vlastní ploše — prochází (min 4,5 : 1)
Warn Background
--cbk-warn-bg · #fbe7c6
Podklad varování — záměrně oranžovější než Gold 50, aby varování nečetlo jako blok značky.
Warn Line
--cbk-warn-line · #f0d6a8
Rámeček varování.
1,41 : 1 na bílé — prochází (min 1,35 : 1)
Danger
--cbk-danger · #c02222
Chyba.
5,31 : 1 na vlastní ploše — prochází (min 4,5 : 1)
Danger Background
--cbk-danger-bg · #feedec
Podklad chybové hlášky.
Danger Line
--cbk-danger-line · #f7c6c3
Rámeček chybové hlášky.
1,52 : 1 na bílé — prochází (min 1,35 : 1)
Stavy — tmavý podklad
OK on Dark
--cbk-ok-dark · #2ebb79
Potvrzení na tmavém. Na světlém by neprošlo.
6,83 : 1 na uhlové — prochází (min 4,5 : 1)
OK Background on Dark
--cbk-ok-bg-dark · #16301f
Podklad potvrzení na tmavém.
Danger on Dark
--cbk-danger-dark · #ff6b6b
Chyba na tmavém.
6,08 : 1 na uhlové — prochází (min 4,5 : 1)
Danger Background on Dark
--cbk-danger-bg-dark · #331817
Podklad chyby na tmavém.
Proč ne prostě zlatá
Rozdíl mezi dvěma zlatými je měřitelný
Sand a Deep Gold vypadají příbuzně. Na bílém podkladu je mezi nimi rozdíl mezi textem, který se dá přečíst, a textem, který normu nesplní. Proto Sand na světlém nikdy nenese text.
Sand
#e7c584 na bílé
1,65 : 1 — neprochází (min 4,5 : 1)
Jen na tmavém: akcentní text, linky, čísla.
Deep Gold
#8d6116 na bílé
5,45 : 1 — prochází (min 4,5 : 1)
Jediná zlatá, kterou se na světlém smí psát. Akcentní text a odkazy.
Obě čísla jsou spočítaná z hodnot výš, ne opsaná. Ukázku nečitelného textu tahle stránka záměrně nevykresluje — tvrdit se to dá číslem.
Písmo
Jedno písmo, devět velikostí
Inter pro všechno. Druhé písmo by znamenalo druhé rozhodnutí u každého nadpisu. Velikosti jsou plynulé: mezi mobilem a velkou obrazovkou se škálují, ne přepínají.
Software, který kopíruje váš proces
Firemní systémy na míru
Začínáme analýzou, ne vývojem
Jsme tu i po nasazení
Příliš žluťoučký kůň úpěl ďábelské ódy.
Příliš žluťoučký kůň úpěl ďábelské ódy.
Příliš žluťoučký kůň úpěl ďábelské ódy.
Firemní systémy na míru
Verzálky patří jen do očka nad nadpisem. Nikdy do nadpisu samotného a nikdy do názvu značky.
Tvar a rytmus
Hloubka je plocha a vlasová linka
Modul značky je čtverec, takže ikony a číselné dlaždice jsou čtvercové s rádiusem, ne kolečka. Stín se nepoužívá vůbec.
Čtyři poloměry
4, 8, 12 a 16 pixelů. Nic mezi tím a nic nad tím. Plně zakulacená pilulka se v šabloně nevyskytuje.
Jeden předěl
Vlasová linka. Karta se od podkladu neliší stínem, ale vlastní plochou a rámečkem o šířce jednoho pixelu.
Střídání ploch
Světlá a tmavá sekce se střídají. Tři tmavé za sebou se nesázejí a patička se do nich počítá.
Pohyb
Pohyb smí obsah jen uvést
Blok se při doscrollování jednou prolne a tím to končí. Obsah je plně čitelný i bez JavaScriptu a systémové nastavení pro omezení pohybu animace vypne úplně.
Co z toho máte
Tohle není o našem webu
Pravidla výš platí i pro systémy, které stavíme klientům. Rozdíl není v tom, že jsou hezčí. Je v tom, co se s nimi dá dělat po roce provozu.
Změna barvy je jedna změna
Ne hledání po celé šabloně. Token se přepíše na jednom místě a projeví se všude, kam patří.
Přístupnost se dokládá, netvrdí
Kontrast je číslo, ne názor. U systémů pod regulatorním dohledem je to rozdíl mezi doložitelným a nedoložitelným.
Předání není ztráta
Pravidla leží v repozitáři vedle kódu. Když systém převezme jiný tým, přebírá i důvody, ne jen soubory.
První krok
Chcete systém, který se dá takhle zkontrolovat?
Začínáme analýzou za pevnou cenu. Napište nám, co ve firmě drhne, a ozveme se do dvou pracovních dnů.