Design systém · návrh
Galerie komponent
Všech 31 prvků systému na jedné stránce. Vzorky renderují skutečné hodnoty tokenů, ne jejich popisky — galerie, která ukazuje něco jiného než systém, je horší než žádná.
Barevné role
Barvy mají tři role: neutrální nese strukturu a text, verdikt hodnotí, identita říká, v jakém světě jste. Neutrální role jsou jeden odstín v různé síle — záměr, ne chudoba palety.
-
--ds-inktext a plné prvky 19,11 / 14,60 limit 4,5 -
--ds-mutedtlumený text, popisky 5,54 / 5,98 limit 4,5 -
--ds-rulečára nesoucí data (osa, práh, hlavička tabulky) 3,13 / 3,63 limit 3 -
--ds-hairdekorativní separátor — / — limit výjimka -
--ds-goodverdikt: sem chcete 4,96 / 8,84 limit 4,5 -
--ds-oververdikt: překročená hranice 4,69 / 5,23 limit 4,5 -
--ds-bikeidentita: svět elektrokol 5,48 / 8,21 limit 4,5 -
--ds-newsidentita: rubrika Novinky 8,11 / 5,16 limit 4,5
Typografická škála
Hierarchii nese velikost. Display váha je jednotná 650 na celém webu.
- Kilometr stojí 0,75 Kč
- Kolik nabíjení stojí
- Nabíjení doma
- 14,47
- Vážený průměr cen veřejného nabíjení napříč devíti operátory.
- Doma je nabíjení nejlevnější — s EV tarifem platíte v nízkém tarifu zlomek ceny veřejné stanice.
- Index cen nabíjení · červenec 2026
SectionHead
Nejopakovanější vzor na webu. Dnes ho každá stránka píše po svém — jednou je „vše“ pod nadpisem, jinde vpravo, jinde jako tlačítko.
S eyebrow a odkazem
Nové články
Všechny článkyPerex je nepovinný a drží úzkou míru řádku.
Chip
Výchozí je neutrální. Barevný jen s verdiktem nebo identitou rubriky. Dnes je tenhle markup zkopírovaný ve 27 stránkách — a vždy zeleně.
ScaleAxis
Signatura systému. Hodnoty na společném měřítku, volitelně s prahem, který některé překročí. Škála začíná na nule a nesmí se „přiblížit“.
StatGrid
Referenční data, ne hlavní sdělení. Vlásková mřížka místo karet se stínem.
- Doma
- 4,24 Kč/kWh 0,75 Kč/km
- AC
- 9,25 Kč/kWh 1,63 Kč/km
- DC
- 11,81 Kč/kWh 2,08 Kč/km
- UFC
- 14,47 Kč/kWh 2,55 Kč/km
DataTable
Největší díra v dnešní sadě — široká tabulka je na 33 stránkách. Na mobilu drží první sloupec a pravá hrana má scroll stín.
| Operátor a tarif | AC Kč/kWh | DC Kč/kWh | UFC Kč/kWh |
|---|---|---|---|
| ČEZ · Basic | 9,90 | 12,90 | 15,90 |
| PRE · Start | 9,00 | 12,00 | 14,00 |
| E.ON · E.ON Drive | 9,50 | 9,50 | 13,00 |
| MOL · Registrovaný | 8,30 | 13,00 | 14,00 |
CardGrid a RouteList
Karty pro rovnocenné cíle napříč tématy, seznam pro cíle uvnitř jednoho tématu.
ArticleGrid
Všechny článkyTitulek dostává display řez a nejvíc místa — je to jediné, podle čeho se čtenář rozhoduje. Perex se nezobrazuje, v mřížce se stejně nedočte.
ArticleBreak
Celoplošný předěl mezi sekcemi. Používá cover článku, ne komunitní fotku — a tím přestává být dekorací a stává se interním prolinkem.
LeadNotes a Notice
Textové vzory pro výklad a upozornění.
Editorial popisek. Tučný náběh s tečkou a text pokračuje inline — ušetří svislý prostor proti dvojici nadpis + odstavec.
Kdy to nepoužít. Když na bod někdo odkazuje kotvou nebo patří do obsahu stránky, musí to být skutečný nadpis.
EmptyState
Na veřejné části dnes chybí úplně — 20 stránek si píše vlastní šedou větu bez východiska.
Button
Nejpoužívanější prvek webu: 117 souborů a 499 zápisů ve 45 podobách — z toho 9 vzniklo jen přeházeným pořadím tříd. Varianta nese TVAR, tón nese verdikt; výchozí plné tlačítko je proto inkoustové, ne zelené.
Dvě velikosti, ale nevybírají se podle zařízení. md je výchozí pro samostatné akce a formuláře, sm pro hustý kontext
— lištu, řádek tabulky, akci vedle nadpisu. Obě drží dotykový cíl 44 px; mění se
jen typografie a boční vnitřek. Zmenšovat tlačítka na mobilu je proti smyslu, palcem se
trefuje hůř než myší (DaisyUI to má obráceně a web si to na 19 místech ručně záplatuje).
Podle zařízení se řídí jediná věc — šířka. Na to je block="mobile":
pod 40 rem plná šířka, nad ní obsahová. Zmenši okno pod 640 px a uvidíš to na tlačítku
níž.
IconButton
Není to varianta Buttonu, ale jiná odpovědnost: aria-label je tu JEDINÝ zdroj přístupného názvu, ne doplněk. Proto je popisek povinný — tlačítko bez názvu je pro odečítačku prázdné kolečko.
DaisyUI btn-circle je na webu ve 45 souborech a v pěti různých zápisech téhož, protože pořadí tříd nikdo nehlídá. Ikona má 20 px, ale plocha 44 — menší velikost
zmenšuje jen kresbu, ne dosah.
Switch
Zapnuto nebo vypnuto — a platí to hned. Není to totéž co zaškrtávátko: to znamená „vybráno“ a potvrdí se odesláním. Je to rozdíl ve slibu, který prvek dává, ne ve vzhledu.
Pod tím je nativní input type="checkbox" s role="switch", takže
odečítačka hlásí „přepínač, zapnuto". Vypnutá kolejnice používá
--ds-rule: při jemnějším odstínu vycházel kontrast 1,65:1 a vypnutý přepínač
byl prakticky neviditelný. Zapnuto je verdikt, proto zelená.
Segmented
Vyber právě jedno z několika. Web měl tentýž vzor ve třech nezávislých podobách — lištička nad grafem, filtrační pilulky a přepínač území — a lišily se jen tím, kdo je zrovna psal. Tvar je proto varianta, ne jiná komponenta.
Stav nese aria-pressed, ne třída — a výhradně on. Když se stylovalo i na
.active, zůstala třída z vykreslení viset na původní volbě a svítily dvě naráz.
Není to role="tab" schválně: záložky slibují ovládání šipkami, které by musel doplnit
každý volající zvlášť. Slíbená afordance, která nefunguje, je horší než žádná.
Range a PresetGroup
Kalkulačkové ovládání. Posuvník si NEKRESLÍ vlastní styl — sahá na kanonické třídy z global.css, které CLAUDE.md zakazuje kopírovat. Řeší jen to, co centralizované nebylo: kostru, popiskový řádek a napojení výplně.
Zelená u vybraného presetu neporušuje pravidlo 2 — neříká „tahle možnost je nejlepší",
ale „tuhle jste zvolili". To je stav ovládacího prvku, ne verdikt. Prvek je navíc radiogroup s aria-checked a šipkami: dnešní implementace používá button a stav
drží třídou, takže odečítačka nemá jak sdělit, že jde o výběr jedné z možností.
Formulářová rodina
Vstupy jsou v 55 souborech, popisky v 38 — DS vrstva neexistovala žádná. Povinnost říká slovo uvnitř popisku, ne hvězdička: odečítačka pak přečte „E-mail povinné“, ne interpunkci.
Použijeme jen k potvrzení.
Zadejte číslo ve tvaru +420 123 456 789.
Modal a Drawer
Dialog se dnes otevírá na 32 místech a pokaždé se k němu dopisuje totéž. Fokus se neuvězňuje ručně — showModal() označí zbytek dokumentu za inertní, past je hotová na úrovni prohlížeče.
Náhled panelu dialogu
Potvrzení
Smazat uloženou trasu?
Trasu Praha — Brno odstraníme z profilu. Akci nelze vrátit.
Filtr nabíječek
Panel vyjíždí zprava na desktopu a zespoda na mobilu.
Skeleton
31 souborů dnes ukazuje točící se kolečko uprostřed prázdna. Obrys obsahu říká, co se načítá — a u rychlého načtení je lepší nic než záblesk.
Disclosure
26 souborů používá DaisyUI collapse. Postaveno na details/summary, takže funguje bez JS. FaqList je naopak záměrně otevřený — skládat se má jen to, co čtenář nehledá.
Jak se index počítá?
Vážený průměr veřejně platných ceníků, váha podle počtu aktivních stanic operátora.
Proč ne skutečné transakce?
Ta data v Česku žádný operátor nesdílí.
Pagination
Existovalo jen v adminu. Aktuální stránka nese aria-current, předchozí a další jsou odkazy, ne tlačítka.
Timeline
Changelogy a průvodci. Sémanticky ol, protože pořadí nese význam.
-
v3.2.26
Živý stav ČEZ přesunut na Vercel cron, stale guard obsazenosti.
-
v3.2.25
Homepage slideshow: plynulé animace textů.
-
v3.2.18
Jednotné horní odsazení všech veřejných stránek.
FaqList
Otevřené, ne skládací. Na pillar stránce je FAQ hlavní SEO obsah a čtenář hledá jednu odpověď.