BRAND MANUAL

CIAD federal
brand manual

Pravidla značky pro web, auditní výstupy, školení a interní materiály. Testy, ne sliby. Opraveno, ne jen nalezeno.

Verze
Federal 2.1.0
Rozsah
10 kapitol
Vydáno
22 · 08 · 2026
CANONICAL RELEASE · 2.1.0Jedna značka. Jeden zdroj. Žádné tiché přepisování.

Logo, tokeny, přístupnost, motion, hlas, e-mail a interní panely jsou verzované jako jeden systém.

Otevřít release pravidla ↓
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

PRŮMĚR · 88 JEDNOTEKHORIZONT · X 2 → 98STŘED · 50 / 50

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 900 na světlé, white2 nebo blue-l na tmavé.

Deformace

Stíny

Jiné barvy

Rotace

Outline verze

Auditní text

Newsreader v běžném textu

02 BARVY

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.

TokenNázevHexUžití
--c-blueFederal 900#1E3A8APrimární akcent na světlé ploše, znak v headeru, autoritativní plochy.
--c-blue2Federal 700#3B62D1Em akcenty, CTA blob, focus ring, hover stav.
--c-blue-lFederal light#AFC2F2Akcenty na tmavé ploše. Nikdy Federal 700 na ink.
--c-inkInk#0A0A0CText, tmavé sekční bloky, důrazové pozadí.
--c-bgPaper 100#F2F0EEDominantní pozadí webu.
--c-gray-mPaper 200#E5E3E0Hrany, měkké plochy, tabulkové dělení.
--c-paper3Paper 300#C8C4BFSekundární linky, meta text na tmavé, klidné oddělovače.
--c-gray-lGray light#ECEAE7Jemné výplně, hover pole, zadní vrstvy.
--c-white2White 2#FAF9F7Světlé karty, světlý wordmark na tmavé, CTA invert.
--c-slateSlate#454B5ESekundární text na světlé ploše.
ledger tagyLedger tag#97928BMono 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árHodnotyPoměrStupeň
ink / paper#0A0A0C na #F2F0EE17,4:1AAA
federal900 / paper#1E3A8A na #F2F0EE9,1:1AAA
blue-l / ink#AFC2F2 na #0A0A0C11,1:1AAA
white2 / ink#FAF9F7 na #0A0A0C18,8:1AAA

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.

TokenStavHexKontrast na paperUžití
--state-okOK#1E7A4C4,68:1 · AA textSplněno, ověřeno, aktivní stav.
--state-warnWarn#B8860B2,86:1 · pod AARozpracováno, čeká na akci. Jen jako vyplněná plocha (chip, ikona), nikdy jako text nebo tenká linka na paper.
--state-critCrit#B3261E5,75:1 · AA textKritický nález, blokující stav.
--state-infoInfo#3B62D1 (= --c-blue2)4,79:1 · AA textNeutrá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.

TokenPořadíHexKontrast na paper
--viz-1Viz 1#3B62D1 (= --c-blue2)4,79:1
--viz-2Viz 2#1E3A8A (= --c-blue)9,1:1
--viz-3Viz 3#6B8F713,19:1
--viz-4Viz 4#8B6A2E4,4:1
--viz-5Viz 5#454B5E (= --c-slate)7,63:1
--viz-6Viz 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.

03 TYPOGRAFIE

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.

Testy, ne sliby.
Opraveno, ne jen nalezeno.

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
VrstvaVzorec
Hero displaymax(3.125rem, min(calc(3.125rem + .066*(100vw - 27.5rem)), 7.5rem))
Displaymax(1.625rem, min(calc(1.625rem + .05*(100vw - 27.5rem)), 4.75rem))
Display smmax(1.625rem, min(calc(1.625rem + .05*(100vw - 27.5rem)), 4rem))
Leadmax(1.25rem, min(calc(1.25rem + .004*(100vw - 27.5rem)), 1.5rem))
Body16px · line-height 1.5 · letter-spacing -.1px
Monomax(.75rem, min(calc(.75rem + .002*(100vw - 27.5rem)), .875rem))
Marqueemax(3rem, min(calc(3rem + .075*(100vw - 27.5rem)), 8rem))
Footer wordmarkmin(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.

FEDERAL-PROSE H2 · SUBPAGE-COPY H2

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.
04 GRID & RYTMUS

Rytmus drží rám, ne dekorace.

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)
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 / 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.

SKLObackdrop-filter: blur(16px) saturate(1.6)
REDUCED-TRANSPARENCYPlný white2 fill, bez blur
05 KOMPONENTY

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

AUDITAI SYSTÉMY
NA TMAVÉNA TMAVÉ

