AXIS — Knihovna stylů

Design tokeny a komponenty extrahované z axis.archdesign.cz · font Montserrat · Bootstrap 5 theme · v1 (2026-06-23)

Barvy

Brand barvy + sémantická paleta + neutrály. Hodnoty jsou přesné hex z běžícího AXISu.

Brand / company

Blue
#1a759f
Azurová (akcent)
#02D0EC
Azurová světlá (Uložit)
#A7EEFF
Azurový tint (Filtrovat)
#E1F9FF
100 % / schváleno
#5DDD66
Méně než 100 % / volno
#B7F1FF
Více než 100 % / neomluveno
#FF5D5D
Plán – dovolená / zaokrouhleno
#FFFF9B
Plán – ostatní volna
#FFE989
Podbarvení světlé
#F2F2F2
Podbarvení tmavší
#E4E4E4

Sémantické

Primary
#0d6efd
Secondary
#6c757d
Success
#27ae60
Danger
#ed4848
Warning
#eb8700
Info
#0dcaf0

Text a neutrály

Text / Dark
#212529
Text strong
#343a40
Muted
#6c757d
Border
#dee2e6
Border input
#c8c8c8
BG subtle
#edeff5
BG / White
#ffffff

Typografie

Font Montserrat. Základ 16 px / line-height 1.5. Nadpisy 800/700.

H1 · 30/800Přehled firem
H2 · 26/700Sekce stránky
H3 · 20/700Podnadpis
Body · 16/400Základní text odstavce v rozhraní AXIS.
Small · 14/400Menší text, popisky tlačítek btn-sm.
XS · 13/400Navigační taby, drobné popisky.

Spacing & radius

Spacing podle 4px škály. Radius: tlačítka 8px, pole 10px, badge pill 100px.

Spacing

4 · 1
8 · 2
12 · 3
16 · 4
24 · 5
32 · 6
48 · 7

Radius

8px
10px
pill

Tlačítka

Montserrat 700 · radius 8px · výška 44px (sm 36px) · padding 9/15px. Hover plně vybarví.

Základní (44px)

Malá (btn-sm · 36px · 14px)

Modifikátory šířky: btn-width-50, btn-width-100 (ikonová / fixní tlačítka).

Formuláře

Vzor z AXIS „Vytvořit režijní zakázku" (/projects/create). Karta .ax-form-card je VYCENTROVANÁ (margin:0 auto, max-width 1170px). Pole v responzivní mřížce .ax-row + .ax-col-12/6/4/3 (víc polí na řádek, na úzkém okně se stackují). Pole: border #c8c8c8 · radius 10px · výška 48px. Labely malé/tlumené (14/400/#6c757d). Dropdowny = Choices.js. CTA: lišta vycentrovaná, margin-top:50px; primární .ax-btn--submit = jasný #80ffdb, text #343a40, 18/700, ikona save.

Základní údaje
Fakturovat zálohou

