1. Styly

Barvy

Styly barev definují, jak se v návrhu používají barvy.

Primární barvy

Primary
Blue
 
#2362a2
Dark
Grey
 
#3b3b3b
White

 
#ffffff

Použití primárních barev

Název barvy Hexa kód Použití
Primary Blue #2362a2 Pro dominantní použití na stránce. Je zastoupená v roli hlavní podkladové barvy, a to zejména v hlavičce, ale i pro elementy navigace nebo rozcestníků. Také se používá jako barva aktivních elementů jako jsou například odkazy nebo tlačítka.
Dark Grey #3b3b3b Jako obecná barva textů, nadpisů a některých odkazů. Jako alternativní barva podkladu zastoupená zejména v patičce.
White #ffffff Jako podkladová barva pro aktivní elementy nebo komponenty. Jako barva tlačítek, odkazů a textů použitých na Primary Blue a Dark Grey barvě.

Modré barvy

Primary
Blue Dark
 
#254e80
Primary
Blue
 
#2362a2
Primary
Blue Light
 
#3077b7
Blue
Inactive 1
 
#91b0d0
Blue
Inactive 2
 
#d3dfec
Blue
Hover
 
#e5ebf0
Blue
Focus
 
#007bff

Použití modrých barev

Název barvy Hexa kód Použití
Primary Blue Dark #254e80 Pro zvýraznění hover stavů některých aktivních elementů v barvě Primary.
Primary Blue #2362a2 Pro dominantní použití na stránce. Je zastoupená v roli hlavní podkladové barvy, a to zejména v hlavičce, ale i pro elementy navigace nebo rozcestníků. Také se používá jako barva pro vyznačení některých aktivních elementů jako jsou například odkazy nebo tlačítka.
Primary Blue Light #3077b7 Pro zvýraznění hover stavů některých aktivních elementů umístěných na barvě Primary Blue.
Blue Inactive 1 #91b0d0 Pro zobrazení neaktivních (disabled) stavů některých elementů, především textových odkazů umístěných na světlém i Primary Blue pozadí.
Blue Inactive 2 #d3dfec Pro zobrazení neaktivních (disabled) stavů některých elementů, především tlačítek umístěných na světlém pozadí.
Blue Hover #e5ebf0 Pro zvýraznění hover stavů některých aktivních elementů jako jsou například odkazy nebo tlačítka.
Blue Focus #007bff Pro zvýraznění focus stavů na světlém pozadí.

Neutrální barvy

Dark
Grey
 
#3b3b3b
Mid
Grey
 
#686868
Light
Grey
 
#a8a8a8
Background
Grey
 
#f5f5f5
White

 
#ffffff

Použití neutrálních barev

Název barvy Hexa kód Použití
Dark Grey #3b3b3b Jako obecná barva primárních textů, nadpisů a některých odkazů. Jako alternativní barva podkladu zastoupená zejména v patičce.
Mid Grey #686868 Jako barva obecných a sekundárních textů.
Light Grey #a8a8a8 Jako barva neaktivních nebo zástupných textů.
Background Grey #f5f5f5 Jako obecná barva pozadí stránky.
White #ffffff Jako podkladová barva pro aktivní elementy nebo komponenty. Jako barva tlačítek, odkazů a textů použitých na Primary Blue a Dark Grey barvě.

Žluté barvy

Yellow

 
#ecae1a
Yellow
Dark
 
#dd9f0c

Použití žlutých barev

Název barvy Hexa kód Použití
Yellow #ecae1a Především u ilustrací.
Yellow Dark #dd9f0c Pro zvýraznění hover stavů u ilustrací.

Výstražné barvy

Error

 
#e04857
Success

 
#6fbd2c

Použití výstražných barev

Název barvy Hexa kód Použití
Error #e04857 Jako barva pro chybové hlášky.
Success #6fbd2c Jako barva pro potvrzovací hlášky.