Mono labely uppercase, dot je Federal 700 nebo blue-l na tmavé ploše.

USP triptych

01

Federal

Autoritativní akcent, krátký důraz a primární plocha triptychu.

02

Ink

Důkazní sekce, technická jistota a vysoký kontrast.

03

Paper

Analytická karta se znakovou ikonou ve Federal 900.

Notch polygon 100% 90% / 90.5% 100%. Světlá karta nese federal ikonu i index.

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

6auditorů
×3verifikace
0vazeb na dodavatele

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 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.

StavCo se měníKde v kódu
DefaultKlidový vzhled, plný kontrast textu i hranic..btn_label, .nis2-choice span
HoverFill přechází na Federal 700, šipka se posune, jen pointer: fine..btn:hover .btn_label
Focus-visible2 px modrý outline s 3 px odsazením, nikdy neskrytý.:focus-visible v federal.css
Active / stiskScale 0.97 na pointer-down, ne až na release (Apple „Response")..btn:active
DisabledOpacity 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), ne generický kruhový spinner. Shimmer respektuje prefers-reduced-motion · bez animace zůstává statická plná kostra.

EMPTY

„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/.

ERROR

„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/.

06 MOTION

Motion dokazuje stav, nesmí překrývat obsah.

Všechny SplitText inicializace běží až po document.fonts.ready. Reduced motion je plný fallback.

--dur-fast.25s · rychlá odezva (stisk, zaměření)
--dur-base.4s · výchozí přechod
--dur-slow.6s (= --dur-btn) · fill, barevná plocha
--ease-1cubic-bezier(.16,1,.3,1)
--ease-btncubic-bezier(.25,1,.5,1)
--ease-inoutcubic-bezier(.76,0,.24,1)
Lenislerp .1 · duration 1.2 · anchors true
AnimaceHodnota
Hero introframe clip-path inset(46% 46% 46% 46% round 120px) → inset(0% 0% 0% 0% round 20px) · 1.7s · expo.inOut
SplitText linesy 110 → 0 · .8s · power3.out · stagger .05 · až po document.fonts.ready
Kapitolydesktop pointer:fine · char-fill opacity .35 → 1 · scrub při vstupu · bez fade-out ve viewportu
MarqueexPercent -50 loop · velocity skew clamp ±8 · v*.35 · quickTo .5s
Count-updata-count · once · 1.4s power2.out
Footer wordmarkSplitText chars mask · yPercent 55 → 0 · stagger .07
USP revealclip-path reveal · power3.out · stagger .15 · stejný počet vrcholů
Header hidescroll 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.

TokenHodnotaVrstva
--z-hero-bg1Statická pečeť v pozadí hero
--z-hero-content2Titulek, lead, CTA
--z-chapters3Scroll kapitoly (home)
--z-chapters-head5Sticky hlavička kapitol
--z-menu-overlay40Fullscreen menu
--z-nav50Fixní hlavička webu
--z-cookie90Cookie lišta
--z-preloader200Preloader
--z-skip-link300Skip-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.

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, 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.
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
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
RoleHexUžití
Federal 900#1E3A8APrimární akcent.
Federal 700#3B62D1Hover a em akcent.
Paper 100#F2F0EEVýchozí světlá plocha.
White 2#FAF9F7Světlé karty a vložené plochy.
Ink#0A0A0CText a tmavý peer.
Signal light#B3401FPouze blocked a error stav na světlé ploše.
Signal dark#E8552CPouze blocked a error stav na tmavé ploše.
Kanonický zdroj
tokens.css a palette.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.
09 GOVERNANCE & QA

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.

01 · NAVRHNI

Jedna změna, jeden důvod

Popiš problém, dotčené plochy a proč jej stávající token nebo komponenta neřeší.

02 · OVĚŘ

Kontrast, obsah, zařízení

Desktop 1440, notebook 1024, mobil 390, klávesnice, reduced motion, světlo i dark.

03 · VERZUJ

Asset + token + manifest

Nová verze, datum a SHA-256. Existující vydaný soubor se nikdy nenahrazuje pod stejným názvem.

04 · SYNCHRONIZUJ

Web + Team + Knihovna

ciad.cz/brand je veřejný kanon. Team ukazuje stejnou verzi a odkazy, ne ručně udržovanou kopii.

GateMusí platitDůkaz
IdentitaGeometrie, ochranná zóna a minimální velikost beze změny.SVG + screenshot QA
PřístupnostTextový 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
ImplementaceBarvy a rozměry se čtou z tokenů, ne z nových ad-hoc hodnot.source scan
DistribuceWeb, 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.
10 ASSETS

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.

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.

PODKLAD NÁHLEDU

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