Deformace
CIAD federal
brand manual
Pravidla značky pro web, auditní výstupy, školení a interní materiály. Testy, ne sliby. Opraveno, ne jen nalezeno.
Logo, tokeny, přístupnost, motion, hlas, e-mail a interní panely jsou verzované jako jeden systém.
Otevřít release pravidla ↓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.
Lockup = mark + CIAD v Newsreader 400, uppercase, tracking .06em, optický posun translateY(.09em), mezera přibližně 18 % výšky marku. Wordmark barvy: Federal 900 na světlé, white2 nebo blue-l na tmavé.
Stíny
Jiné barvy
Rotace
Outline verze
Newsreader v běžném textu
Paper je plocha, ink je důkaz, federal je akcent.
Modrá drží méně než 10 % plochy. Patří na chip doty, em, CTA blob a hover stav.
| Token | Název | Hex | Užití |
|---|---|---|---|
--c-blue | Federal 900 | #1E3A8A | Primární akcent na světlé ploše, znak v headeru, autoritativní plochy. |
--c-blue2 | Federal 700 | #3B62D1 | Em akcenty, CTA blob, focus ring, hover stav. |
--c-blue-l | Federal light | #AFC2F2 | Akcenty na tmavé ploše. Nikdy Federal 700 na ink. |
--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é, CTA invert. |
--c-slate | Slate | #454B5E | Sekundární text na světlé ploše. |
ledger tagy | Ledger tag | #97928B | Mono meta, štítky ledgeru, tiché poznámky. |
Disciplína akcentu
Federal 900 je vzácný, Federal 700 je interakční, blue-l je jediný modrý akcent na ink ploše.
Poměr ploch
Paper je dominantní. Ink tvoří sekční bloky. Federal akcentuje pouze rozhodovací body.
Hero pečeť
Statický kruh + linka, stejný glyf jako brand mark v hlavičce, 5% bílá na tmavém přechodu. Žádný canvas, žádný requestAnimationFrame, nula CPU navíc oproti dřívější animované mlze.
| Pár | Hodnoty | Poměr | Stupeň |
|---|---|---|---|
| ink / paper | #0A0A0C na #F2F0EE | 17,4:1 | AAA |
| federal900 / paper | #1E3A8A na #F2F0EE | 9,1:1 | AAA |
| blue-l / ink | #AFC2F2 na #0A0A0C | 11,1:1 | AAA |
| white2 / ink | #FAF9F7 na #0A0A0C | 18,8:1 | AAA |
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 | #3B62D1 (= --c-blue2) | 4,79:1 · AA text | Neutrální informační stav, sdílí hex s Federal 700. |
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 | #3B62D1 (= --c-blue2) | 4,79:1 |
--viz-2 | Viz 2 | #1E3A8A (= --c-blue) | 9,1: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 | #97928B (= ledger) | 2,72: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.
Aspekta mluví, RM měří, Newsreader podepisuje.
Newsreader 400 patří do wordmarku, obří patičky, vybraného display nebo em akcentu - a nově do dokumentových rolí: nadpisů dlouhého odborného textu (blog, odpovědi, srovnání) a číslovaných článků právních stránek. Nikdy do běžného odstavce ani UI labelu.
Lead text vysvětluje pravidlo věcně a doložitelně. Em má font-style normal, na světlé ploše Federal 700, na tmavé blue-l.
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 |
|---|---|
| Hero display | max(3.125rem, min(calc(3.125rem + .066*(100vw - 27.5rem)), 7.5rem)) |
| Display | max(1.625rem, min(calc(1.625rem + .05*(100vw - 27.5rem)), 4.75rem)) |
| Display sm | max(1.625rem, min(calc(1.625rem + .05*(100vw - 27.5rem)), 4rem)) |
| Lead | max(1.25rem, min(calc(1.25rem + .004*(100vw - 27.5rem)), 1.5rem)) |
| Body | 16px · line-height 1.5 · letter-spacing -.1px |
| Mono | max(.75rem, min(calc(.75rem + .002*(100vw - 27.5rem)), .875rem)) |
| Marquee | max(3rem, min(calc(3rem + .075*(100vw - 27.5rem)), 8rem)) |
| Footer wordmark | min(28vw, 420px) · 34vw mobil |
Newsreader v dokumentové roli
Jediný existující řez je 400 - žádný bold, žádná italika. Velikost nese váhu nadpisu místo tučnosti, em zůstává barevný akcent ve stejném řezu, nikdy syntetická kurzíva.
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, ne jen vypnutím barev.
- Pozadí a text
- Vynuceně bílá a černá, bez ohledu na paper/ink token · žádný barevný inkoust navíc.
- Skryté prvky
- Preloader, hero pečeť, grain, fullscreen menu, cookie lišta, sdílecí tlačítka a progress bar článku se v tisku nikdy nezobrazí.
- 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.
- Mid-animace
- Cokoli, co GSAP mohl zastihnout v poloprůhledném stavu (character-fill, reveal), se v tisku vynuceně vrátí na opacity 1.
- 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.
Rytmus drží rám, ne dekorace.
Sekční vzduch je větší než mezery uvnitř bloků. Proximity ukazuje vztah.
top clamp(118px,15vh,170px)
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.
Materiál / sklo
Jeden token --blur: 16px nahrazuje tři dřív natvrdo psané hodnoty (12 / 16 / 20 px) pro tentýž efekt napříč navigací a CTA. Fallback pro prefers-reduced-transparency je povinný všude, kde se sklo použije.
Komponenty jsou pravidla v živém kódu.
Ukázky níže renderují federal komponenty z src/components/federal/, ne obrázky.
Chip + chip-dot
Mono labely uppercase, dot je Federal 700 nebo blue-l na tmavé ploše.
Notched CTA
btn_label notch 14 px, blob Federal 700 s bílou šipkou, hover inverze a magnetic offset pro pointer:fine.
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 900.
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
PageHero světlý a tmavý
Světlý hero
Světlá varianta pro metodické a právní stránky.
Tmavý hero
Tmavá varianta pro silný první signál a canvas plochu.
Preloader
Statický náhled marku, counteru 000 → 100 a progress baru. Reduced motion preloader přeskočí.
Footer wordmark
Stejná třída jako reálná patička. Desktop min(28vw, 420px), mobil 34vw.
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. | .btn_label, .nis2-choice span |
| Hover | Fill přechází na Federal 700, šipka se posune, jen pointer: fine. | .btn:hover .btn_label |
| Focus-visible | 2 px modrý outline s 3 px odsazením, nikdy neskrytý. | :focus-visible v federal.css |
| Active / stisk | Scale 0.97 na pointer-down, ne až na release (Apple „Response"). | .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:
Kostra kopíruje tvar finálního obsahu (řádek nadpisu + dva řádky textu), ne generický kruhový spinner. Shimmer respektuje prefers-reduced-motion · bez animace zůstává statická plná kostra.
„0 srovnání zveřejněno. Nepublikujeme číslo bez zdroje a data."
Prázdný stav je positioning v akci, ne omluva. Živý příklad: /srovnani/.
„Poptávku se nepodařilo odeslat. Zkontrolujte prosím, že je vyplněné jméno a platný e-mail."
Chyba pojmenuje pravděpodobnou příčinu a další krok, nikdy jen „Něco se pokazilo". Živý příklad: /poptavka/chyba/.
Motion dokazuje stav, nesmí překrývat obsah.
Všechny SplitText inicializace běží až po document.fonts.ready. Reduced motion je plný fallback.
| Animace | Hodnota |
|---|---|
| Hero intro | frame clip-path inset(46% 46% 46% 46% round 120px) → inset(0% 0% 0% 0% round 20px) · 1.7s · expo.inOut |
| SplitText lines | y 110 → 0 · .8s · power3.out · stagger .05 · až po document.fonts.ready |
| Kapitoly | desktop pointer:fine · char-fill opacity .35 → 1 · scrub při vstupu · bez fade-out ve viewportu |
| Marquee | xPercent -50 loop · velocity skew clamp ±8 · v*.35 · quickTo .5s |
| Count-up | data-count · once · 1.4s power2.out |
| Footer wordmark | SplitText chars mask · yPercent 55 → 0 · stagger .07 |
| USP reveal | clip-path reveal · power3.out · stagger .15 · stejný počet vrcholů |
| Header hide | scroll down start top −420 · transform mimo viewport |
Z-index mapa
Pojmenovaná vrstva nahrazuje magická čísla (0/1/2/3/5/40/50/90/200/300) roztroušená po komponentách. Hodnoty beze změny, jen s jménem.
| Token | Hodnota | Vrstva |
|---|---|---|
--z-hero-bg | 1 | Statická pečeť v pozadí hero |
--z-hero-content | 2 | Titulek, lead, CTA |
--z-chapters | 3 | Scroll kapitoly (home) |
--z-chapters-head | 5 | Sticky hlavička kapitol |
--z-menu-overlay | 40 | Fullscreen menu |
--z-nav | 50 | Fixní hlavička webu |
--z-cookie | 90 | Cookie lišta |
--z-preloader | 200 | Preloader |
--z-skip-link | 300 | Skip-to-content, vždy navrch |
1 · Čitelnost ve viewportu Text neztrácí opacitu, dokud je ve viewportu a čte se. Scroll-scrubbed fade-out smí běžet jen na desktopu s pointer: fine a začíná až při skutečném odchodu obsahu z viewportu.
2 · Mobil bez pinu Mobil nemá pinované scroll sekvence ani char-scrub pod opacity 1. Kapitoly zůstávají statické a entrance reveal se spustí jednou s once: true.
3 · Entrance bez overshootu Vstup používá power3.out bez překmitu. Overshoot patří jen k gestu, které má vlastní moment.
4 · Reduced motion bez degradace Větev zobrazuje plnohodnotný obsah s opacity 1 a transform none. Nic neskrývá ani neomezuje.
Č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, ne jen nalezeno.
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 ředitel, ne širší tým.
Pravidla pro češtinu
Sazba se řídí českou typografickou normou, ne anglickými defaulty prohlížeče. 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 je jednoduchá typografická ' , ne strojový ' přímo z klávesnice.
- 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
- Čárka, ne tečka (17,4:1, ne 17.4:1) - výjimka jsou kódové hodnoty a poměry stran v komentářích, kde zůstává anglický zápis.
- 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.
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
- Display a em
- Newsreader
- Zakázáno
- Geist, JetBrains Mono a všechny další rodiny.
Plochy a témata
- Interní panely
- team.ciad.cz přepíná paper/ink přes atribut
data-theme, klientský portál stejnou dvojici barev přes třídu.dark· dva neslučitelné mechanismy pro tentýž slib, sjednocení na jeden kontrakt běží. - ciad.cz (tento web)
- Paper je jediné přepnutelné téma. Ink zde nese obsah (patička, kontaktní panely, tmavé sekce), ne uživatelský přepínač · token vrstva --c-bg/--c-ink dnes nerozlišuje povrch od textu, takže plošný toggle by rozbil právě tyto ink 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 900 | #1E3A8A | Primární akcent. |
| Federal 700 | #3B62D1 | Hover a em akcent. |
| Paper 100 | #F2F0EE | Výchozí světlá plocha. |
| White 2 | #FAF9F7 | Světlé karty a vložené plochy. |
| Ink | #0A0A0C | Text a tmavý peer. |
| Signal light | #B3401F | Pouze blocked a error stav na světlé ploše. |
| Signal dark | #E8552C | Pouze blocked a error stav na tmavé ploše. |
- Kanonický zdroj
tokens.cssapalette.json. Paleta se na jednotlivých plochách nevymýšlí znovu.- Jediná výjimka
- Signální barva je povolená jen pro blocked a error stavy interních nástrojů: #B3401F na light a #E8552C na dark.
Značka není PDF. Je to 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 odkazy, ne ručně udržovanou kopii.
| 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 z tokenů, ne z nových ad-hoc hodnot. | source scan |
| Distribuce | Web, Team Knihovna a SharePoint rozcestník ukazují stejnou verzi. | manifest 2.1.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.
Assety jsou veřejné, pravidla jsou stejná jako v manuálu.
Vektor je zdroj, PNG je export. Manifest 2.1.0 drží verzi a SHA-256; Team Knihovna odkazuje sem jako na jediný kanon.
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
#1E3A8APrimá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
#1E3A8APrimá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
#1E3A8APrimá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é.
Implementace a typografie
Tokeny a fonty jsou součástí značky, ne doplněk. Barvu ani rodinu nepřepisujte lokálně.
Kontrola integrity
Manifest nese SHA-256 každého vydaného souboru. Stažený asset si ověřte proti němu, ne proti názvu.
shasum -a 256 ciad-logo-pack.zip
curl -s https://ciad.cz/brand/manifest.json