Vývoj a rozvoj design systému dia.gov.cz
# Digitální produkt
Digitální informační agentura
2026
Komponentová knihovna, kterou používají weby a portály české státní správy. Vyvíjíme jádro design systému gov.cz ve Stencilu s oficiálními balíčky pro React, Vue, Angular i čisté HTML, včetně automatizovaného testování přístupnosti nad každou komponentou.
41
komponent v jádru knihovny
4
frameworky (React, Vue, Angular, vanilla)
143
testovacích souborů
Veřejný upstream
na code.gov.cz, se kterým knihovnu průběžně synchronizujeme
Jeden zdroj pravdy
pro weby státní správy
Design systém je infrastruktura. Nepoužívá ho jeden web, ale desítky nezávislých projektů, které vznikají v různých týmech, v různých technologiích a v různém čase. Když se v knihovně změní chování tlačítka, projeví se to všude.
To určuje způsob práce. Každá komponenta musí mít stabilní veřejné API, protože konzumenti aktualizují verze podle svého vlastního plánu, ne podle našeho. Každá změna musí být zpětně kompatibilní nebo jasně označená jako breaking. A každá regrese je násobená počtem projektů, které knihovnu používají.
Rozvíjíme systém ve veřejném repozitáři a synchronizujeme jej s upstreamem na code.gov.cz. Změny tedy nejsou interní záležitostí dodavatele, ale veřejně čitelnou historií.
Web Components:
jeden kód, čtyři frameworky
Státní správa nemá jednotný technologický stack. Jeden portál běží na Angularu, druhý na Reactu, třetí je server-side renderovaná šablona bez frontendového frameworku. Knihovna, která by podporovala jen jeden z nich, by byla použitelná pro zlomek projektů.
Jádro proto stavíme jako standardní Web Components ve Stencilu. Z jednoho zdrojového kódu generujeme oficiální obaly pro React, Vue a Angular, plus balíček pro použití v čistém HTML. Chování komponenty je tak definované na jednom místě, obaly řeší jen integraci s daným frameworkem.
Přínos je praktický. Když opravíme chybu ve validaci formuláře, opravíme ji pro všechny čtyři cílové platformy současně. Bez tohoto uspořádání by stejná oprava vznikala čtyřikrát a čtyřikrát rozdílně.
Přístupnost testujeme,
ne slibujeme
Weby veřejné správy mají povinnost být přístupné. Design systém je místo, kde se tato povinnost dá vyřešit systémově: pokud je komponenta přístupná v knihovně, je přístupná v každém projektu, který ji použije.
Ke každé komponentě proto patří vlastní testovací sada přístupnosti, která ji prochází nástrojem axe. Testy běží automaticky v CI a známé výjimky jsou vedené v evidenci, ne skryté vypnutým pravidlem. Vedle přístupnosti kontrolujeme vizuální regresi, takže změna stylu, kterou nikdo nezamýšlel, se ukáže v pull requestu a ne v produkci.
Celkem knihovnu pokrývá 143 testovacích souborů. Playwright je spouští v osmi konfiguracích: čtyři ukázkové aplikace (vanilla, React, Vue, Angular) v Chromiu, navíc Firefox, WebKit, mobilní viewport a Storybook. Komponenta je tedy ověřená v každém frameworku, prohlížeči a rozlišení z jedné sady testů.
Co o naší práci
řekl klient
„S týmem Cognito jsme už měli pozitivní zkušenost ze spolupráce na webu DIA. Projekt Design systém gov.cz byl však složitější, protože ho tým převzal rozpracovaný po předchozím dodavateli, což nebývá technicky i organizačně snadné. Převzetí však proběhlo hladce. Na týmu oceňuji komplexní a proaktivní komunikaci, kvalitní řízení a schopnost koordinovat vývoj, UX/UI design i provoz. Komponenty splňují standardy přístupnosti WCAG, což je pro státní instituce povinné. Spolupráci hodnotíme jako profesionální a spolehlivou.“
Jak jsme
postupovali
Od návrhu komponent a design tokenů po publikované balíčky, dokumentaci a provoz knihovny, ze které staví weby státní správy.
Návrh API komponent a design tokenů
Definice veřejného rozhraní každé komponenty a tokenů, ze kterých vychází vzhled celého systému.
Jádro ve Web Components a frameworkové balíčky
Implementace komponent ve Stencilu a generování oficiálních obalů pro React, Vue a Angular z jednoho zdroje.
Testovací infrastruktura
Sady pro přístupnost nad každou komponentou, vizuální regrese a e2e testy napříč čtyřmi frameworky, třemi prohlížeči a mobilním rozlišením.
Dokumentace, distribuce a provoz
Dokumentační web, Storybook, publikace balíčků do npm, ověření instalace ze strany konzumenta a nasazení na Kubernetes.
