Foundations
Token pages are generated from packages/ui/src/tokens/tokens.css on main.
Legacy cards
- Brand · Iconography (Tabler)↗Tabler line ikony — produktová sada, stroke 1.75px, 16–18px, currentColor.
- Brand · Logo slot & avatars↗Slot na logo (čeká na reálnou značku) + dlaždice POUZE jako logo celého systému — nikde jinde v UI se nepoužívají. Kulaté varianty neexistují.
- Colors · Attribute pills↗Nízko-chroma kategorie (7 odstínů) — tónuje kategorii, nikdy stav. JEDNA sdílená komponenta .pill v _ds/pills.css: tóny lime…grey na tokenech --pill-*, velikosti výchozí (22 px) a .sm (20 px), volitel
- Colors · Bonita rating↗Výplně bonitního ratingu — syté + WCAG-AA ink. Odstup 4.5:1 se počítá, ne odhaduje. Výborná/Dobrá/Průměrná/Riziková/Bez dat.
- Colors · Dark mode↗Dark téma — surfaces, accent a živý UI vzorek. Přepíná se přes [data-theme=dark].
- Colors · Entity icon tiles↗Sytá plná dlaždice + bílý glyf — jeden vyhrazený odstín (--ic-*) na typ záznamu (Lidé, Firmy, Deals, …). Použij pro typové ikony záznamů; odliš od soft attribute pills.
- Colors · Functional blue↗Jediná modrá — znamená stav (fokus, výběr) a jednu primární akci. Tlačítka jsou jinak monochromatická. Používej střídmě.
- Colors · Neutrals & surfaces↗Chladně laděná škála — ink → hairline (line) → surface. Základ pro text, linky a plochy.
- Colors · Status↗Desaturované sémantické páry — plná barva + subtle podklad (positive · warning · critical · info). Použij pro stavy dealů, health a hlášky.
- Datum↗Rok se píše jen tak přesně, jak je potřeba — „26. 8.
- Iconography · Sizes↗Tabler line ikony — 12 / 14 / 16 / 18 / 20, stroke 1.5px. Default 16px (--ico-sm).
- Layout · Containment (DO / DON'T)↗Max 1 úroveň rámování. Seskupuj prostorem + hierarchií, ne krabičkami. Ikona je ikona, ne dlaždice. RULES.md §0.
- Spacing · Density↗Výšky řádků a rozestupy pro datovou appku — --topbar-h 49 · --row-h 37 · --row-h-nav 28 · --sidebar-w 261.
- Spacing · Elevation↗Zdrženlivá elevace — stíny s nízkou opacitou. xs tlačítka a inputy · sm hover lift a knoby · md plovoucí panely · pop menu a dialogy.
- Spacing · Radii↗Rohový jazyk — od checkboxu (nejmenší) po avatar/dot (full). Škála --radius-xs…pill.
- Spacing · Scale↗Rytmus panelů — 2 · 4 · 6 · 8 · 12 · 16 · 24 · 40 (--sp-0…7). Nikdy raw px; --sp-4 (12px) je hlavní panel gutter.
- Type · Body & Data↗Inter body 13px, Inter tabular-nums pro data (částky, kódy, data, %), overline. Workhorse pro pole záznamů a hustý text.
- Type · Display (Manrope)↗Hustá produktová škála — 16 / 15 / 13 + section; nad --h1 jen --kpi 23 pro KPI číslice. Hierarchie vedená vahou a barvou, ne velikostí. Manrope pro display/labels, Inter pro section.
- Type · Weights↗ROZHODNUTO 6.7.26: škála vah je 400 body · 500 cell/label · 600 semibold (názvy řádků, aktivní stavy, headingy, native bold). Váhy nad 600 (700, 800) se NEPOUŽÍVAJÍ — všude přemapovány na 600 (vč. typ