Co potřebujeme, jak to pojmenovat a kam to uložit. Názvy souborů jsou přesně definované — system je cte automaticky.
Než začneš, tohle si zapamatuj. Určuje jak pojmenovat každý soubor.
Soubor bude použitý na světlém / bílém pozadí
→ logo/ikona je tmavá
Soubor bude použitý na tmavém / černém pozadí
→ logo/ikona je světlá
Plnobarevná verze
→ barvy, gradienty, plný brand
Jednobarevná verze
→ tisk, jednobarevný kontext
Složka logos/
Vektory — hlavní formát pro web i tisk.
| # | Název souboru | Kde bude použito |
|---|---|---|
| 1 | logo-full-on-light-gradient.svg |
Na světlém pozadí, barevně |
| 2 | logo-full-on-light-mono.svg |
Na světlém pozadí, jednobarevně (tisk) |
| 3 | logo-full-on-dark-gradient.svg |
Na tmavém pozadí, barevně |
| 4 | logo-full-on-dark-mono.svg |
Na tmavém pozadí, jednobarevně (tisk) |
Minimálně @2x rozlišení.
| # | Název souboru | Kde bude použito |
|---|---|---|
| 5 | logo-full-on-light.png |
PNG pro světlé pozadí |
| 6 | logo-full-on-dark.png |
PNG pro tmavé pozadí |
Jedno logo, dva formáty. Grafik by měl dodat oba — používají se v různých kontextech.
Tip: Podélné logo je hlavní formát pro web. Obdélníkové (stacked) se hodí tam, kde je málo místa na šířku — vizitky, profilovky, app ikony. Ideálně dodat oba.
Požadavky na SVG
Složka icons/ — samotný symbol bez textu
Stejná logika jako u loga.
| # | Název souboru | Kde bude použito |
|---|---|---|
| 1 | icon-on-light-gradient.svg | Na světlém pozadí, barevná |
| 2 | icon-on-light-mono.svg | Na světlém pozadí, mono |
| 3 | icon-on-dark-gradient.svg | Na tmavém pozadí, barevná |
| 4 | icon-on-dark-mono.svg | Na tmavém pozadí, mono |
Pro prohlížeče, PWA a mobilní zařízení.
| # | Název souboru | Rozměr | Účel |
|---|---|---|---|
| 5 | favicon.ico | 32×32 | Záložka prohlížeče (multi-size: 16, 32, 48) |
| 6 | favicon.svg | vektor | Moderní prohlížeče |
| 7 | apple-touch-icon.png | 180×180 | iOS Home Screen |
| 8 | icon-192.png | 192×192 | PWA manifest |
| 9 | icon-512.png | 512×512 | PWA splash screen |
Náhledové obrázky pro sdílení odkazů.
| # | Název souboru | Rozměr | Účel |
|---|---|---|---|
| 10 | og-image.png | 1200×630 | Facebook, LinkedIn, Twitter |
| 11 | og-image-square.png | 1200×1200 | Instagram volitelné |
Kompletní paleta — ideálně jako brand sheet (obrázek nebo PDF).
#00D700
#0041BE
#00E5E0
#0F1023
#1A1A1A
#FFFFFF
11 odstínů pro Tailwind. Pokud brand používá gradienty, dodat celý rozsah.
Pokud má brand gradientní škálu, dodat i stupně 50 – 950 (11 odstínů pro Tailwind).
Složka fonts/
Složka references/ — ukázky reálného použití brandu
| Název souboru | Co to je | Povinné? |
|---|---|---|
brand-sheet.png |
Přehled palety + fontů | Ano |
business-card.png |
Vizitka (obě strany) | volitelné |
color-usage.png |
Ukázka aplikace barev na UI/webu | volitelné |
logo-placement.png |
Příklady správného umístění loga | volitelné |
social-templates.png |
Šablony pro sociální sítě | volitelné |
brand-guidelines.pdf |
Kompletní brand manual | volitelné |
Složka references/style/
Tyto obrázky slouží jako vzory pro AI generování. AI z nich čte vizuální styl brandu a generuje konzistentní výstupy. Čím víc příkladů, tím lepší AI výstup.
Ideálně 5–10 obrázků ukazujících jak brand vypadá v praxi:
Tipy
Odevzdání jednoho brandu — zkontroluj vše.
Takhle má vypadat hotová složka jednoho brandu.
Názvy souborů
Dodržovat přesně — systém je čte automaticky.
Klic
on-light = světlé pozadí
on-dark = tmavé pozadí
AI reference
references/style/ = vizuální vzory pro AI generování.