Závazná pravidla pro lidi i AI asistenty. Když se tokeny a tento text liší, platí tokeny.

Pravidla značky ApiTree

Verze 1.2 · 28. 10. 2026 · Vlastník: Vít Rozsíval · Anglicky: docs/brand.md

Závazná pravidla pro vše, co nese značku ApiTree: dokumenty, prezentace, sociální sítě, e-maily. Platí pro lidi i pro AI asistenty. Hodnoty níže se generují z tokens/. Kdyby se někdy lišily, platí tokeny. Česká a anglická verze mají stejný obsah; při změně se upravují obě.

Pro AI asistenty: držte se pravidel doslova. Dokumenty skládejte ze šablon (get_template na brand serveru, nebo templates/html/ v repozitáři), vykreslete je přes render_pdf nebo pnpm run render a opravte vše, co brand kontrola nahlásí. Logo vkládejte jako soubor. Logo nikdy nekreslete, nepřepisujte písmem ani neupravujte. Když si nejste jistí, zvolte jednodušší rozvržení s méně prvky.

1. Značka v kostce

Charakter: technologická firma, věcná a přesná. Vizuální jazyk vychází z vývojářského prostředí: monospace nadpisy, kurzor _, kód, mřížka.
Tmavá pro obrazovku, světlá pro tisk. Prezentace, web a sociální sítě jsou tmavé (data-theme="dark"). A4 dokumenty, nabídky a dopisy jsou světlé (data-theme="light").
Zelená je akcent, ne plocha. Většina plochy je neutrální, zelená upozorňuje.
Méně prvků. Jeden motiv na stranu, jeden akcent na blok. Prázdné místo je v pořádku.

2. Logo

Rozložení

Rozložení	Soubory	Kdy použít
Vodorovné (hlavní)	`assets/logo/horizontal/`	Vždy, pokud není důvod pro jiné. Hlavičky, patičky, slidy, web.
Svislé	`assets/logo/stacked/`	Úzký nebo čtvercový prostor: titulní strany, merch, roll-upy. Nové ve v1, odvozené z vodorovného loga.
Znak	`assets/logo/symbol/`	Malé plochy, kde se nápis nedá přečíst: favicon, avatar, ikona aplikace.

Barva	Pozadí
`color` (zelený znak, černý nápis)	Bílá, šedá 8–10, `primary.white`
`color-inverse` (zelený znak, bílý nápis)	Šedá 1 `#25282C`, černá `#16171A`, `primary.heavy-dark`, `primary.black`
`mono-black`	Jednobarevný tisk, razítka, gravírování
`mono-white`	Fotografie a zelené nebo barevné plochy, kde by zelený znak zanikl

Každý soubor je ve formátu SVG (web, HTML, Figma), PNG v několika šířkách (Office, Google, e-mail) a PDF (tisk). Vždy použijte největší dostupné PNG a zmenšete ho, nikdy nezvětšujte.

Barvy loga

Znak: #5DB77A (color.logo.symbol). Tato barva patří jen logu, znaku a stampu a jinde se nepoužívá.
Nápis: #000000 na světlém, #FFFFFF na tmavém pozadí.

Ochranná zóna a velikost

Ochranná zóna kolem loga je polovina výšky loga ze všech stran (20 px u vodorovného loga vysokého 40 px). Nesmí do ní zasahovat text, jiné logo, okraj stránky ani motiv.
Minimální výška:

Rozložení	Obrazovka	Tisk
Vodorovné	24 px (na světlém pozadí 32 px)	6 mm
Svislé	48 px	12 mm
Znak	16 px	4 mm
Stamp	120 px	30 mm

Zelený znak má na světlém pozadí nižší kontrast, proto je tam minimum vyšší.

Umístění

Dokumenty A4: vlevo nahoře v hlavičce, nebo vlevo dole v patičce. Jednou na stranu.
Slidy: na titulním slidu vlevo nahoře, na ostatních malé logo vlevo v patičce.
Logo stojí samostatně, nikdy uvnitř věty ani nadpisu.

Nikdy

