Pravidla pro modifikaci design systému

Design systém je manuál, podle kterého Digitální a informační agentura navrhuje a vyvíjí weby a digitální produkty. Design systém má pomoci dalším týmům rychleji vytvářet digitální produkty, které budou konzistentní napříč veřejnou správou.

Právě jednotnost v užívání a vzhledu různých digitálních produktů státní správy zjednoduší uživateli orientaci a průchodnost jeho obsahem. Jakmile jednou pochopí strukturu a vizuální styl jednoho z produktů, při návštěvě jiného bude mít již vybudované povědomí a ulehčí mu to orientaci.

Každý produkt, který se chystá dle společného design systému, bude mít specifické požadavky a vlastní výzvy na jeho aplikaci. Počítá se tedy s rozvojem a úpravami design systému podle individuálních požadavků.

Pro zachování konzistence design systému je potřeba dodržet tato pravidla:

Snadnější modifikace s verzí 4.1 ​

S příchodem verze 4.1 Design Systému gov.cz se výrazně zjednodušila možnost modifikace díky použití tokenů. Tyto tokeny umožňují snadno upravovat vizuální prvky, jako jsou barvy, velikosti komponent, rozestupy a další atributy, a to jak v designu, tak v kódu. Všechny změny jsou díky tokenům okamžitě aplikovány napříč celým systémem, což zajišťuje konzistentní vzhled a funkčnost.

Pro úpravu například barevné palety stačí změnit hodnoty v kolekci Primitives, což se automaticky promítne do všech komponent, které dané barvy používají. Podobně lze pomocí velikostních tokenů rychle přizpůsobit rozměry textu, ikon nebo rozestupů mezi komponentami podle specifických požadavků projektu, aniž by došlo k narušení konzistence celého systému.

Tokeny tak zajišťují flexibilitu a snadnou přizpůsobitelnost Design Systému gov.cz různým projektům a produktům, přičemž zachovávají jeho jednotnost a efektivitu.

Více se dozvíte na stránkách popisujících Barevné tokeny a Velikostní tokeny.

Co se nesmí modifikovat ​

Vzhled a funkce existujících komponent design systému ​

Praxe ​

Zavedenou komponentou je např. Switch. Jeho velikost a funkčnost je pevně stanovena. Nelze sní libovolně nakládat. Při jeho aplikaci budete vycházet z barevného schématu vašeho produktu.

Vypínač ​

Vztahy mezi barvami se nesmí významně změnit – poměr, kontrast, sytost ​

Praxe ​

Zavedená barevná škála u primární modré s barvou pozadí: #f2f2f2 odpovídá kontrastem dle přístupnosti WCAG 2.1, kterou lze ověřit na colourcontrast.cc.

Nedovolená modifikace ​

Nesmí se měnit typografie – font, vzhled ​

Praxe ​

Závazným fontem jsou řezy písma Roboto:

• Roboto Thin
• Roboto Light
• Roboto Regular
• Roboto Medium
• Roboto Bold

Jiné fonty jsou zakázané. Více k typografii.

Co se smí modifikovat ​

• Smí vzniknout nový nebo odlišný layout. Existující layout a šablony vznikly pro potřeby Portálu veřejné správy. Mohou sloužit jako doporučení.
• Primární a odvozené sekundární modré barvy. Můžete použít barvu svého produktu např. zelenou, červenou apod. Musí se dodržet kontrast dle WCAG 2.1.

Praxe ​

Ukázka modifikovaných barevných schémat z portálů

Smí vzniknout nové komponenty dle potřeby. Pokud komponenta v design systému již existuje, musí být použita. ​

Praxe ​

1. Ověřte si v seznamu komponent, zda vaším požadavkům nevyhovuje již existující komponenta.
2. Pokud ne, obraťte se s dotazem na design@dia.gov.cz. Napište nám, pro jaký účel komponentu potřebujete a pokud máte bližší představu o její podobě a funkčnosti sdělte nám ji také. Rádi vám s návrhem vhodného řešení poradíme. Univerzální komponenty použitelné i pro ostatní projekty do design systému přidáme. Vámi navržené specifické komponenty budou součástí pouze vašeho projektu.

Smí se upravit velikost fontu v případě potřeby ​

Praxe ​

Nedoporučujeme zmenšovat velikost fontů. Pro většinu textu je navržena velikost fontu 16px (Body M). Doporučujeme tuto velikost dodržet nebo zvětšit na 18px (Body L).

Smí vzniknout nové ikony dle potřeby ​

Praxe ​

1. Ověřte si v seznamu ikon, zda vaším požadavkům nevyhovuje již existující ikona.
2. Pokud vám nestačí ikony navržené v design systému můžete zvolit jinou dostupnou knihovnu ikon, případně navrhnout vlastní set ikon, který bude odpovídat stylu ikon design systému.

Aplikace design systému v praxi ​

Pro Portál veřejné správy je k dispozici samostatný Pattern Lab PVS, který slouží jako ukázka aplikace design systému gov.cz na konkrétním projektu.

Pattern Lab PVS navíc obsahuje vlastní komponenty, které nejsou součástí design systému gov.cz, a byly specificky vytvořené pro tento projekt.

Obdobně při tvorbě vlastního projektu budete využívat pravidel a komponent design systému gov.cz, které obohatíte o individuální řešení layoutu a vlastní komponenty.

Rádi vám pomůžeme s implementací design systému pro váš produkt. V případě dotazů se obraťte na e-mail design@dia.gov.cz.