Colors
130 tokens from tokens.css on main (light theme; the dark block overrides the same names).
RAW SCALE · neutrals (cool-tinted, never pure #000)
| Token | Value | Note |
|---|
--ink-900 | #18191b | |
--ink-800 | #1f2023 | |
--ink-700 | #303135 | |
--ink-600 | #4a4b4f | |
--ink-500 | #707477 | sekundární text ≥ 4,5:1 na surface-50/75/100 (dřív #7d8184, 3,8:1; zadavatel 2. 10. 2026) |
--ink-400 | #98999c | |
--ink-300 | #b8b8c0 | |
--line-300 | #dcdbdd | |
--line-200 | #eeeff1 | |
--line-100 | #f4f4f5 | |
--surface-100 | #ffffff | |
--surface-75 | #fbfbfb | |
--surface-50 | #faf9fe | |
--white | #ffffff | |
the one functional blue
| Token | Value | Note |
|---|
--blue-600 | #0062d1 | |
--blue-500 | #0072f5 | |
--blue-100 | #e0f0ff | |
--blue-ink | #0068d6 | |
--selected | #ebf5ff | |
desaturated status
| Token | Value | Note |
|---|
--positive | #45a557 | |
--positive-subtle | #ebfaeb | |
--positive-ink | #297a3a | |
--positive-press | #398e4a | border/pressed plněné zelené (.btn.save) — DS colors_and_type.css |
--warning | #ffb224 | |
--warning-subtle | #fff4d6 | |
--warning-ink | #a35200 | |
--critical | #e5484d | |
--critical-subtle | #ffebeb | |
--critical-ink | #cb2a2f | |
--info | #0072f5 | |
--info-subtle | #ebf5ff | |
--info-ink | #0068d6 | |
--sentiment-pos | #12a594 | |
--sentiment-neg | #c2620a | |
--goal-in | #16a34a | |
--goal-in-ink | #15803d | |
--goal-in-subtle | #dcfce7 | |
soft attribute pills
| Token | Value | Note |
|---|
--pill-lime-bg | #f4faeb | |
--pill-lime-ink | #5a7a29 | |
--pill-amber-bg | #fff4d6 | |
--pill-amber-ink | #a35200 | |
--pill-blue-bg | #ebf5ff | |
--pill-blue-ink | #0068d6 | |
--pill-purple-bg | #f9f1fe | |
--pill-purple-ink | #7820bc | |
--pill-green-bg | #ebfaeb | |
--pill-green-ink | #297a3a | |
--pill-rose-bg | #feecf2 | |
--pill-rose-ink | #bd2864 | |
--pill-grey-bg | #ebebeb | |
--pill-grey-ink | #666666 | |
--accent-violet | #8e4ec6 | |
bonita rating
| Token | Value | Note |
|---|
--bonita-green | #16c95f | |
--bonita-green-ink | #06371b | |
--bonita-lime | #9bd60a | |
--bonita-lime-ink | #2c3a00 | |
--bonita-amber | #ffc01f | |
--bonita-amber-ink | #4a3500 | |
--bonita-rose | #ff5a4d | |
--bonita-rose-ink | #3d0e05 | |
--bonita-grey | #6b7177 | |
--bonita-grey-ink | #ffffff | |
--avatar-cyan | #12a594 | |
comms channel brand glyph colors (flat icon, no tile — §0)
| Token | Value | Note |
|---|
--channel-wa | #1d9c40 | brand: WhatsApp |
--channel-fb | #3a5fe0 | brand: Messenger |
--channel-li | #2f6fc9 | brand: LinkedIn |
--channel-ig | #c13584 | brand: Instagram |
SEMANTIC TOKENS — use these in components
| Token | Value | Note |
|---|
--bg | var(--surface-75) #fbfbfb | |
--bg-canvas | var(--surface-100) #ffffff | |
--shell-bg | #efeff1 | |
--fg | var(--ink-900) #18191b | |
--fg-secondary | var(--ink-500) #707477 | |
--fg-muted | var(--ink-400) #98999c | |
--fg-on-accent | var(--white) #ffffff | |
--border | var(--line-200) #eeeff1 | |
--border-strong | var(--line-300) #dcdbdd | |
--hover-surface | var(--surface-75) #fbfbfb | neutral lightest grey (AD 21. 8. 2026, was surface-50) |
--active-surface | #eeeff1 | |
--accent | var(--blue-500) #0072f5 | |
--accent-press | var(--blue-600) #0062d1 | |
--accent-tint | var(--blue-100) #e0f0ff | |
--accent-ink | var(--blue-ink) #0068d6 | |
--ring | var(--blue-500) #0072f5 | |
--focus-ring | 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent) | |
--focus-ring-critical | 0 0 0 3px color-mix(in srgb, var(--critical) 16%, transparent) | |
vrstvy (z-index) — pojmenované podle významu, hodnoty = ty skutečně použité
| Token | Value | Note |
|---|
--z-sticky | 30 | lepivé filtry / hlavičky v obsahu |
--z-drawer | 50 | boční šuplík appky |
--z-fab | 58 | plovoucí akce; pod scrimem šuplíku i dialogy |
--z-drawer-scrim | 59 | podklad AI panelu / šuplíku |
--z-panel | 60 | překryvný panel a lokální popup v obsahu |
--z-nav-scrim | 72 | podklad mobilní navigace |
--z-nav | 73 | mobilní navigace |
--z-sheet-scrim | 74 | podklad spodního šuplíku |
--z-sheet | 75 | spodní šuplík |
--z-dock | 78 | kompaktní dialog, dock dialogů, lišta hovoru |
--z-dialog | 80 | dialog + jeho scrim |
--z-popover-scrim | 85 | podklad popoveru |
--z-bulkbar | 85 | lišta hromadných akcí — nad obsahem, pod toastem |
--z-toast | 90 | toasty |
--z-dialog-top | 90 | dialog nad ostatními dialogy (globální hledání) |
--z-picker-scrim | 100 | podklad pickeru (datum) |
--z-popover | 101 | popover, menu, panel pickeru — nad dialogem |
--z-tooltip | 120 | tooltip |
--z-banner | 1000 | trvalý banner (impersonace) |
--z-lightbox | 1000 | celoobrazovkový náhled příloh |
pohyb — délky a křivky použité v appce (pružina morfů zůstává v lib/spring.ts)
| Token | Value | Note |
|---|
--dur-fast | 120ms | hover / press zpětná vazba, fade scrimu dialogu (RULES) |
--dur-base | 160ms | rise + scale dialogu (RULES) |
--dur-slow | 240ms | výsuv šuplíku / sheetu |
--ease-sheet | cubic-bezier(0.32, 0.72, 0, 1) | |
--ease-emphasized | cubic-bezier(0.2, 0.8, 0.2, 1) | |
--ease-standard | cubic-bezier(0.4, 0, 0.2, 1) | |
překryvy (dříve v segment-screen.css) — jeden wash a jeden podpisový stín pro KAŽDÝ překryv
| Token | Value | Note |
|---|
--ov-scrim | rgba(22, 24, 30, 0.07) | |
--ov-scrim-dim | rgba(20, 22, 28, 0.3) | |
skeleton shimmer (dříve v skeleton.css)
| Token | Value | Note |
|---|
--sk-base | color-mix(in srgb, var(--fg) 9%, var(--surface-100)) | |
--sk-hi | color-mix(in srgb, #fff 60%, transparent) | |
layout stránky seznamu (dříve v item-list.css)
| Token | Value | Note |
|---|
--il-page-max | 1080px | |
SEMANTIC TYPE
| Token | Value | Note |
|---|
--h1 | 500 16px/1.2 var(--font-display) | |
--h2 | 500 15px/1.25 var(--font-display) | |
--h3 | 500 13px/1.35 var(--font-display) | |
--kpi | 500 23px/1 var(--font-display) | DEPRECATED — stat dlaždice = var(--h1) (Components · Stat tile) |
--section | 600 12px/1.2 var(--font-sans) | |
--label | 500 12px/22px var(--font-display) | |
--p | 400 13px/1.5 var(--font-sans) | |
--cell | 500 13px/22px var(--font-sans) | |
--hint | 400 12px/1.45 var(--font-sans) | nápověda pod polem — váha 400, ne 500 (AD 26. 8. 2026) |
--small | 500 12px/1.4 var(--font-sans) | |
--overline | 500 11px/1 var(--font-sans) | |
--mono | 500 12px/1.4 var(--font-mono) | |
--subtitle | 400 13px/1.5 var(--font-sans) | |
Related legacy cards
- 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 · 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 · 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 · Status↗Desaturované sémantické páry — plná barva + subtle podklad (positive · warning · critical · info). Použij pro stavy dealů, health a hlášky.
- 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.
- 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í.