Deformace
Brand manuál
CIAD federal 2.6.0
Obsah · 10 kapitol
DIGITÁLNÍ STANDARD · 2.6.0Jeden zdroj pravdy pro web, e-mail i tisk.
01 Značka
Značka stojí na kruhu, horizontu a tichém slově CIAD.
Mark je geometrický a monochromatický. Zapsaný název drží velké I a velké D ve všech brandových kontextech.
- Zapsaný název
- Český Institut pro AI a Data z.ú. · IČO 297 52 736
- H1 a titulky
- Český Institut pro AI a Data
- Zkratka
- CIAD
- Kapitalizace
- Velké I a velké D se nikdy nemění. Podoba „Český institut pro AI a data“ je v brandovém kontextu chybná.
- ViewBox
- 0 0 100 100
- Kruh
- cx 50 · cy 50 · r44
- Linka
- x1=2 → x2=98 · y=50
- Stroke
- 4 header · 5 velké užití · currentColor
Konstrukční diagram
Ochranná zóna je 1/4 průměru marku. Minimální digitální velikost je 24 px.
CIAD
CIAD
Lockup = mark + CIAD v Newsreader 400, uppercase, tracking .06em, optický posun translateY(.09em), mezera přibližně 18 % výšky marku. Wordmark barvy: Federal blue na světlé, White 2 (= Federal light) na tmavé.
Stíny
Jiné barvy
Rotace
Outline verze
Auditní text
Newsreader v běžném textu
Rytiny
Záhlaví webu nesou dobové rytiny převedené do modré linky. U každé je zapsaný zdroj.
| Název | Autor | Rok | Licence | Kde se používá | Zdroj |
|---|---|---|---|---|---|
| Pohled na Prahu | Václav Hollar | 1649 | CC0 | homepage · brand manuál · 404 | Rijksmuseum RP-P-OB-116.274 |
| Brown University v Providence (Rhode Island) | autor neuveden (NYPL, Emmet Collection EM2349) | 1840 (datace NYPL) | volné dílo | školení AI · dotace na školení · EN training | Wikimedia Commons |
| Pohled na Haarlem a bělidla plátna a příze v Overveenu z vysokých dun | Jan Caspar Philips (lept) podle kresby Jana de Beijera, vydal Isaak Tirion | 1750 | CC0 | zavedení AI · EN adoption | Wikimedia Commons |
| Pevnost Königstein od západu (Vestung Königstein gegen Westen) | Merian (dílna Matthäa Meriana st.) | kolem 1650 | volné dílo | audit AI a jeho podstránky · disclosure | Wikimedia Commons |
| Jiný pohled na Palais Bourbon v Paříži (Autre vue du Palais Bourbon) | Jean-Baptiste Rigaud (rytec) podle předlohy Jacquese Rigauda | 18. století | CC0 | AI Act · pokuty · EN AI Act | Wikimedia Commons |
| Hvězdárna Stellaeburgum Johanna Hevelia na střechách Gdaňsku, Machinae coelestis | Izaak Saal (rytec), Andreas Stech (kresba), podle signatury v popisu souboru na Commons | 1673 | CC0 | studie · EN studies | Wikimedia Commons |
| Chomutov (Commotau), Topographia Bohemiae, Moraviae et Silesiae | Matthäus Merian st. (nakladatel a rytec dílny) | kolem 1650 | volné dílo | srovnání · EN comparisons | Wikimedia Commons |
| Praha od Vltavy: Petřín, Malá Strana a Hrad | Václav Hollar (lept), vydal Abraham Hogenberg, Kolín nad Rýnem | 1635 | CC0 | blog · články · štítky | Wikimedia Commons |
| Interiér Bodleian Library v Oxfordu | David Loggan (kresba a rytina) | 1675 | CC0 | odpovědi · kategorie · EN answers | Wikimedia Commons |
| Pohled na Prahu, levý díl (Hradčany a Malá Strana) | Václav Hollar | 1649 | CC0 | institut · zapsaný ústav · press · EN about | Wikimedia Commons |
| Bruslaři na ledě (list 4 ze série Figuren in landschappen) | Jan van de Velde II, vydavatel snad Hendrick Hondius I | 1627 nebo 1631 | CC0 | hry | Wikimedia Commons |
| Krajina s kočárem | Philips Koninck (připsáno; připsání Rembrandtovi muzeum zamítá) | 1629 až 1688 (datace muzea) | CC0 | newsletter · potvrzení odběru | Wikimedia Commons |
| Polná (Polna), Topographia Bohemiae, Moraviae et Silesiae | Matthäus Merian st. (nakladatel a rytec dílny) | kolem 1650 | volné dílo | souhlasy | Wikimedia Commons |
| Pohled na Greenwich (Graenwich), panorama s Temží | Václav Hollar (Wenceslaus Hollar) | 1637 | CC0 | hledání | Wikimedia Commons |
| Znojmo (Znaim), Topographia Bohemiae, Moraviae et Silesiae | Matthäus Merian st. (nakladatel a rytec dílny) | 1650 | volné dílo | poptávka · potvrzení odeslání | Wikimedia Commons |
| Brno, Civitates orbis terrarum (Theatri praecipuarum totius mundi urbium liber sextus) | Joris Hoefnagel, rytina Braun a Hogenberg | 1617 (výtisk BnF kolem 1635) | volné dílo | záhlaví podstránek bez vlastní rytiny · zásady ochrany dat · EN privacy | Wikimedia Commons |
| Krajina s domem na kopci (Landschap met een huis op een heuvel) | Václav Hollar (Wenceslaus Hollar) podle malby Jacquese d'Arthois, vydal Joannes Meyssens | 1651 | CC0 | checkup · NIS2 test · EN checkup | Wikimedia Commons |
.jpg){kind=link}
,_RP-P-1905-608.jpg){kind=link}
.jpg){kind=link}
,_RP-P-OB-116.273.jpg){kind=link}
,_RP-P-1898-A-20540.jpg){kind=link}
.jpg){kind=link}
,_RP-P-OB-103.734.jpg){kind=link}
.jpg){kind=link}
.jpg){kind=link}
,_RP-P-OB-11.315.jpg){kind=link}
Každá sekce webu má vlastní rytinu, vždy celou a bez ořezu. Jen díla volná k užití se zapsaným zdrojem.
02 Barvy
Paper je plocha, ink je důkaz, federal je akcent.
Modrá drží méně než 10 % plochy. Patří na tečku štítku, em v nadpisu, tlačítko a znak v hlavičce. Hover a tmavé plochy nese Navy.
| Token | Název | Hex | Užití |
|---|---|---|---|
--c-blue | Federal blue | #2A4BC0 | Primární akcent na světlé ploše: znak v hlavičce, tlačítka, em v nadpisech, focus ring. Hover stav je Navy. |
--c-navy | Navy | #0B1230 | Tmavé plochy (navy bloky, patička, tmavé záhlaví podstránky) a hover stav. Nikdy červená na Navy. |
--c-blue-l | Federal light | #FAF9F7 | Akcent na tmavé ploše, stejná hodnota jako White 2. Nikdy Federal blue na ink ani na Navy. |
--c-ink | Ink | #0A0A0C | Text, tmavé sekční bloky, důrazové pozadí. |
--c-bg | Paper 100 | #F2F0EE | Dominantní pozadí webu. |
--c-gray-m | Paper 200 | #E5E3E0 | Hrany, měkké plochy, tabulkové dělení. |
--c-paper3 | Paper 300 | #C8C4BF | Sekundární linky, meta text na tmavé, klidné oddělovače. |
--c-gray-l | Gray light | #ECEAE7 | Jemné výplně, hover pole, zadní vrstvy. |
--c-white2 | White 2 | #FAF9F7 | Světlé karty, světlý wordmark na tmavé, bílé tlačítko na Navy. |
--c-slate | Slate | #454B5E | Sekundární text na světlé ploše. |
--c-ledger | Ledger tag | #8A857E | Dekorativní prvky; drobný text používá --c-ledger-text (= Slate #454B5E). |
--c-cz-red | Národní proužek | #D7141A | Jen červený díl proužku .tri (bílá, červená, modrá) u značky a nad nadpisy. Nikdy na Navy, nikdy jako text, plocha ani akcent. |
Disciplína akcentu
Federal blue je vzácný a interakční, Navy nese tmavé plochy a hover, White 2 je jediný akcent na ink a Navy.
Poměr ploch
Paper je dominantní. Tmavé bloky jsou ploché Navy bez přechodu. Federal akcentuje pouze rozhodovací body.
Národní proužek
Tři dílky v pořadí bílá, červená, modrá stojí u značky a nad nadpisy. Červená je jen tady a nikdy se nedává na Navy.
| Pár | Hodnoty | Poměr | Stupeň |
|---|---|---|---|
| ink / paper | #0A0A0C na #F2F0EE | 17,40:1 | AAA |
| slate / paper | #454B5E na #F2F0EE | 7,63:1 | AAA |
| federal / paper | #2A4BC0 na #F2F0EE | 6,45:1 | AA |
| white2 / federal | #FAF9F7 na #2A4BC0 | 6,96:1 | AA |
| white2 / navy | #FAF9F7 na #0B1230 | 17,45:1 | AAA |
| white2 / ink | #FAF9F7 na #0A0A0C | 18,80:1 | AAA |
| federal / navy | #2A4BC0 na #0B1230 | 2,51:1 | pod AA · zakázáno |
| ledger / paper | #8A857E na #F2F0EE | 3,22:1 | pod AA · jen dekor |
Obrys trikolóry
Bílá třetina trikolóry má na světlém podkladu obrys 1 px v teplé šedé #C8C4BF (token --cz-outline). Na Navy se trikolóra nedává.
Sémantické stavy
Jedna sada ok/warn/crit/info nahrazuje tři nekompatibilní dvojice, které dnes žijí zvlášť v klientském portálu, týmové appce a `overit.html` (viz systémová diagnóza). Tónováno do stejné teploty jako Federal, žádná syrová signální barva.
| Token | Stav | Hex | Kontrast na paper | Užití |
|---|---|---|---|---|
--state-ok | OK | #1E7A4C | 4,68:1 · AA text | Splněno, ověřeno, aktivní stav. |
--state-warn | Warn | #B8860B | 2,86:1 · pod AA | Rozpracováno, čeká na akci. Jen jako vyplněná plocha (chip, ikona), nikdy jako text nebo tenká linka na paper. |
--state-crit | Crit | #B3261E | 5,75:1 · AA text | Kritický nález, blokující stav. |
--state-info | Info | #2A4BC0 (= --c-blue) | 6,45:1 · AA text | Neutrální informační stav, sdílí hex s Federal blue. |
Změřeno proti #F2F0EE (paper). --state-warn je jediný stav pod 3:1 · na paper ho nepoužívej pro text ani tenkou linku, jen pro plnou plochu chipu nebo ikony o dostatečné velikosti. Přiznáváme to tady místo abychom to tvrdili jinak.
Data-viz paleta
Kategorická řada pro skóre a finanční přehledy (klient, team) · odvozená z Federal rodiny plus dva zdrženlivé doplňkové odstíny, žádná syrová primární barva. Dnes v ekosystému neexistovala vůbec, cokoliv grafového vznikalo ad hoc.
| Token | Pořadí | Hex | Kontrast na paper |
|---|---|---|---|
--viz-1 | Viz 1 | #2A4BC0 (= --c-blue) | 6,45:1 |
--viz-2 | Viz 2 | #0B1230 (= --c-navy) | 16,16:1 |
--viz-3 | Viz 3 | #6B8F71 | 3,19:1 |
--viz-4 | Viz 4 | #8B6A2E | 4,4:1 |
--viz-5 | Viz 5 | #454B5E (= --c-slate) | 7,63:1 |
--viz-6 | Viz 6 | #8A857E (= ledger) | 3,22:1 |
Pořadí 1 → 6 je i pořadí čitelnosti. Sérii nikdy nekóduj barvou samotnou · vždy doplň přímý popisek nebo vzor výplně, ať graf funguje i pro barvoslepé čtenáře a v tisku.
03 Typografie
Aspekta mluví, RM měří, Newsreader podepisuje.
Aspekta 400, 500 a 600 sjednocuje nadpisy, odstavce i ovládání na všech stránkách, včetně odborných článků a právních dokumentů. RM 400 a 500 označuje krátká metadata, hodnoty a kód. Newsreader 400 patří pouze do wordmarku a patičky CIAD.
Nález, náprava, měření.
Opraveno a znovu změřeno.
Lead text vysvětluje pravidlo věcně a doložitelně. Em má font-style normal, na světlé ploše Federal blue, na Navy White 2 v 55 % krytí.
Body text má 16 px, line-height 1.5 a letter-spacing -.1px. Slouží pro metodiku, pravidla a vysvětlení bez marketingových superlativů.
MONO CAPTION · ROBOTO MONO 400/500 · UPPERCASE| Vrstva | Vzorec |
|---|---|
| Display | max(2rem, min(calc(2rem + .05*(100vw - 27.5rem)), 4.75rem)) · řádkování 1.08 · tracking -.02em · nejvýše 24ch |
| Display sm | max(1.75rem, min(calc(1.75rem + .034*(100vw - 27.5rem)), 3.25rem)) · řádkování 1.1 |
| Nadpis podstránky | max(2rem, min(calc(2rem + .05*(100vw - 27.5rem)), 4.25rem)) · kompaktní záhlaví jako Display sm |
| Lead | max(1.125rem, min(calc(1.125rem + .004*(100vw - 27.5rem)), 1.375rem)) · řádkování 1.35 · nejvýše 52ch |
| Perex podstránky | clamp(1.0625rem, 1rem + .25vw, 1.1875rem) · řádkování 1.5 |
| Body | 16px · line-height 1.5 · letter-spacing -.1px |
| Mono | max(.75rem, min(calc(.75rem + .002*(100vw - 27.5rem)), .875rem)) · verzálky |
| Footer wordmark | Newsreader 400 · min(18vw, 280px) · bílá na Navy |
Společná sazba dokumentových nadpisů
Dokumentové nadpisy používají Aspektu stejně jako články a stránky služeb. Rozdíl mezi rolí nadpisu, textu a metadat nese velikost a dostupný řez písma. Na světlé ploše používáme Federal blue, na tmavé White 2.
ASPEKTA 400 · DOKUMENTOVÝ NADPIS
Vznikli jsme z jednoho rozporu.
Tisková sazba
Web se dá vytisknout jako podklad pro schůzku nebo spis. Tisk se řídí vlastní @media print vrstvou.
- Pozadí a text
- Vynuceně bílá a černá, bez ohledu na paper/ink token · žádný barevný inkoust navíc.
- Skryté prvky
- Skip-link, pilulka hlavičky, burger, fullscreen menu, cookie lišta, sdílecí tlačítka, tlačítko nahoru a patička se v tisku nikdy nezobrazí. Na tomto manuálu se skrývá i hlavička celá.
- Hero a tmavé bloky
- Ztrácí výšku, zaoblení i pozadí · sbalí se na obyčejný textový blok, ať se netiskne prázdná černá plocha.
- Odhalované prvky
- Prvky odhalované při scrollu (
[data-reveal]) se v tisku vynuceně vrátí na opacity 1, ať se nevytiskne poloprůhledný text. - Odkazy
- V odborném textu se pod podtrženým odkazem vytiskne URL v závorce, ať se tištěný podklad dá dohledat i bez prokliku.
04 Mřížka a rytmus
Rytmus drží rám.
Sekční vzduch je větší než mezery uvnitř bloků. Proximity ukazuje vztah.
--pad48 · 32 @≤1024 · 24 @≤760 · 72 @≥1680
--frame12 desktop · 8 mobil
--r-block40 px
--r-card20 px
--r-btn12 px
TLTitulek + mono podtitulek
TRPilíře 01 · 02 · 03
top clamp(118px,15vh,170px)
top clamp(118px,15vh,170px)
BLLead text
BRCTA
střed dýcháElevace
Tři stupně, tónované do Ink, žádný čistý černý stín. Dřív buď none, nebo ad-hoc rgba per komponenta bez škály.
--elevation-10 8px 20px · 14% ink
--elevation-20 16px 40px · 18% ink
--elevation-30 28px 70px · 22% ink
Materiál a čitelnost
Navigace, tlačítka a pracovní panely mají neprůhledné pozadí. Text se neposuzuje proti proměnlivému podkladu. Rozmazání ani dekorativní sklo nepoužíváme.
SVĚTLÁ PLOCHAPaper a White2 · text Ink
TMAVÁ PLOCHANavy nebo Ink · text White 2
05 Komponenty
Komponenty jsou pravidla v živém kódu.
Ukázky níže jsou živé federal komponenty z src/components/federal/.
Chip + chip-dot
AUDITAI SYSTÉMY
NA TMAVÉNA TMAVÉ
Mono štítek verzálkami. Tečka je Federal blue, na Navy ploše bílá (White 2).
Notched CTA
Podklady jsou ke stažení hned níže. Stáhnout podklady nebo projít značku
Default je modré tlačítko .cta-btn, hover Navy. Light je textový odkaz se šipkou .cta-link. Obě se píšou v běžné větě. Invert je bílý štítek se zkoseným rohem a blobem na Navy ploše (.btn.btn--on-dark), píše se verzálkami, hover je Federal blue.
USP triptych
Federal
Autoritativní akcent, krátký důraz a primární plocha triptychu.
Ink
Důkazní sekce, technická jistota a vysoký kontrast.
Paper
Analytická karta se znakovou ikonou ve Federal blue.
Notch polygon 100% 90% / 90.5% 100%. Světlá karta nese federal ikonu i index.
NewsCard
Světlá varianta pro analytický obsah a delší perex.
ČÍST ČLÁNEKFederal varianta pro důležitý signál a krátkou zprávu.
ČÍST ČLÁNEKInk varianta pro výstupy s vyšší váhou.
ČÍST ČLÁNEKNews notch je 56 px. Variace light, blue a dark mají shodnou strukturu metadat.
LedgerRow
- / AUDITVstupní audit Snapshot/ AUDITNA POPTÁVKU
- / AUDITAI a LLM systémy/ AUDITNA POPTÁVKU
- / ŠKOLENÍŠkolení týmu/ ŠKOLENÍNA POPTÁVKU
Jednořádkový název služby doplňuje mono typ bez dalšího ornamentu.
StatCard
15studií s daty
6podkladů zdarma
0vazeb na dodavatele
Jedno číslo a krátký popisek pod ním, tři karty v řadě. Na mobilu se skládají pod sebe.
Footer wordmark
Stejná třída jako reálná patička: Newsreader 400, bílá na Navy, velikost min(18vw, 280px).
PageHero světlý a tmavý
PAGE HERO
Světlý hero
Světlá varianta pro metodické a právní stránky.
PAGE HERO
Tmavý hero
Tmavá varianta pro silný první signál, plochý Navy blok.
Světlé záhlaví je bílá deska v rámu s národním proužkem a modrým štítkem. Tmavé je plochý Navy blok bez proužku, štítek nese bílý čtvereček. Nadpis je Display, em je modře, na Navy bílé na 55 %. Plné záhlaví nese ve spodním pásu rytinu, kompaktní ji nemá. Zdroj každé rytiny je v tabulce Rytiny v kapitole 01.
Formuláře a zpětná vazba
Zadejte platnou e-mailovou adresu.
Hlas značkyOdesílání…
Uloženo. Změny jsou připravené.
Chyba je propojená s polem pomocí aria-describedby. Při validaci přejde fokus na první chybu. U nativního POSTu se zobrazí stavová zpráva a tlačítko zůstává dostupné i po zastavení navigace. U požadavků přes fetch lze tlačítko do odpovědi dočasně zneaktivnit.
Fotografie a vizuální podklady
Přednost mají skuteční lidé, prostředí a práce CIAD. Ke každé fotografii evidujte autora, oprávnění, účel, alternativní text a hlavní bod ořezu. Bez doloženého oprávnění fotografii nepoužívejte.
V aktuálním webovém balíku nejsou doložené fotografie školení ani týmu. Používá proto původní znak a datové grafy. Doplnění vyžaduje vlastní fotografie nebo licenci.
Chyba patří ke konkrétnímu poli. Průběh odesílání popisuje text; potvrzení říká, co se stalo.
Stavy komponent
Pět stavů, které musí mít každá interaktivní komponenta (tlačítko, odkaz, pole, volba). Zkuste Tab na téhle stránce · focus ring je stejný modrý obrys všude.
| Stav | Co se mění | Kde v kódu |
|---|---|---|
| Default | Klidový vzhled, plný kontrast textu i hranic. | .cta-btn, .nis2-choice span |
| Hover | Modré tlačítko přechází na Navy za 160 ms, textový odkaz na Navy a šipka se posune o 4 px, bílé tlačítko na Navy přechází na Federal blue. | .cta-btn:hover, .cta-link:hover |
| Focus-visible | 2 px modrý outline s 3 px odsazením, nikdy neskrytý. | :focus-visible v federal.css |
| Active / stisk | Scale 0.97 hned na pointer-down (Apple „Response"). | .cta-btn:active |
| Disabled | Opacity 0.45, cursor: not-allowed, mimo tab pořadí. | [disabled] |
Loading / Empty / Error
Tři stavy, které se v návrzích nejčastěji vynechávají. Federal je řeší takhle:
LOADING
Kostra kopíruje tvar finálního obsahu (řádek nadpisu + dva řádky textu). Kruhový spinner se nepoužívá. Shimmer respektuje prefers-reduced-motion · bez animace zůstává statická plná kostra.
EMPTY
„Srovnání zatím nejsou zveřejněna."
Prázdný stav vysvětlí, co chybí, a nabídne dostupný další krok. Živý příklad: /srovnani/.
ERROR
„Odeslání se nepodařilo dokončit. Zkontrolujte vyplněné údaje a zkuste to znovu."
Chyba pojmenuje doložený problém a další krok, nikdy jen „Něco se pokazilo". Živý příklad: /poptavka/chyba/.
06 Pohyb
Pohyb vysvětluje změnu. Obsah zůstává čitelný.
Obsah je hotový a čitelný bez skriptu i bez animace. Pohyb přidává jen posun, linku nebo kresbu a při omezeném pohybu stojí.
--dur-fast.16s · rychlá odezva (stisk, zaměření)
--dur-base.24s · výchozí přechod
--dur-slow.4s (= --dur-btn) · barevná plocha
--ease-1cubic-bezier(.16,1,.3,1)
--ease-btncubic-bezier(.25,1,.5,1)
--ease-inoutcubic-bezier(.76,0,.24,1)
ScrollNativní chování prohlížeče
| Animace | Hodnota |
|---|---|
| Obsah při načtení | Viditelný okamžitě. Bez preloaderu a bez čekání na animaci, skript jen přidává třídy a detaily. |
| Nástup sekcí (homepage) | Sekce se posune o 1 rem nahoru za 800 ms, sousedé po 90 ms (nejvýš pátý v dávce) · mění se jen poloha, průhlednost ne. |
| Proužek postupu čtení (homepage) | Vodorovná linka 2 px ve Federal blue na horním okraji okna, délku nese poloha scrollu. |
| Čísla v pásech dat (homepage) | Napřed 260 ms náhodné číslice stejné délky, pak doběhnutí k hodnotě za 900 ms · bez pohybu zůstane rovnou konečná hodnota. |
| Sken rytiny (hero homepage) | Rytina města se prochází rámečky a skenovací linkou, ke každé památce se dopíše štítek · běží jen v zorném poli a na stránce v popředí. |
| Národní proužek | Nad nadpisy homepage se dokreslí zleva, až nadpis vjede do okna · v hlavičce se po najetí na značku tři dílky vlnou nadzvednou o 3 px za 500 ms. |
| Patička | Wordmark CIAD se při vjezdu do okna rozevře z užšího prostrkání (-.04em → .02em) za 1,6 s a vyjede z průhlednosti za 1,2 s · CSS přechod. |
| Tlačítko nahoru | Objeví se po 1,6 obrazovky scrollu · kroužek kolem šipky ukazuje, kolik je přečteno · přechod 400 ms. |
| Klidový pohyb kreseb | Kříž v ikoně karty a čtvereček ve štítku nadpisu se samy pohnou a vrátí přesně do výchozí polohy · smyčka 9 až 11 s · dělicí linky výpisů a odpovědí, linka citace a základna grafu se jednou prokreslí akcentem a rozplynou (1,6 s) · na homepage ikony karet (paprsky, šestiúhelníky, puls po křivce) běží smyčkou 2,8 až 4,8 s · vše jen v zorném poli. |
| Běžné rozhraní | Hover a focus 160 ms · změna stavu 240 ms · barevná plocha 400 ms · stisk tlačítka scale .97. |
| Scrollování | Nativní chování prohlížeče, plynulé skákání na kotvu jen bez omezeného pohybu · kotva nezajede pod pevnou hlavičku. Bez automatického běžícího textu a sledování kurzoru. |
| Omezený pohyb | Nástup, proužek postupu, počítání čísel, sken, smyčky kreseb i rozevření wordmarku stojí. Obsah a ovládání zůstávají. |
Z-index mapa
Vrstvy mají jméno tam, kde je token nasazený. Tři vrstvy drží číslo přímo v CSS a tabulka to přiznává.
| Token | Hodnota | Vrstva |
|---|---|---|
--z-hero-bg | 1 | Rám tmavého záhlaví (plochá navy deska) |
--z-hero-content | 2 | Titulek, lead, CTA |
| literál | 11 | Proužek postupu čtení (homepage) |
| literál | 12 | Tlačítko nahoru |
--z-menu-overlay | 40 | Fullscreen menu |
--z-nav | 50 | Fixní hlavička webu |
| literál | 90 | Cookie lišta |
--z-skip-link | 300 | Skip-to-content, vždy navrch |
1 · Obsah je hotový bez pohybu Nic se předem neschovává. Skript přidává třídu a posun, průhlednost obsahu se nemění, takže je všechno vidět i při selhání skriptu.
2 · Bez animační knihovny Pohyb je CSS přechod, CSS animace a IntersectionObserver. Manuál ani homepage nenačítají GSAP a scroll se nepřipíná.
3 · Křivka bez překmitu Výchozí je --ease cubic-bezier(.16,1,.3,1): rychlý nástup a měkké dosednutí. Tlačítka drží --ease-btn, šipky --ease-inout.
4 · Omezený pohyb bez degradace Při prefers-reduced-motion: reduce stojí nástup, proužek postupu, počítání čísel, sken, smyčky kreseb i rozevření wordmarku. Obsah a ovládání zůstávají beze změny.
5 · Kresba se hýbe, obsah ne Kříž v ikoně karty a čtvereček ve štítku se občas krátce pohnou a skončí přesně ve výchozí poloze. Dělicí linky výpisů a linka citace se jednou prokreslí. Bez hoveru a kurzoru. Text, tlačítka a navigace stojí vždy.
07 Hlas značky
Čeština, důkaz, konkrétní odpovědnost.
Primární komunikace vede přes školení, coaching a AI Act. Audity dokazují, že učíme jen to, co si sami ověřujeme.
- Poměr
- 70 % školení · coaching · AI Act, 30 % bezpečnostní audity.
- Přední dveře
- Školení je první vstup do značky na hlavní stránce i v primární komunikaci.
- Důkazní základ
- Audity podpírají slib: „Učíme jen to, co si sami ověřujeme.“
Dobře
Článek 4 se od 2. února 2025 vztahuje na poskytovatele a nasazovatele AI systémů. Program přizpůsobíme rolím, systémům a kontextu použití.
Učíme jen to, co si sami ověřujeme.
Opraveno a znovu změřeno.
Výstup obsahuje nález, důkaz, dopad, vlastníka a ověřenou nápravu.
Špatně
Odemkneme revoluční potenciál AI bez hranic.
Nejlepší AI audit na trhu.
Garance bez uvedeného testu.
Newsreader použitý jako běžný nadpis.
- Jazyk
- Čeština. Krátké věty. Přesné pojmy.
- Labely
- Mono, uppercase, bez ornamentu.
- Separátor
- Používej znak · místo typografických pomlček.
- Tým
- Veřejně komunikuje jen ředitel.
Pravidla pro češtinu
Sazba se řídí českou typografickou normou. Platí na webu i ve výstupech pro klienty.
- Pomlčky
- Dlouhá (em-dash) a střední (en-dash) pomlčka jsou zakázané všude, i v alt textu a komentářích copy. Místo nich krátká spojovací pomlčka (-) nebo znak ·.
- Uvozovky
- Typografické české „dole a nahoře“, nikdy rovné anglické " ". Apostrof se sází typograficky jako ’ (U+2019).
- Nezlomitelná mezera
- Před jednopísmennými předložkami a spojkami (k, s, v, z, a, i, o, u) a v číslech (297 52 736, 2. 7. 2026), ať se neocitnou osamocené na konci řádku.
- Data
- Celé slovní vyjádření v běžném textu („2. července 2026“), číselný tvar jen v tabulkách a metadatech (2026-07-02 v
datetime, 2. 7. 2026 viditelně). - Desetinná čísla
- Desetinná čárka (17,4:1). Výjimkou jsou kódové hodnoty a poměry stran v komentářích, kde zůstává anglický zápis s tečkou.
- Zkratky a jednotky
- IČO, DIČ, z. ú. s nezlomitelnou mezerou za tečkou. Jednotky (72 h, 90 dnů) oddělené nezlomitelnou mezerou od čísla.
- Velká písmena
- Institucionální název „Český Institut pro AI a Data“ má velké I a D vždy · viz kapitola 01 Značka. Nadpisy a labely nejsou CAPS LOCK v prozaickém textu, jen v mono štítcích.
08 Ekosystém
Jedna federal značka napříč všemi plochami.
Pravidla platí pro team.ciad.cz, vstupní brány news, intel a obce, blog, subdomény i interní nástroje.
Federal typografie
- Sans
- Aspekta
- Mono
- RM / RobotoMono
- Wordmark
- Newsreader 400
- Zakázáno
- Geist, JetBrains Mono a všechny další rodiny.
Plochy a témata
- Interní panely
- Světlý režim používá Paper a Ink. Tmavý režim týmu používá Federal navy #0B1230; klientský portál má vlastní tmavé plochy. Každé téma definuje povrch, text, akcent a kontrastní stavy.
- ciad.cz (tento web)
- Paper je výchozí světlá plocha bez přepínače tématu. Navy zde nese obsah (patička, kontaktní panely, tmavé sekce) · token vrstva --c-bg/--c-ink dnes nerozlišuje povrch od textu, takže plošný toggle by rozbil právě tyto tmavé bloky. Bez rozporu: manuál tvrdí jen to, co tato plocha reálně dělá.
- Vstupní brány
- Mohou být ink-dark, ale výhradně z federal tokenů.
- Živý vzor
- team.ciad.cz · federal reskin 7/2026
| Role | Hex | Užití |
|---|---|---|
| Federal blue | #2A4BC0 | Primární akcent. |
| Navy | #0B1230 | Tmavé plochy a hover. |
| Paper 100 | #F2F0EE | Výchozí světlá plocha. |
| White 2 | #FAF9F7 | Světlé karty a vložené plochy. |
| Ink | #0A0A0C | Text a tmavý peer. |
| Crit | #B3261E | Pouze blokující a chybový stav na světlé ploše; na tmavé --state-crit-dark #FFB4AB. |
- Kanonický zdroj
tokens.cssapalette.json. Paleta se na jednotlivých plochách nevymýšlí znovu.- Jediná výjimka
- Stavové barvy OK, Warn, Crit a Info jsou jediná odchylka od palety. Slouží jen pro stav, nikdy jako dekor.
09 Správa a ověření
Značka je release s vlastníkem a důkazem.
Každá změna musí aktualizovat manuál, asset, token, manifest a interní Knihovnu ve stejném releasu. Bez výjimky a bez tichého přepsání souboru.
Jedna změna, jeden důvod
Popiš problém, dotčené plochy a proč jej stávající token nebo komponenta neřeší.
Kontrast, obsah, zařízení
Desktop 1440, notebook 1024, mobil 390, klávesnice, reduced motion, světlo i dark.
Asset + token + manifest
Nová verze, datum a SHA-256. Existující vydaný soubor se nikdy nenahrazuje pod stejným názvem.
Web + Team + Knihovna
ciad.cz/brand je veřejný kanon. Team ukazuje stejnou verzi a stejné odkazy.
| Gate | Musí platit | Důkaz |
|---|---|---|
| Identita | Geometrie, ochranná zóna a minimální velikost beze změny. | SVG + screenshot QA |
| Přístupnost | Textový kontrast nejméně AA; fokus a reduced-motion jsou plnohodnotné. | automat + keyboard pass |
| Obsah | Česky, konkrétně, bez nedoložených superlativů a bez falešných garancí. | copy review |
| Implementace | Barvy a rozměry se čtou jen z tokenů. | source scan |
| Distribuce | Web, Team Knihovna a SharePoint rozcestník ukazují stejnou verzi. | manifest 2.6.0 |
- Kanonický URL
- ciad.cz/brand/
- Strojový kontrakt
- manifest.json · verze + SHA-256
- Odpovědnost
- CIAD schvaluje major/minor změnu. Dodavatel smí opravit patch jen s doloženým QA.
- Rollback
- Předchozí verze zůstává dohledatelná; návrat nikdy nepřepisuje historii ani checksum.
10 Ke stažení
Assety jsou veřejné, pravidla jsou stejná jako v manuálu.
Vektor je zdroj, PNG je export. Manifest 2.6.0 drží verzi a SHA-256; Team Knihovna odkazuje sem jako na jediný kanon.
BRAND MANUÁL · PDFCelý manuál v jednom souboru
Všech deset kapitol pro tisk, přílohu smlouvy nebo předání dodavateli. Sazba odpovídá tiskové vrstvě webu.
LOGO PACK · ZIPVšech 9 variant značkyLockup, znak a wordmark ve federal, ink a paper. Vektor plus PNG ve třech šířkách.
Matice značky
Tři podoby značky ve třech barevných variantách. Náhled se vykresluje na ploše, pro kterou je varianta určená · přepínačem si ověříte i chování na opačném podkladu.
Lockup Federal
#2A4BC0Primární varianta. Na paper, white2 a jiné světlé ploše.
Lockup Ink
#0A0A0CMonochrom pro tisk, razítka a jednobarevné podklady.
Lockup Paper
#F2F0EEVýhradně na ink a jinou tmavou plochu. Nikdy na světlou.
Znak Federal
#2A4BC0Primární varianta. Na paper, white2 a jiné světlé ploše.
Znak Ink
#0A0A0CMonochrom pro tisk, razítka a jednobarevné podklady.
Znak Paper
#F2F0EEVýhradně na ink a jinou tmavou plochu. Nikdy na světlou.
Wordmark Federal
#2A4BC0Primární varianta. Na paper, white2 a jiné světlé ploše.
Wordmark Ink
#0A0A0CMonochrom pro tisk, razítka a jednobarevné podklady.
Wordmark Paper
#F2F0EEVýhradně na ink a jinou tmavou plochu. Nikdy na světlou.
Balíčky
Když dodavatel potřebuje jen jednu barevnou řadu, poslat celý pack je zbytečné.
Kompletní packVšech 9 variant ve vektoru i bitmapě · 37 souborů.ZIP · 0,9 MBJen FederalLockup, znak a wordmark v primární modré.ZIP · SVG + 3× PNGJen InkMonochromatická sada pro tisk a jednobarevný podklad.ZIP · SVG + 3× PNGJen PaperSvětlá sada pro tmavé plochy a inverzní použití.ZIP · SVG + 3× PNG
Implementace a typografie
Tokeny a fonty jsou součástí značky. Barvu ani rodinu nepřepisujte lokálně.
tokens.cssČisté :root tokeny pro implementaci.palette.jsonPaleta v názvu, hexu a užití.manifest.jsonVerze, kanonický zdroj, média a SHA-256 kontrolní součty.README.mdRychlý implementační handoff pro interní tým a dodavatele.Aspekta 400Self hosted sans. Řezy 400, 500 a 600 leží v /fonts/.NewsreaderPouze wordmark. Jediný řez 400.RM 400Mono pro labely, meta a kódové hodnoty.OFL AspektaLicenční text k Aspekta.OFL NewsreaderLicenční text k Newsreader.
Kontrola integrity
Manifest nese SHA-256 každého vydaného souboru. Stažený asset si ověřte proti němu.
shasum -a 256 ciad-logo-pack.zip
curl -s https://ciad.cz/brand/manifest.json