Vizuální identita
Barvy
Barvy jsou esenciální součástí identity a utvářejí naši vizuální prezentaci. Najdete tu značkovou paletu i barvy, které používáme na webu. S barvami pracuje i logo a symboly značky.
Primární paleta
Barvy, které reprezentují značku. Žlutá evokuje zlato, bohatství a profit; vyjadřuje optimismus, sebedůvěru, originalitu, analytické myšlení, kreativitu a zábavu – praktickou, technickou a progresivní část kultury. Bílá a černá symbolizují část kultury duchovní, etickou a vyrovnanou. Společně tvoří jednotu.
Pravidla
Tóny barev se nesmí libovolně měnit. Černá nikdy nesmí převažovat nad žlutou a bílou. Pozor na kombinaci žlutá + černá – evokuje nebezpečí. Kromě hlavní trojice se barvy drží manuálu Google Material Design.
Značková černá a text na webu
Značková černá #2E2014 je teplá tmavě hnědá (barva krasopisu v logu) a platí pro logo a tisk. Pro text, například na webu, je přípustná i jiná tmavá – na webu sázíme text neutrálnější a čitelnější #333 (dark-1). Je to vědomé pravidlo, ne nedopatření.
Dvě žluté
Značková (primární) žlutá je #FDD417 – zlatavý tón sedící k symbolice „zlato“ (nese ji logo, web i identita). Vedle ní žije doplňková citronová #FFEB3B (Material) – hodí se do grafik a dynamického obsahu a obě žluté mohou stát vedle sebe. Značku ale vždy reprezentuje #FDD417.
Webová paleta
Barvy, které používáme na webu (Bootstrap 5). Ve vlastním CSS se barvy zapisují jen přes proměnné var(--bs-…), nikdy natvrdo – změna hodnoty na jednom místě se pak promítne všude.
Značka a akcenty
Odkazy a funkční modrá
Modrá je funkční barva (akce, ovládací prvky), ne značková – značková primární je žlutá. Odkazy mají tři odstíny z jedné řady, ne tři různé modré; liší se jen podle podkladu a velikosti písma.
- Na bílé
#1976D2(4,60 : 1). - Na šedé ploše
--bs-bg-2by stejná modrá spadla na 4,22 : 1, pod hranici AA. Proto se tam sází o stupeň tmavší#1871CA(4,53 : 1). V CSS to řeší jedno pravidlo, ručně se nic nepřepíná. - Ve velkém textu (od 24 px, nebo od 18,66 px tučně) stačí poměr 3 : 1, takže projde i světlejší
#2196F3(3,12 : 1) – třída.om-link-lg. Na drobný text ne. - Světlá
#03A9F4neprojde jako text nikde (2,63 : 1), proto jen na výplně a ovládací prvky. Na značkovou žlutou modrý odkaz nepatří vůbec – tam se sází tmavý text.
Akční sada (výběr z Material Design)
Text
Šedá #9E9E9E má na bílé jen 2,68 : 1 – na text nepatří, jen na linky a dekorativní prvky.
Pozadí
Dynamická paleta
Dynamické barvy používáme v doplňkovém obsahu – infografiky, komentované snímky obrazovky, ilustrace, marketingové materiály. Povolený rozsah je celý Google Material Design. Značková paleta výše má vždy přednost.