Přeskočit na obsah
WattBox

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-ink text a plné prvky 19,11 / 14,60 limit 4,5
  • --ds-muted tlumený 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-hair dekorativní separátor — / — limit výjimka
  • --ds-good verdikt: sem chcete 4,96 / 8,84 limit 4,5
  • --ds-over verdikt: překročená hranice 4,69 / 5,23 limit 4,5
  • --ds-bike identita: svět elektrokol 5,48 / 8,21 limit 4,5
  • --ds-news identita: 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.

  • --ds-display-lg h1 landingu Kilometr stojí 0,75 Kč
  • --ds-display-md h2 sekce Kolik nabíjení stojí
  • --ds-display-sm h3, titulek karty Nabíjení doma
  • --ds-numeral číslo v datech 14,47
  • --ds-lede perex pod nadpisem Vážený průměr cen veřejného nabíjení napříč devíti operátory.
  • (1rem) běžný text Doma je nabíjení nejlevnější — s EV tarifem platíte v nízkém tarifu zlomek ceny veřejné stanice.
  • --ds-text-xs eyebrow, popisky os 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ánky

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

Aktualizováno měsíčně S ikonou Nejlevnější Dražší než benzín Elektrokolo Novinky

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

Kč za kilometr · ukázka

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,9012,9015,90
PRE · Start 9,0012,0014,00
E.ON · E.ON Drive 9,509,5013,00
MOL · Registrovaný 8,3013,0014,00
Reálné ceníky z operator-tariffs.ts v tarifní hladině indexu. Zeleně pod tržním průměrem, červeně nad cenou benzínu (15,45 Kč/kWh). Na mobilu zkuste odscrollovat vpravo — popisek řádku zůstane viditelný.

CardGrid a RouteList

Karty pro rovnocenné cíle napříč tématy, seznam pro cíle uvnitř jednoho tématu.

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

Rozdíl mezi AC a DC nabíjením Když chcete do hloubky AC vs. DC nabíjení: v čem se liší a kdy použít které

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.

Zatím tu nic není

Uložené stanice najdete na jedno klepnutí, ať jste kdekoliv.

Prohlédnout mapu

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

S ikonou vpravo

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.

Novinky o nástrojích a funkcích
Každé pondělí ráno

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

77 kWh
15 000 km

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

Nejvýš dvakrát měsíčně.
Jaký pohon hledáte?

Vyberte jednu možnost.

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.

Potvrzení

Smazat uloženou trasu?

Trasu Praha — Brno odstraníme z profilu. Akci nelze vrátit.

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.

Načítá se…
Načítá se…

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á? metodika

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.

  1. v3.2.26

    Živý stav ČEZ přesunut na Vercel cron, stale guard obsazenosti.

  2. v3.2.25

    Homepage slideshow: plynulé animace textů.

  3. 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ěď.

Proč je FAQ otevřené a ne skládací?

Otevřený seznam jde prohledat Ctrl+F, kopíruje se a nevyžaduje kliknutí navíc. Otázka je navíc nadpis, takže patří do osnovy stránky.

Kdy použít Notice a kdy EmptyState?

Notice komentuje obsah, který na stránce je. EmptyState nahrazuje obsah, který tam není.

Kdy CardGrid a kdy RouteList?

CardGrid pro rovnocenné cíle napříč tématy (nástroje na homepage). RouteList pro cíle uvnitř jednoho tématu, kde jde o rychlé skenování.

Ještě jste si nespočítali úspory?

Vyzkoušet kalkulačku

Vyhledávání

Začněte psát pro vyhledávání...

↑↓ pro navigaci, Enter pro výběr

Opravdu?

Tuto akci nelze vzít zpět.

Přihlášení, bezpečnost, základní funkce webu.
Anonymní statistiky návštěvnosti (Umami, Vercel Analytics).
Affiliate odkazy a konverzní měření. Zatím nepoužíváme.

Nová verze je připravena