Stavebnice tokenů a prvků pro všechny logistické nástroje Maronu — od telefonu řidiče (~360px) po dispečerský monitor. Vzhled je Signature (teplejší povrchy, větší radiusy, zelené vrstvené stíny, gradientová tlačítka) — zabetonovaný v tokenech (app/globals.css). Nahoře se přepíná jen motiv (světlý/tmavý). Hustota je comfortable ve výchozím stavu (mobil/řidič, cíle ≥44px); compact se zapíná lokálně na hustou tabulku přes data-density (viz sekce 06). Vše čte z tokenů — nikde natvrdo barva ani rozměr.
01 Barvy
Brand — zelená (emerald)
Primární akce primary-strong = green-700 (kvůli AA na bílém textu), brand akcent primary = green-600.
Neutrály (slate)
Stavová paleta — bg / fg / border / solid
WCAG AA kontrast — živě spočítáno
Pár
Náhled
Poměr
AA text
AA UI/large
02 Typografie
Display · Přehled vozidel
H1 · Kniha jízd
H2 · Detail zakázky
H3 · Nakládka & vykládka
Title · Řidič: Pavel Novák
Body (16px) · Zásilka byla naložena v Plzni a je na cestě do Mnichova. Předpokládaný příjezd v 14:30.
Body-sm · Poslední aktualizace polohy před 3 minutami.
Font: Inter (UI, výborná diakritika) + JetBrains Mono (SPZ, čísla, časy, ID). Tabular numbers ve sloupcích.
03 Spacing · Radius · Elevace
Spacing (4px base)
Radius
Elevace / stíny
04 Logistický stavový systém
Nikdy jen barva — vždy barva + ikona + text (barvoslepost, slunce). Soft (odznak v tabulce) i solid (marker na mapě) varianta.
Odznaky (soft)
Solid (mapové markery / zvýraznění)
05 Ukázka komponent
Tlačítka
Formulář
Neplatný formát SPZ.
Sledovat přes GPS
KPI karty
Vozidla na cestě
12
▲ 2 vs. včera
Včasnost doručení
94,2 %
▲ 1,4 %
Ohrožené zakázky
3
▼ termín < 2 h
Marže (měsíc)
18,6 %
▼ 0,8 %
Datová tabulka (compact) — dispečer na desktopu
Zakázka
Vozidlo
Řidič
Trasa
Stav
Cena
Stejná data na telefonu → karty (ResponsiveTable)
Upozornění / bannery
Zpoždění 40 min — zakázka #ZAK-0042 (Plzeň → Mnichov). Řešitelné, ETA 15:10.
Problém — vozidlo 4P2 8391 hlásí poruchu, řidič mimo trasu.
Doručeno — #ZAK-0039 vyloženo v 12:04, CMR nahráno.
Nová poptávka z e-mailu — Okula, paleta Plzeň → Brno.
Průběh zakázky (Timeline)
08:12
Nakládka dokončena
Plzeň, Zborovská 29
09:40
Na cestě
Průjezd Rozvadov
14:30
Očekávaná vykládka
Mnichov · ETA
06 Hustota — řidič vs. dispečer
Comfortable je výchozí (mobil/řidič, cíle ≥44px). Compact se nezapíná globálně — nasadíš ho lokálně na konkrétní hustou tabulku přes atribut data-density="compact" na jejím obalu. Stejné komponenty, jiná role.
Comfortable (výchozí)
Vozidlo
Řidič
Stav
4P2 8391
P. Novák
Na cestě
3S9 1122
J. Veselý
Zpoždění
1A2 3344
M. Král
Doručeno
Compact — data-density="compact" na obalu
Vozidlo
Řidič
Stav
4P2 8391
P. Novák
Na cestě
3S9 1122
J. Veselý
Zpoždění
1A2 3344
M. Král
Doručeno
Řízeno atributem data-density — comfortable (výchozí) a compact (husté dispečerské tabulky). V Reactu je to prop density na komponentě tabulky.
07 Data-viz — benchmark Power BI
Cíl kvality = Power BI. Grafy budou interaktivní a klikatelné i na telefonu (koláčové, sloupcové, drill-down). Zde je jen barevná paleta data-viz a statické náhledy — samotná grafová knihovna je samostatné rozhodnutí (viz zpráva). Tokeny jsou library-agnostické: ať zvolíme cokoli, kreslí to v brand barvách.
Kategoriální paleta (chart-1 … chart-8)
Rozpad zakázek (donut)
Vytíženost / týden (sloupce)
Marže — plán vs. realita (linie)
Zdroj pravdy tokenů: app/globals.css + tokens/tokens.json. Toto HTML je věrný, samostatný náhled pro checkpoint. Živý React style-guide (/design-system) a plná knihovna komponent přijdou po odsouhlasení směru.