Design System Manual
Kompletní specifikace vizuálního stylu. Tento dokument slouží jako jediný zdroj pravdy pro design a vývoj webu.
1. Typografie (3 Fonty)
Striktní rozdělení rolí pro fonty zajišťuje hierarchii a technický „look“.
Display
Použití: Velké nadpisy, Hero sekce, Tlačítka.
UI & Body
Inter je standardem pro čitelnost na obrazovkách. Používáme ho pro veškerý dlouhý text, popisky, formuláře a navigaci. Barva textu je Slate 700.
Code / Data
ID: 593-AX // Technical Data
Aktuální font: JetBrains Mono (Google Fonts, zdarma)
Typografická Škála
Responzivní: Desktop 100% • Tablet 90% (H1-H3) • Mobile 80% (H1-H3, min 24px)
Alternativní Možnosti Monospace Fontů
Pro zvážení: 3 kvalitní monospace fonty vhodné pro kód, prezentace a technický obsah.
✓ JetBrains Mono
const DevOps = {
deploy: 'Docker',
monitor: true
};
- Zdarma (Google Fonts)
- Programátorské ligatury
- Vysoká čitelnost
- Široká podpora
Zdrojový kód, technická data, terminálové bloky, prezentace
MonoLisa
deploy: ‚Docker‘,
monitor: true
};
- Výborná čitelnost pro kód
- Font-rendering filtr
- Ligatury a varianty
- Profesionální kvalita
$79 Personal / $199 Team
Lifetime licence, všechny váhy
CS Alice Mono
deploy: ‚Docker‘,
monitor: true
};
- Moderní, čistý design
- Vynikající čitelnost
- Vhodný pro dlouhé coding sessions
- Dobrý poměr cena/výkon
$40 Desktop licence
Jedna licence, všechny váhy
Profesionální Doporučení
JetBrains Mono je vynikající volba — moderní, zdarma, s ligaturami a širokou podporou. Pro absolutně nejlepší čitelnost a ochotu investovat je MonoLisa ($79) špičková volba používaná profesionály. CS Alice Mono ($40) nabízí moderní design a vynikající poměr cena/výkon.
2. Barvy (Dual Orange)
Rozdělujeme oranžovou na dvě role pro zajištění kontrastu (A11y). Všechny hodnoty pro web i tisk.
Orange Vivid
Použití: Pozadí primárních tlačítek, ikony akcí, hover stavy, aktivní prvky, call-to-action plochy. Text musí být černý (#000).
Orange Text
Použití: Textové odkazy na bílém pozadí, zvýrazněný text, interaktivní text, labels. Splňuje WCAG AA přístupnost (kontrast 4.5:1).
Zinc 900
Použití: Nadpisy (h1-h5), tmavé pozadí sekcí (hero, footer), code bloky, dark mode prvky. Hlavní kontrastní černá.
2B. Barvy pro Kód (Syntax Highlighting)
5 barev z Tailwind 300 škály pro zvýraznění syntaxe kódu. Zajišťují dobrou čitelnost a kontrastní rozlišení.
Paleta pro Code Highlighting
Blue-300
Funkce, metody, procedury
Emerald-300
Stringy, textové hodnoty
Orange-300
Důležité: klíčová slova, HTML tagy
Amber-300
Čísla, konstanty, boolean hodnoty
Purple-300
Třídy, typy, speciální objekty
Příklad použití v kódu:
const TAX_RATE = 0.21;
let total = 0;
for (const item of items) {
console.log(‚Processing:‘, item);
total += item.price;
}
return total * (1 + TAX_RATE);
}
3. Grid & Spacing
Technické specifikace prostorového systému. Přesné hodnoty pro konzistentní implementaci.
Grid Základna (12 sloupců)
--grid-col: 12
--grid-gap: 24px
max-width: 1400px
@media (max-width: 800px)
⚠️ Pravidlo
Grid používáme pouze pro layout stránky, ne pro komponenty. Komponenty mají vlastní vnitřní spacing.
4. Hierarchie Tvarů
Rozlišujeme funkci prvku jeho tvarem. Akce jsou kulaté, data jsou hranatější.
5. Kontextuální Bloky
Jak prvky reagují na změnu pozadí.
Standardní Sekce
Běžný obsah. Text je Slate 700.
Tmavá Sekce
Footer nebo Hero. Text je světlý.
6. Návrhy Hlavního Loga
Čtyři návrhy loga ke zvážení — různé koncepční přístupy k vizuální identitě.
Varianty k výběru
K výběru finálního loga
Po výběru hlavního loga budou vytvořeny potřebné varianty (kompletní, ikona, černobílá verze, invertovaná pro tmavé pozadí) s detailními pravidly použití, minimálními velikostmi a ochrannou zónou.