⚠ Radio i checkbox = ČTVERCOVÝ box 48×48 (AXIS nemá kulaté; ověřeno 2026-07-03 na „Vytvořit kontakt"). Checked = azurový tint #E1F9FF + 2px azurová + SVG fajfka. Text vedle boxu, gap 20px.

Karta vycentrovaná max-width 1170px · mřížka .ax-row/.ax-col-* · povinná pole label.is-required · dropdowny .choices (Choices.js) · custom radio/checkbox 48px · submit #A7EEFF (Uložit, rebrand 2026-07-03) 18/700 + ikona save, lišta center margin-top:50px.

Tabulky

Hlavička 700/#343a40 · buňky padding 8px · oddělovače #dee2e6 · hover řádku #edeff5.

NázevIČOMěstoStavAkce
ArchDesign s.r.o.27082440PrahaAktivní
Stavby Novák10458921BrnoČeká
Projekt Plus63487112OstravaZrušeno

Stránkování (pager)

Dle AXIS: čtverce 40×40, radius 4. Neaktivní bílé (#c8c8c8 okraj, text #6c757d), aktivní plný tyrkys. Patička seznamu = počet řádků vlevo, pager vpravo. Na 1. straně se „‹" nezobrazuje.

1–25 z 290 řádků

Badge / štítky

Pill (radius 100px) · 14px/700. Outline varianta (bílé pozadí, barevný okraj) i plná.

Aktivní Čeká Zrušeno Info Schváleno Chyba

Taby

13px · padding 13/17px · aktivní = modrý spodní okraj + tučně.

Přehled
Kontakty
Dokumenty
Historie

Filtry (toolbar nad tabulkou)

Typický řádek nad seznamem: vyhledávání + filtrační a akční tlačítka zarovnaná vpravo.

Reporty (hlavička sekce + report tabulka)

Vzor z „Stav fakturace": hlavička sekce s názvem (18px/700) a akcemi vpravo, hustší report tabulka a souhrnný řádek.

Hlavička výkazu (.ax-report-head, 2026-07-03): logo společnosti z filtru v boxu 72×72 (border #c8c8c8, radius 10) + název firmy 18/700 + meta řádek (období, středisko). Dle staré app (logo v tabulce), ohnuto do AXIS — logo mimo tabulku, nad ní. Použití: Výkazy.

📄 Stav fakturace
ZakázkaKlientFakturovánoUhrazenoZbývá
Z-2024/118ArchDesign s.r.o.120 000 Kč120 000 Kč0 Kč
Z-2024/132Stavby Novák85 000 Kč40 000 Kč45 000 Kč
Z-2024/140Projekt Plus210 000 Kč0 Kč210 000 Kč
Celkem415 000 Kč160 000 Kč255 000 Kč

Finanční/číselné buňky: zarovnané vpravo (.ax-num), tabulkové číslice, souhrny tučně (.ax-num--total).

Prázdný stav

Žádné záznamy k zobrazení.Zkuste upravit filtr nebo přidat nový doklad.

Zvýrazněná metrika (procenta = modrá)

Marže: 41 % Vytíženost: 38 %

Graf (Chart.js v kartě) + paleta

Plán vs realita
azurová modrá zelená fialová oranžová

AXIS používá Chart.js (canvas). Barvy sérií: tokeny --ax-chart-1..5.

Administrace

Vzory ze sekce Administrace (práva, role, štítky, nastavení) — stejný theme jako aplikace.

Dropdown menu (řádkové akce)

Přepínač práv (široký checkbox 60×30)

Povoleno Zakázáno

Pole s poznámkou (nastavení)

Doporučená minimální hodnota je defaultně nastavena na 15 %.

Štítky

Priorita VIP klient Čeká na schválení 9+

Štítky využívají standardní pill badge. Tabulky, formuláře a karty v administraci jsou shodné s aplikací.

Ikony, řádkové akce & filtr

AXIS používá Material Symbols Rounded (ligatury). HTML výstup musí načíst font přes Google Fonts.

Řádkové akce (1:1 dle AXIS)

Upravit: edit (tužka, 24px, #6c757d) Aktivace:

Ano/Ne badge (dohodnutý styl)

Ano Ne

Filtr „Filtrace" (1:1 dle AXIS)

filter_list Filtrace

⚠ Tlačítko Filtrovat (.ax-filter__submit) = požadavek klienta — AXIS filtr potvrzení nemá. Vizuál dle AXIS primární akce, výška lícuje s poli, vždy poslední prvek polí.

Zhuštěno 2026-07-03 (klient): pole filtru 36px/14px/š.200, ikona 36px box, titulek 16px, odsazení 20px. AXIS originál = pole 48px, box 44, odsazení 30. Create-formuláře zůstávají v AXIS rozměrech (48px).

Aktivní filtr (.is-active): vybraná hodnota zbarví CELÝ box azurovým tintem #E1F9FF + okraj #02D0EC (viz „Stav" výše; dle „barvy.pdf"). Odvozeno z AXIS chipu uvnitř pole — Docházka je single-select, proto celý box (2026-07-03).

Matice docházky ⚠ bez přímého AXIS vzoru — z tokenů

Heatmapa pro „Kontrola vykázaných hodin": řádek = pracovník (sticky), sloupec = den, barva buňky = stav. Sticky první sloupec, hlavička i sloupec součtu. Stavové barvy = jemné tinty AXIS palety (ne syté barvy staré app). Při přetečení se vodorovně scrolluje.

Odpracováno Víkend / svátek Bez záznamu Nesoulad – ke kontrole
Pracovník1Po2Út3St4Čt56So7NeΣ hod.
Novák Jan32
Svobodová Eva40

Komponenta: .ax-matrix + .ax-cell--work/weekend/none/issue · sticky: .ax-matrix__name (left), thead th (top), .ax-matrix__total (right) · legenda .ax-legend. Tinty: --ax-success-tint/-info-tint/-danger-tint/-none-bg.