✘ Logo nepřebarvujte a nepřidávejte přechody, stíny, obrysy ani průhlednost.
✘ Nedeformujte ho, neotáčejte, neořezávejte a neměňte poměr znaku a nápisu.
✘ Nepřepisujte „APITREE“ písmem a logo nepřekreslujte. Vždy vložte soubor.
✘ Nepoužívejte staré logo s prostrkaným nápisem „A P I T R E E“ ani šablony sázené písmem Keep Calm.
✘ Nenahrazujte celé logo samotným znakem tam, kde se celé logo vejde.
✘ Nedávejte logo na neklidné pozadí (fotografie, vzory) bez dostatečného kontrastu. Na tmavou fotografii použijte mono-white, nebo pod logo dejte plnou plochu.

3. Stamp „The art of technology“

Kulatá pečeť s textem </> ApiTree </> The art of technology kolem znaku. Soubory jsou v assets/logo/stamp/.

Je to doplňkový prvek a nikdy nenahrazuje logo. Strana nebo slide se stampem musí nést i logo.
Nejvýš jeden na stranu nebo slide, v rohu nebo u okraje, dál od loga, než je jeho ochranná zóna.
color (#82D3A5) jen na tmavém pozadí. Na světlém použijte mono-black.
Smí se otáčet (web ho animuje); jinak platí pravidla loga.

4. Motivy

Velký trojúhelník

Obrysový trojúhelník ve tvaru znaku jako dekorace pozadí (titulní a oddělovací slidy, obálky).

Nejvýš jeden na stranu nebo slide, vždy špičkou nahoru a oříznutý okrajem (vybíhá mimo stránku).
Tmavé pozadí: primary.main s krytím 10–20 %, nebo plná primary.heavy-dark na primary.black.
Světlé pozadí: primary.main s krytím 8–12 %.
Nikdy pod textem tam, kde zhoršuje čitelnost, a nikdy v ochranné zóně loga.
Není to logo: nikdy ho nepoužívejte místo loga ani v barvě #5DB77A.

Kurzor `_`

Zelené podtržítko za hlavním nadpisem (titul dokumentu, titulní slide, nadpis slidu) v barvě theme.accent.main.
Jednou na stranu nebo slide, nikdy v běžném textu, tlačítkách ani tabulkách.

Kód a mřížka

Bloky kódu ({ mailto: info@apitree.cz }) jsou v JetBrains Mono na ploše theme.bg.surface, čísla řádků v theme.text.muted.
Čárkované vodicí linky (theme.border.default) smí rámovat obsah na sociálních sítích a obálkách, ne v běžném textu.

5. Barvy

Úplný seznam je v tokens/base.json, hotové CSS proměnné v build/css/tokens.css.

Základní paleta

Barva	Hex	Token	Použití
Zelená	`#46B178`	`color.primary.main`	Akcenty, odrážky, linky, tlačítka
Tmavá zelená	`#1D7E50`	`color.primary.dark`	Zelený text na světlém pozadí
Světlá zelená	`#82D3A5`	`color.primary.light`	Zelený text na tmavém pozadí
Hluboká zelená	`#155036`	`color.primary.heavy-dark`	Zvýrazněné bloky, oddělovací slidy
Šedá 1	`#25282C`	`color.gray.1`	Tmavé pozadí, text na světlém
Černá	`#16171A`	`color.black`	Karty a kód na tmavém pozadí
Bílá	`#FFFFFF`	`color.white`	Světlé pozadí

Zelená škála: #EFFAF3 · #D8F3E0 · #B3E7C6 · #82D3A5 · #46B178 · #1D7E50 · #155036 · #092519. Šedá škála: #25282C · #383D42 · #40474C · #4A525A · #5B666E · #717E86 · #B6BEC3 · #D8DCDF · #EEEFF0 · #F4F5F6.

Témata (sémantické barvy)

Šablony používají sémantické proměnné --at-theme-*, ne přímo paletu. Stejný název má v tmavém i světlém tématu správnou hodnotu.

Role	Tmavé (obrazovka)	Světlé (tisk)
`bg.page`	`#25282C`	`#FFFFFF`
`bg.surface` karty, kód	`#16171A`	`#F4F5F6`
`bg.surface-raised`	`#383D42`	`#FFFFFF` + rámeček
`bg.accent-subtle`	zelená 10 %	`#EFFAF3`
`bg.accent-strong`	`#155036`	`#155036`
`text.primary`	`#EFFAF3`	`#25282C`
`text.secondary`	`#D8F3E0`	`#4A525A`
`text.muted`	`#B6BEC3`	`#5B666E`
`text.accent`	`#82D3A5`	`#1D7E50`
`border.default`	`#383D42`	`#D8DCDF`
`accent.main` dekorace	`#46B178`	`#46B178`
`accent.strong` ikony, grafy	`#46B178`	`#1D7E50`

Pravidla

Poměr ploch: zhruba 70 % neutrální pozadí, 20 % šedé plochy a text, 10 % zelená.
Zelený text na světlém pozadí je vždy #1D7E50. #46B178 má na bílé kontrast jen 2,7 : 1 a jako text je zakázaná.
accent.main je jen dekorace (odrážky, linky, _, motiv). Grafika, která nese význam (ikony, šipky, čáry grafů), používá accent.strong.
Kontrast: text nejméně 4,5 : 1, významová grafika nejméně 3 : 1. pnpm run check:contrast kontroluje každou dvojici v obou tématech.
Stavové barvy (state.warning oranžová, state.error červená) jen pro stavy a varování, nikdy jako dekorace.
Žádné jiné barvy. Žádná modrá, fialová, žlutá a žádné přechody. Jedinou výjimkou je paleta pro grafy (§ 8), a to jen uvnitř grafů.

6. Typografie

Písmo	Role	Řezy
JetBrains Mono	Nadpisy, čísla a statistiky, štítky a nadtitulky, kód	Regular 400, Medium 500, Bold 700
Poppins	Veškerý ostatní text	Regular 400, Medium 500, Bold 700 (+ kurzívy)

Písma jsou ve složce assets/fonts/ (TTF k instalaci do počítače, WOFF2 pro web a PDF) pod licencí SIL Open Font License 1.1. Google Dokumenty a Prezentace mají obě písma bez instalace.

Pravidla

Žádné jiné písmo. Ani Inter, Arial, Helvetica, Calibri, DejaVu nebo Keep Calm. Když se písmo nenačte, dokument se nesmí vydat: vždy zkontrolujte vložená písma v PDF.
Nadpisy jako věta („Jak jsme to postavili“), ne Title Case.
Štítky a nadtitulky: JetBrains Mono Medium, verzálky, prostrkání 0,08 em.
Čísla ve statistikách jsou vždy JetBrains Mono Bold.
Žádné řezy Light, SemiBold ani Black.
Symboly, které Poppins nemá (šipky →, ✓, ●, ▲), se automaticky doplní z JetBrains Mono. Ani jedno písmo nemá ✔ ✘ ★ ☆: použijte místo nich ✓ ✗.
Zarovnání vlevo. Nikdy do bloku, na střed jen na titulních slidech a ve stampu.

Škály

Hodnoty jsou v tokens/typography.json; CSS proměnné mají tvar --at-type-{screen|slide|print}-{style}-{family|size|line-height|weight}.

Obrazovka (web, px): h1 48 · h2 32 · h3 24 · h4 20 · h5 16 (JetBrains Mono Bold) · xl 18 · l 16 · m 14 · s 12 (Poppins).

Slidy 16:9 (plátno 1920 × 1080 px):

Styl	Písmo	Velikost / řádek
display (titulní slide)	Mono Bold	88 / 1,15
h1 (nadpis slidu)	Mono Bold	56 / 1,2
h2	Mono Bold	40 / 1,25
h3	Mono Bold	28 / 1,3
stat (velké číslo)	Mono Bold	72 / 1,1
body-l	Poppins	28 / 1,5
body	Poppins	24 / 1,5
small	Poppins	18 / 1,45
label	Mono Medium, verzálky	16 / 1,4

Tisk A4 (pt):

Styl	Písmo	Velikost / řádek
title (titul dokumentu)	Mono Bold	28 / 1,2
h1	Mono Bold	18 / 1,25
h2	Mono Bold	13 / 1,3
h3	Poppins Bold	10,5 / 1,4
stat	Mono Bold	24 / 1,1
body	Poppins	10 / 1,5
small	Poppins	8,5 / 1,45
caption	Poppins	7,5 / 1,4
label	Mono Medium, verzálky	7,5 / 1,4

Handouty a taháky, které se musí vejít na list papíru, používají kompaktní tiskovou variantu (at-compact): text 9 pt, small 8 pt, caption 7 pt, titul 24 pt, h2 12 pt, okraje stránky 13–16 mm. Nic menšího.

7. Rozvržení

Mřížka 8 px na obrazovce (--at-space-*). Zaoblení 8–16 px u karet, 4 px u štítků (--at-radius-*).
A4: okraje 18 mm (13–16 mm v kompaktní variantě). První strana začíná tmavým blokem s titulem nebo hlavičkou s logem; každá strana má patičku s názvem dokumentu a číslem strany.
Dopisy: logo vlevo nahoře, firemní údaje vpravo nahoře, adresát v okénku obálky DL, právní údaje v patičce.
Slidy: bezpečná zóna 96 px uvnitř plátna 1920 × 1080, patička s malým logem vlevo, názvem prezentace a číslem slidu. Rozložení: titulní, obsahový, čísla a karty, oddělovací, časová osa, graf, závěrečný.
Používejte šablony v templates/html/ a jejich komponenty (karta, statistika, callout, tabulka, štítek, kroky, časová osa, kód, pruhový graf). Katalog je v docs/templates.cs.md. Rozvržení nestavějte od nuly.
Firemní údaje (název, adresa, IČO, DIČ, zápis v obchodním rejstříku) pocházejí z config/company.json. Nikdy je nepřepisujte ručně.

8. Grafy

Grafy mají vlastní kategoriální paletu ověřenou pro poruchy barvocitu v obou tématech. Tyto barvy se objevují jen uvnitř grafů, nikdy v textu, na plochách ani v dekoracích.

Slot	Tmavé (obrazovka)	Světlé (tisk)
series-1	`#43AC74`	`#1D7E50`
series-2	`#3987E5`	`#2A78D6`
series-3	`#C98500`	`#C98500`
series-4	`#9085E9`	`#6250D6`
series-5	`#D55181`	`#D55181`
other	`#717E86`	`#717E86`

Pevné pořadí, nikdy dokola. Jedna řada je vždy series-1 (zelená). Víc než pět řad se slučuje do other, nebo se graf rozdělí na několik menších.
Hodnoty popisujte přímo v grafu; od dvou řad je nutná legenda. Hodnoty a popisky mají barvy textu, nikdy barvu řady.
Velikost (jedna veličina, od světlé po tmavou) používá zelenou škálu primary.white → primary.black.
Jen jedna osa. Tenké pruhy se zaoblenými konci, tenké čáry, nenápadná mřížka (chart.grid, chart.axis).
Stavové barvy zůstávají vyhrazené: červený pruh znamená chybový stav, ne „řadu 5“.

9. Ikony

Lineární ikony na mřížce 24 × 24 px s tahem 1,5–2 px, exportované ze sady webu do assets/icons/ (pnpm run import:icons).
Barva theme.accent.strong nebo barva okolního textu. Nikdy vícebarevné ikony a nikdy vyplněné ikony vedle lineárních.

10. Soubory a výstupy

Klienti dostávají PDF. Upravitelné formáty jen na vyžádání.
Každé PDF před odesláním projde brand kontrolou: jen Poppins a JetBrains Mono, jen barvy z palety, správný rozměr stránky. render_pdf na brand serveru (nebo pnpm run render stranka.html vystup.pdf --format a4|slide) vykreslí a zkontroluje v jednom kroku; check_pdf (nebo pnpm run check:pdf soubor.pdf) zkontroluje hotový soubor.
Soubory pojmenujte ApiTree-<Klient>-<Tema>.pdf, bez diakritiky a mezer.

ApiTree Brand

Logo

Šablony

Písma

Připojte svou AI

Skills pro vaši AI