Barevné zvýraznění, významy barev pro různé druhy upozornění

Významy barev

Sémantické barvy určují jasný vizuální jazyk. Pro dosažení konzistence v celém systému používáme pro konkrétní stavy a emoce vyhrazené barvy. Každá sémantická barva (kromě primárního brandu) je dostupná v logické škále intenzity: od světlého pozadí (fade), přes jemný border (mute), až po výrazné akcenty (medium, intense) a text (emphasize).

Červená (Danger)

• Význam: Chyba, nebezpečí, destruktivní nebo nevratná akce.
• Použití: Validační chyby, mazání záznamů, chybové hlášky, zamítnutí.
• Nejpoužívanější odstíny:
  • Pozadí (Fade): hsl(4, 70%, 96%) – pro pozadí chybového alertu.
  • Border (Mute): hsl(8, 100%, 85%) – okraje chybových inputů.
  • Ikona (Medium): hsl(8, 77%, 67%) – chybové ikony.
  • Výrazná akce (Intense): hsl(8, 73%, 55%) – primární danger tlačítko.

Oranžová (Warning)

• Význam: Varování, upozornění, nestandardní situace, vyžaduje pozornost, ale ne nutně okamžitý zásah.
• Použití: Expirující platnost, chybějící nepovinné údaje, upozornění v tabulce.
• Nejpoužívanější odstíny:
  • Pozadí (Fade): hsl(33, 90%, 96%) – pro pozadí varovného alertu.
  • Border (Mute): hsl(36, 100%, 73%) – okraje varovných prvků.
  • Ikona (Medium): hsl(34, 89%, 68%) – varovné ikony.
  • Výrazná akce (Intense): hsl(34, 93%, 54%) – výrazné varování.

Zelená (Success)

• Význam: Úspěch, potvrzení, validní stav, nalezení shody.
• Použití: Úspěšně dokončené operace, nalezená adresa, aktivní / schválený stav (používejte střídmě na vyžádání – viz níže).
• Nejpoužívanější odstíny:
  • Pozadí (Fade): hsl(101, 80%, 96%) – pro pozadí úspěšného alertu.
  • Border (Mute): hsl(101, 67%, 75%) – okraj potvrzovacího inputu.
  • Ikona (Medium): hsl(100, 58%, 67%) – success ikona.
  • Výrazná akce (Intense): hsl(100, 77%, 44%) – silné zvýraznění úspěchu.

Modrá (Info)

• Význam: Neutrální informace, systémová nápověda, odkazy.
• Použití: Tooltipy, informační bannery, stav „ve zpracování“, hypertextové odkazy.
• Nejpoužívanější odstíny:
  • Pozadí (Fade): hsl(206, 80%, 96%) – pro informační boxy.
  • Border (Mute): hsl(206, 100%, 80%) – okraj informačních prvků.
  • Ikona (Medium): hsl(206, 83%, 72%) – informační ikona.
  • Výrazná akce (Intense): hsl(206, 83%, 65%) – hlavní info barva / odkazy.

Šedá (Neutral / Muted)

• Význam: Deaktivováno (disabled), nevýznamný obsah, layoutové ohraničení, read-only.
• Použití: Neaktivní tlačítka a inputy (disabled), hraniční čáry (dividers), zástupné texty (placeholders), doplňkové popisy.
• Nejpoužívanější odstíny:
  • Pozadí Disabled (Subtle): hsl(210, 17%, 93%) – pozadí neaktivních nebo read-only inputů.
  • Border (Mute): hsl(210, 14%, 89%) – základní oddělovače a okraje struktury.
  • Disabled text/ikona (Medium): hsl(210, 11%, 71%) – texty ve stavu disabled a placeholdery.
  • Sekundární text (Intense): hsl(208, 7%, 46%) – pomocné texty a popisky.

Označení stavu inputů

Komponenta InputField a všechny komponenty které z ní vycházejí mají stav jako součást nastavení.

Zelený okraj (success)
slouží k vizuálnímu potvrzení, že došlo ke shodě nebo úspěšnému nalezení výsledku. Uživatel tak okamžitě vidí, že systém našel odpovídající položku nebo správný výsledek.

Použití:

• Používejte pouze na vyžádání, v případech, kdy má uživatel jasně vidět, že došlo k úspěšné shodě.
• Typickým příkladem je záměr mapy – např. když systém úspěšně nalezne zadanou adresu („adresa nalezena v Ruanu“).
• Nepoužívejte pro validaci formulářů ani běžné úspěšné akce, kde by nadměrné množství zelených prvků rušilo uživatele.

Změna chování od Q3/2025: Zelený border byl dříve používán i pro validaci, ale vedl k přetížení vizuálních podnětů („příliš se to zelenalo“). Nyní je vyhrazen pouze pro specifické stavy shody, kde jeho použití má jasný smysl a dopad.

U danger stavu se nastavuje border do stavu danger, na ikonu se aplikuje varianta color/text/danger, pro description se vybírá stav danger. U success stavu se nastavuje input do stavu success, pro ikonu se aplikuje varianta color/text/success.

Označení stavu formulářových komponent

Existuje více možností jak hodnotě přiřadit pozitivní nebo negativní stav. Je možné použít nastavení komponenty, nebo vytvořit organismus z více komponent.

• Literal – u literálu je pro hodnotu možné zvolit stav success nebo danger.
• Literal + Tag – tag je možné nastavit do stavu, který reflektuje stav vyjadřující úspěch nebo nebezpečí.
• Tag + Typography Tag lze nastavit do podoby success nebo danger. Lze kombinovat s komponentou typography. Pro komponentu je možné nastavit barvu pomocí varianty color/text/success a danger.

Tabulka

V tabulce je možné přiřadit stav celým řádkům, individuálním buňkám, nebo CTA v řádku.

• Označení problematického řádku. Nastavení stavu je nutné provést na úrovni pomocné komponenty table_td. Nastavení se provede pro všechny buňky v řádku.
• Zvýraznění konkrétního parametru. Nastavení se provádí na úrovni table_td. Ikonu lze zvolit na úrovni nastavení value. Barva pro ikonu se nastavuje pomocí varianty color/text/.
• CTA pro konkrétní řádek – je možné používat buttony ve stavech danger/base a success/base pro akce s řádkem tabulky.