Tento seznam si dělám pro vlastní potřebu, ale protože by se mohl hodit někomu dalšímu, publikuji ho i zde. Vkládám si osobní poznámky a subjektivní hodnocení, tak se nelekejte, že to někdy neodpovídá objektivnímu hodnocení.
Firemní design systémy (velké tech firmy)
Tyto systémy vznikly pro interní potřeby velkých firem, ale jsou open-source a skvěle zdokumentované.
⭐⭐⭐⭐⭐ Ty nejkomplexnější
| Systém | Firma | URL | Dostupné |
|---|---|---|---|
| Material Design 3 | m3.material.io | 🎨 ⚛️ 💚 🅰️ 📱 | |
| Fluent 2 | Microsoft | fluent2.microsoft.design | 🎨 ⚛️ 📱 |
| Primer | GitHub | primer.style | 🎨 ⚛️ |
| Pajamas | GitLab | design.gitlab.com | 🎨 ⚛️ 💚 |
| Carbon | IBM | carbondesignsystem.com | 🎨 ⚛️ 💚 🅰️ |
Material Design 3 – Nejrozšířenější design systém na světě. Nová verze přináší „Material You“ s dynamickými barvami. Extrémně detailní dokumentace, guidelines pro všechny platformy. Ideální jako reference i pro vlastní systémy.
Fluent 2 – Microsoft přepracoval Fluent pro cross-platform použití. Silný v enterprise aplikacích, Office-like estetika. Dobrá volba pro B2B produkty.
Primer – GitHub’s design system. Čistý, minimalistický, zaměřený na developer tools. Výborná dokumentace přístupnosti.
Pajamas – GitLab má jeden z nejlépe zdokumentovaných open-source design systémů. Obsahuje i guidelines pro UX writing a research.
Carbon – IBM’s systém pro enterprise. Komplexní, ale může být „těžký“ pro menší projekty. Skvělý pro dashboardy a data-heavy aplikace.
⭐⭐⭐⭐ Velmi kvalitní
| Systém | Firma | URL | Dostupné |
|---|---|---|---|
| Polaris | Shopify | polaris.shopify.com | 🎨 ⚛️ |
| Spectrum | Adobe | spectrum.adobe.com | 🎨 ⚛️ |
| Orbit | Kiwi.com | orbit.kiwi | 🎨 ⚛️ |
| Acorn | Mozilla/Firefox | acorn.firefox.com | 🎨 |
| Lightning | Salesforce | lightningdesignsystem.com | 🎨 ⚛️ |
| Atlassian Design | Atlassian | atlassian.design | 🎨 ⚛️ |
Polaris – Systém od Shopify zaměřený na e-commerce rozhraní. Praktické patterny pro formuláře, tabulky, navigaci.
Spectrum – Adobe design system. Elegantní, kreativní estetika. Dobrý pro produkty zaměřené na design/kreativu.
Orbit – Český Kiwi.com vytvořil jeden z nejlepších travel/booking design systémů. Výborná práce s ilustracemi a micro-interakcemi.
Lightning – Salesforce standard pro CRM aplikace. Enterprise-focused, robustní.
⭐⭐⭐ Solidní
| Systém | Firma | URL | Dostupné |
|---|---|---|---|
| Base Web | Uber | baseweb.design | ⚛️ |
| Garden | Zendesk | garden.zendesk.com | 🎨 ⚛️ |
| Vibe | Monday.com | style.monday.com | 🎨 ⚛️ |
| Backpack | Skyscanner | skyscanner.design | 🎨 ⚛️ |
| Gestalt | gestalt.pinterest.systems | 🎨 ⚛️ | |
| Ring UI | JetBrains | jetbrains.github.io/ring-ui | ⚛️ |
| Flamingo | Ataccama | flamingo.ataccama.com | 🎨 |
| Pluralsight DS | Pluralsight | design-system.pluralsight.com | 🎨 |
Vládní design systémy
| Systém | Země | URL |
|---|---|---|
| GOV.CZ | Česko | designsystem.gov.cz |
| GOV.UK | UK | design-system.service.gov.uk |
| USWDS | USA | designsystem.digital.gov |
GOV.UK ovlivnil design systémy po celém světě. Zaměření na přístupnost a čitelnost.
Open-source komunitní
Tyto systémy nejsou vázané na konkrétní firmu a jsou primárně určené pro vývojáře.
⭐⭐⭐⭐⭐ shadcn/ui
| URL | ui.shadcn.com |
| Stack | React + Radix UI + Tailwind CSS |
| Přístup | Copy-paste (ne npm balíček) |
Místo instalace npm balíčku si zkopírujete zdrojový kód komponent přímo do projektu. Máte 100% kontrolu, žádný boj s frameworkem.
Pro koho: Vývojáři používající Tailwind, kteří chtějí plnou kontrolu nad kódem.
Nevýhody: Musíte sami udržovat komponenty, vyžaduje znalost Tailwind.
Headless / Unstyled
Tyto knihovny řeší logiku a přístupnost, styling je na vás.
| Knihovna | URL | Popis |
|---|---|---|
| Radix UI | radix-ui.com | Základ pro shadcn/ui. Unstyled, accessible primitives. |
| Headless UI | headlessui.com | Od Tailwind Labs. React + Vue. |
| React Aria | react-spectrum.adobe.com/react-aria | Od Adobe. Nejvíc zaměřený na accessibility. |
| Ark UI | ark-ui.com | Headless komponenty pro React, Vue, Solid. |
Kdy použít: Když máte vlastní design a potřebujete jen funkční základ s accessibility.
Hotové knihovny
| Knihovna | URL | Stack | Poznámka |
|---|---|---|---|
| Chakra UI | chakra-ui.com | React | Accessibility-first, snadné theming |
| Mantine | mantine.dev | React | 100+ komponent, hooks, forms |
| Ant Design | ant.design | React | Enterprise-grade, od Alibaby |
| MUI (Material UI) | mui.com | React | Implementace Material Design |
| NextUI | nextui.org | React | Moderní, postavený na Tailwind |
| DaisyUI | daisyui.com | Tailwind plugin | Komponenty jako Tailwind třídy |
| PrimeReact/Vue | primereact.org | React/Vue | 90+ komponent, themes |
CSS Frameworky
| Framework | URL | Poznámka |
|---|---|---|
| Tailwind CSS | tailwindcss.com | Utility-first, de facto standard |
| Bootstrap 5 | getbootstrap.com | Klasika, stále relevantní |
| Bulma | bulma.io | Čistý CSS, bez JS |
| Open Props | open-props.style | CSS custom properties |
Podle použití
Pro SaaS / Admin dashboardy
- Ant Design – enterprise-ready, data tables, forms
- Carbon (IBM) – komplexní, data visualization
- Mantine – moderní, rychlý vývoj
Pro e-commerce
- Polaris (Shopify) – optimalizované pro obchody
- Orbit (Kiwi) – booking/travel patterns
Pro rychlý prototyping
- shadcn/ui – copy-paste, rychlé úpravy
- Chakra UI – intuitivní API
- DaisyUI – Tailwind komponenty
Pro maximální customizaci
- Radix UI – unstyled primitives
- Headless UI – od Tailwind Labs
- React Aria – Adobe, top accessibility
Pro startupy (rychlost + kvalita)
- shadcn/ui + Tailwind – flexibilita
- NextUI – moderní look
- Mantine – batteries included
Zdroje a nástroje
Kolekce design systémů
- designsystemsrepo.com – Rozsáhlá databáze
- designsystems.com/open-design-systems – Figma kity
- open-ui.org/design-systems – W3C projekt
Nástroje pro tvorbu vlastního DS
- Figma – Design + prototyping
- Storybook – Dokumentace komponent
- Chromatic – Visual testing
- Style Dictionary – Design tokens
Vzdělávání
- Design Systems 101 – Nielsen Norman Group
- Video Design Systems Video – Rozhovor o budování DS
Tip: Začněte s existujícím systémem a upravujte. Budování design systému from scratch má smysl až pro větší týmy a produkty.