Spacing & elevation
54 tokens from tokens.css on main (light theme; the dark block overrides the same names).
entity icon tiles
| Token | Value | Note |
|---|
--ic-blue | #0072f5 | |
--ic-purple | #8e4ec6 | |
--ic-green | #45a557 | |
--ic-lime | #7fa545 | |
--ic-mint | #34c759 | SMS — světlejší zelená jako Zprávy na iOS (zadavatel 19. 10. 2026, ACRM-568) |
--ic-amber | #ff990a | |
--ic-rose | #ea3e83 | |
--ic-grey | #666666 | |
radii (rounded set)
| Token | Value | Note |
|---|
--radius-xs | 4px | |
--radius-sm | 8px | |
--radius-md | 11px | |
--radius-lg | 15px | |
--radius-xl | 20px | |
--radius-pill | 9999px | |
spacing scale (2·4·6·8·12·16·24·40)
| Token | Value | Note |
|---|
--sp-0 | 2px | |
--sp-1 | 4px | |
--sp-2 | 6px | |
--sp-3 | 8px | |
--sp-4 | 12px | |
--sp-5 | 16px | |
--sp-6 | 24px | |
--sp-7 | 40px | |
density
| Token | Value | Note |
|---|
--row-h | 37px | |
--row-h-nav | 28px | |
--cell-px | 15px | |
--cell-px-sm | 5px | |
--topbar-h | 49px | |
--control-h | 30px | |
--control-h-sm | 24px | kompaktní ovládání: Button compact, IconButton sm, tlačítko v řádku |
--field-h | 32px | vstupní pole, select, hledání + ovládání topbaru, které s nimi lícuje |
--field-h-touch | 40px | vstupní pole na telefonu (dotyk) — DateField, vstup v kalendáři |
--avatar-xs | 16px | avatar v řádku textu |
--avatar-sm | 24px | výchozí avatar |
--avatar-lg | 32px | velký avatar (hlavička detailu, karta člena) |
--dot-sm | 6px | indikátor na ikonovém tlačítku (nepřečtené) |
--dot | 8px | tečka stavu / tónu (pilulka, výpis) |
--pill-h-sm | 20px | malá pilulka (.acrm-pill.sm) |
--pill-h | 22px | pilulka (.acrm-pill) |
--tile-sm | 22px | dlaždice přepínače (pipeline) — jiný význam než pilulka, i při stejném čísle |
--tap-min | 44px | dotykový cíl a řádek pro dotyk (výpis, pole a ovládání na telefonu) |
--tab-h | 46px | výška kanonického tabu (.acrm-tab) — jediný význam |
--line-thick | 2px | silná čára: indikátor aktivní záložky, spoje |
icon sizes
| Token | Value | Note |
|---|
--ico-2xs | 12px | |
--ico-xs | 14px | |
--ico-sm | 16px | |
--ico-md | 18px | |
--ico-lg | 20px | |
--ico-xl | 24px | |
--ico-stroke | 1.5px | |
elevation
| Token | Value | Note |
|---|
--shadow-xs | 0 1px 3px 0 rgba(0, 0, 0, 0.05) | |
--shadow-sm | 0 3px 8px 0 rgba(0, 0, 0, 0.07) | |
--shadow-md | 0 8px 24px 0 rgba(0, 0, 0, 0.1) | |
--shadow-pop | 0 16px 40px -10px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04) | |
Related legacy cards
- Spacing · Density↗Výšky řádků a rozestupy pro datovou appku — --topbar-h 49 · --row-h 37 · --row-h-nav 28 · --sidebar-w 261.
- 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.
- Iconography · Sizes↗Tabler line ikony — 12 / 14 / 16 / 18 / 20, stroke 1.5px. Default 16px (--ico-sm).
- Brand · Iconography (Tabler)↗Tabler line ikony — produktová sada, stroke 1.75px, 16–18px, currentColor.
- Spacing · Radii↗Rohový jazyk — od checkboxu (nejmenší) po avatar/dot (full). Škála --radius-xs…pill.
- 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 · Scale↗Rytmus panelů — 2 · 4 · 6 · 8 · 12 · 16 · 24 · 40 (--sp-0…7). Nikdy raw px; --sp-4 (12px) je hlavní panel gutter.