Návrhy měřidla proti design systému e-manažer

Předmět: obrazovky v canvasu „Založení měřidla“, stránky v7 (finální, tokeny systému), v6 (detail s levým panelem, sbalený panel, nové měřidlo) a v5 (formulář podle médií).

Měřítko: design systém e-manažer (Claude Design, artefakt 94vFHirA9HbeNVadRkeCY2) — project/README.md, tokens.json a karty komponent Badge, Table, SubNav, PageHeader, SectionHeader, InputField, MetricItem, DangerZone. Systém sám vznikl z Figmy e-manažer UI (✅ Approved) a má vlastní otevřené body (kontrast bílého textu na brand-500, barva hvězdičky, texty 11–13,5 px ve Figmě).

1. Co sedí

• Barvy značky (brand-500 #F05A24, brand-600 #D44518, brand-50 #FFF7ED) i neutrály slate odpovídají tokenům; oranžová je jen na jednom primárním tlačítku, aktivní záložce a aktivním řádku panelu.
• Písmo Inter, plátno 1440 px, navigace 80 px, obsah 1216 px, ovládací prvky 36 px, mezera mezi kartami 24 px.
• Skladba stránky HeaderNavigation → hlavička → karty na bg-page; sekce formuláře mají ikonu v poli 36 px na brand-50 (SectionHeader).
• Karty jsou ploché (jen rámeček), primární tlačítko má shadow-xs-skeuomorphic.
• Čeština: infinitivy v tlačítkách, metadata oddělená tečkou, čísla s mezerou po tisících a desetinnou čárkou, jednotka za číslem, bez emoji.

2. Odchylky — tokeny

#	Kde	Návrh dnes	Design systém	Oprava
T1	Celé obrazovky	Texty 11, 13, 17 a 22 px (přes 250 výskytů), řádkování 14 a 17 px	Škála 12 / 14 / 16 / 18 / 20 / 24 / 30 px	Popisky polí a řádky panelu na 12 a 14 px, název objektu v panelu 16 px (text-md-semibold), nadpis stránky 24 px (display-xs)
T2	Karta formuláře, dlaždice	Radius 14, 10 a 7 px	radius-lg 12 (karty), radius-md 8 (tlačítka, inputy), radius-sm 6 (badge), radius-xs 4	Nahradit tokeny
T3	Rámeček inputu	#E5E7EB	border-primary #CBD5E1	Nahradit
T4	Badge „Hlavní“	#EFF6FF + text #2563EB	blue-50 + rámeček blue-200 + text blue-700 #1D4ED8	Nahradit
T5	Badge „Dálkový“, „+ přičíst“	text #166534	success-700 #15803D	Nahradit
T6	Pill „Režim úprav“, upozornění	Amber #FFFBEB / #FDE68A / #92400E / #D97706	warning-50 #FEFCE8, warning-200 #FEF08A, warning-700 #A16207	Nahradit — systém má žlutou, ne jantarovou
T7	Fokus pole	Prstenec #FDE5DB	brand-ring #FFEDD5 (focus-ring-brand)	Nahradit
T8	Hvězdička povinného pole	brand-500 oranžová	required-mark #FF383C	Nahradit (systém drží červenou)
T9	Ikony médií	Vlastní kresba a barvy	Ikony jsou ve Figmě (energy, flame, heat, drop)	Hotovo 17. 9.: vyexportováno z Figmy přes REST API, doplněno do design systému jako skupina assetů Media a použito ve v7. Barvy: elektřina #D97706, plyn #EA580C, teplo #E11D48, voda #0284C7. Palivo, PHM a KVP ve Figmě ikonu nemají — zůstávají lineární.
T10	Ikony obecně	16 px, tah 1,5–1,6	Untitled UI Icons 20 px, tah 1,67	Sjednotit velikost a tah

3. Odchylky — komponenty

#	Kde	Návrh dnes	Design systém	Oprava
K1	Formulář detailu	Mřížka 3 sloupce, mezera 20 px	Mřížka 4 sloupců, mezera 16 px	Viz rozhodnutí R1 níže
K2	Tabulka měřených parametrů	Řádek i hlavička 44 px, koeficient vlevo	Hlavička 40 px na bg-subtle, řádek 64 px, čísla vpravo, první sloupec strong	Přepsat na Table
K3	Záložky karty měřidla	Pruh gray-100 s oranžovou aktivní položkou (kříženec)	Pro detail Tabs type="brand"; SubNav (bílá aktivní se stínem) je pro nastavení klienta	Použít Tabs
K4	Badge stavu	Bez rámečku a bez tečky	Stav = odstín 50 + rámeček 200 + text 700 a tečka; kategorie bez tečky	Doplnit rámeček; tečku jen u stavů
K5	Režim úprav	Pill jen nad formulářem	Badge „Režim úprav · N neuložených změn“ nahoře i dole	Doplnit dolní pill a počet změn
K6	Nevratné akce	Archivace a smazání jen v menu akcí	DangerZone na konci detailu, mazání nepatří do hlavičky	Doplnit blok na konec detailu
K7	Výběr odběratele a objektu	Rozbalovací pole	Combobox nad registrem, ARES jako druhá skupina	Překreslit jako Combobox
K8	Levý panel měřidel	Vlastní kresba (300 px, skupiny, filtr, sbalení)	V systému žádná taková komponenta není	Viz rozhodnutí R2
K9	Ukazatele v hlavičce	Kolečko s ikonou + dva řádky textu	Odpovídá Figmě (Header section), ale systém to má jen jako MetricItem pro nástěnku	Doplnit do systému jako variantu hlavičky, nebo použít MetricItem

4. Odchylky — obsah a jazyk

#	Návrh dnes	Design systém	Oprava
O1	Prázdné hodnoty jako „—“ (a doporučení v detail-meridla-analyza.md, kap. 4)	Prázdná hodnota je „Nevyplněno“, pomlčky se nepoužívají	Sladit — návrh systému zvítězí, pokud se nerozhodne jinak (R3)
O2	Datum „04. 05. 2026“	Formát „12. 2. 2025“ (bez úvodních nul)	Přepsat data
O3	Ikona způsobu odečtu bez popisku	Stav se vždy píše i slovem	Doplnit název v nápovědě (dálkový / ruční / vypočtené)
O4	Chybějící data	—	Badge „Bez dat“, ne prázdný řádek

5. K rozhodnutí

1. R1 — mřížka formuláře. Systém chce 4 sloupce. S pravým panelem Celková spotřeba objektu zbývá na formulář 720 px, kam se 4 sloupce nevejdou. Buď se blok o celkové spotřebě přesune do karty (a formulář má plnou šířku a 4 sloupce), nebo se do systému doplní varianta „detail s panelem = 3 sloupce“.
2. R2 — levý panel měřidel. Doplnit do design systému jako komponentu (např. EntityNavigator: záhlaví se zpět odkazem, filtr, skupiny, řádek se dvěma řádky textu a ukazatelem), aby ho šlo použít i jinde (objekty, subjekty, smlouvy).
3. R3 — „Nevyplněno“, nebo „—“. V režimu čtení působí sloupec samých „Nevyplněno“ rušivě; systém ho ale předepisuje. Navrhuji: „Nevyplněno“ v režimu úprav (placeholder pole) a „—“ v režimu čtení, a tuto výjimku zapsat do systému.
4. R4 — kontrast. Bílý text na brand-500 má 3,39 : 1, což je pod WCAG AA. Týká se primárního tlačítka „Uložit měřidlo“ i aktivní záložky. Otevřený bod samotného systému; do rozhodnutí ho návrhy měřidla přebírají.

6. Co je opravené ve verzi v7 (17. 9.)

Stránka v7 canvasu je postavená na tokenech systému: T1 (škála písma 12 / 14 / 16 / 24), T2 (radius 12 / 8 / 6 / 4), T3 (rámeček pole border-primary), T4 (blue-700 + rámeček), T5 (success-700), T6 (žlutá warning-* místo jantarové), T7 (brand-ring), T8 (červená hvězdička required-mark), K2 (hlavička tabulky 40 px, řádek 64 px), K4 (badge s rámečkem odstínu 200), K5 (pill režimu úprav nahoře i dole), K6 (blok nevratných akcí na konci detailu) a T9 (ikony médií přímo z Figmy).

Zbývá: T10 (jednotná sada ikon 20 px / tah 1,67; ikony médií T9 jsou hotové), K1 a R1 (mřížka 4 sloupců — ve v7 už má formulář plnou šířku, takže jí nic nebrání), K3 (komponenta Tabs), K7 (Combobox), K8 a R2 (levý panel jako komponenta systému), O1 a R3 („Nevyplněno“ vs. „—“), O2 (formát data), O3, O4, R4 (kontrast).

7. Pořadí zbývajících oprav

1. Tokeny (T1–T8) — mechanická náhrada v generátoru obrazovek, beze změny rozvržení.
2. Komponenty K2–K6 — tabulka, záložky, badge, režim úprav, DangerZone.
3. Rozhodnutí R1 a R3, pak K1, O1.
4. Doplnit do design systému: levý panel (R2) a hlavičku detailu s ukazateli (K9); ikony médií už v systému jsou (skupina Media).

Poznámka k EM3: frontend používá vlastní názvy tříd (text-ink, accent-strong, line-soft, paper). Jejich hodnoty proti tokenům systému tato kontrola neověřovala — stojí za samostatné porovnání, aby aplikace a design systém nedržely dvě různé palety.