Barvy

Všechny základní barevné hodnoty (hexadecimální kódy) jsou uloženy v kolekci Primitives.
Kolekce Color následně tyto hodnoty referencuje a zpracovává je do semantických tokenů. Tyto tokeny jsou pak přiřazovány jednotlivým prvkům uživatelského rozhraní, jako jsou pozadí, texty, ikony a další elementy, čímž zajišťují konzistentní a flexibilní používání barev napříč celým Design Systémem.

Možnosti customizace barev ​

Díky design tokenům, které jsou dostupné od verze 4.1, je přizpůsobení barevné palety velmi jednoduché. Stačí definovat základní sadu barev v kolekci Primitives pro nový produkt s odlišnou vizuální identitou. Tokeny a jejich propojení mezi kolekcemi Primitives a Color, stejně jako se samostatnými komponentami, pak automaticky zajistí přiřazení těchto barev jednotlivým prvkům uživatelského rozhraní.
Je však důležité dbát na správné nastavení odstínů, aby splňovaly požadavky na kontrast a přístupnost, zejména u textů a interaktivních prvků. Tento přístup zajišťuje vizuální konzistenci a dostupnost pro všechny uživatele, přičemž zachovává flexibilitu pro různé brandové identity.

Primary ​

Primární paleta je složena z odstínů modré barvy. Základní barva je Primary 600 (#2E6AA8) – vychází z Jednotného vizuálního stylu státní správy (JVS). Tato barva je klíčová pro všechny akční prvky, jako jsou tlačítka, odkazy a ikony. Je to hlavní komunikační barva a má zásadní roli při vytváření identity.

Secondary ​

Sekundární paleta barev je tvořena odstíny oranžové barvy. Sekundární barvy poskytují kontrast k primárním barvám a pomáhají zvýraznit důležité prvky na stránce nebo v aplikaci. Vytvářejí vizuální hierarchii, kdy primární barvy zdůrazňují nejdůležitější prvky a sekundární barvy jsou využívány pro méně výrazné elementy. Tento přístup usnadňuje orientaci uživatele a může zvýšit čitelnost textů, pokud jsou tyto barvy použity k odlišení důležitých informací od pozadí. Sekundární barvy by měly být pečlivě vybrány tak, aby ladily s primárními barvami a posilovaly váš brand.

Neutral ​

Neutrální paleta se skládá z odstínů šedé barvy s lehkým modrým nádechem, vycházejících z Jednotného vizuálního stylu státní správy (JVS). Jejím hlavním využitím jsou textové části, ale světlejší odstíny lze využít i jako pozadí pro různé sekce webu. Neutrální barvy zajišťují vizuální rovnováhu a mohou být použity tam, kde je potřeba snížit vizuální zátěž, přičemž stále udržují čitelnost a přehlednost.

Error ​

Paleta Error je tvořena odstíny červené barvy, vycházejícími z Jednotného vizuálního stylu státní správy (JVS). Používá se pro signalizaci chyb a negativních stavů – prvky, které uživatele upozorňují na chyby nebo kritické problémy. Kromě chybových hlášek a varování může být červená barva z této palety použita i pro tlačítka spojená s akcemi, které mohou mít významné důsledky.

Warning ​

Paleta Warning se skládá z odstínů žluté barvy, která se používá k upozornění uživatele na potenciální problémy nebo důležitá upozornění. Tato barva je ideální pro zobrazení varovných stavů a je využívána v tlačítkách, zprávách nebo dalších prvcích vyžadujících zvýšenou pozornost.

Success ​

Paleta Success je tvořena odstíny zelené barvy, která je obvykle spojována s pozitivními zprávami a akcemi. Tato paleta je používána pro stavy úspěchu, jako jsou potvrzení akcí, pozitivní zpětná vazba a úspěšně dokončené procesy. Zelené barvy v této paletě mohou být využity i pro tlačítka a další interaktivní prvky, které signalizují úspěch.

Další barvy ​

Palety Focus a Visited obsahují barvy, které jsou důležité pro stavové a interaktivní prvky uživatelského rozhraní. Tyto barvy hrají klíčovou roli při poskytování zpětné vazby uživateli během navigace a interakce s obsahem.

Focus ​

Barvy ze sady Focus jsou navrženy tak, aby zvýraznily aktivní prvky uživatelského rozhraní, které mají aktuálně zaměření (focus). Používají se k vizuálnímu upozornění na prvky, se kterými uživatel právě interaguje, například při používání klávesnice k navigaci nebo při výběru konkrétních polí. Tyto barvy zajišťují, že uživatel snadno identifikuje aktuálně aktivní prvek, což je klíčové pro přístupnost.

Visited ​

Paleta Visited je používána k označení již navštívených odkazů nebo prvků, aby uživatelé mohli snadno rozpoznat, které stránky nebo části obsahu již navštívili.