Kompletní Brand a Design Manuál: Pech & Partneři

Tento dokument je hlavním zdrojem pravdy pro firemní identitu, vizuální komunikaci a UI/UX vzory webových aplikací Pech & Partneři. Slouží vývojářům, designérům, marketérům i třetím stranám pro správnou reprezentaci značky.

1. Značka a Firemní identita (Brand Identity)

Poslání a tón komunikace (Tone of Voice)

Pech & Partneři se prezentují jako vysoce profesionální, důvěryhodná a transparentní poradenská společnost. Tón komunikace je:

• Seriózní, ale přístupný: Nejsme odtažití. Mluvíme s klienty srozumitelně.
• Minimalistický: Nejsme hluční. Naším nástrojem je “čistý papír a inkoust”, srozumitelná data a jasné výstupy.
• Edukativní: Místo tlačení na prodej využíváme osvětu, kalkulačky a přesné analýzy.

Práce s Logem

• Bezpečná zóna (Clear space): Kolem loga musí být vždy minimální prázdný prostor (alespoň polovina výšky loga).
• Zákazy u loga: Logo se nesmí nijak deformovat, nesmí pod něj být stíny (drop shadows), a nesmí být používáno v nestandardních barvách mimi oficiální paletu. Plout smí výhradně na plných, nekontrastních barvách (Paper, Ink, White).

2. Barevná paleta (Color System)

Barvy definují náš přístup – klasický “pen-and-paper” consulting kombinovaný s moderní technologií a byznysovými akcenty.

2.3 Použití Opacity a Stínů

• Vylučujeme moderní “svítící a rozplizlé stíny” (soft-shadows).
• Hloubku a hierarchii tvoříme pomocí barvy hrany a průhlednosti:
  • border-ink/10 pro jemné rámečky a oddělovače.
  • bg-paper border-ink/5 a hover:border-clay pro interakce a vizuální bloky informací.

3. Typografie (Typography)

Naše typografie navozuje reportážní a prestižní dojem z finančních médií s kombinací ultra-funkčních datových polí.

3.1 Písma a vrstvy

• Všechny fonty (Playfair Display, DM Sans, Cutive Mono) jsou hostovány lokálně přes složku public/fonts a definovány v repozitáři v global.css. To zajišťuje maximální rychlost načítání, odstraňuje závislost na externích CDN chránící soukromí a splňuje GDPR standardy stahováním fontů ze stejného serveru.
• Nadpisy (Serif) – Playfair Display: font-serif. Úderné, velmi velké a často s mixem italic slov v odstavci pro dynamiku sdělení. Nahradilo těžší Bodoni Moda pro snazší čitelnost na displejích.
• Dlouhé texty (Sans) – DM Sans: font-sans. Ideální čisté a lehce čtitelné písmo na displejích ve všech vahách.
• Data, Prvky, UI (Mono) – Cutive Mono: font-mono text-xs uppercase tracking-widest. Psací stroj s velkými rozestupy. Tvoří kostru aplikace – nadpisy polí, štítky.

4. UI Komponenty a Systém pro vývoj (Web & App)

Všechny CSS komponenty jsou definované v globální vrstvě (src/styles/global.css) pomocí vrchních direktiv frameworku a zajišťují tak ostrohranný a střídmý styl (sjednocení k 03/2026). Zásada: rohy vždy ostré (rounded-none).

4.1. Tlačítka (Buttons)

Plně definováno pro rychlou implementaci přes abstraktní CSS třídy:

1. Primární AKCE (.btn-primary): Tmavý plný obdelník, který na hover přechází do .bg-clay.
2. Sekundární volby (.btn-secondary): Odrážejí “vzduch”. Průhledné, barvící hranu při interakci.
3. Lokalizované akce (.btn-text): Písmo ovládané podtržítkem u jemnějších prvků map atd. (Velikosti řízeny přes .btn-lg a .btn-md).

4.2 Formulářové prvky (Inputs)

• Inputy (.form-input): Spodní čistá podtržená linka, žádné uzavřené obdélníky.
• Select boxy (.form-select-wrapper a .form-select): Nahrazena nativní šipka.
• Labeling (.label-mono): Těžce standardizovaná komponenta. Pro všechny vstupy musí být štítek nad vstupem.

<div class="bg-paper p-8 border border-ink/10 space-y-6 flex flex-col justify-center">
    <label class="label-mono mb-4 text-center">Preferovaný kontakt</label>
    <div class="segment-group">
        <label class="segment-btn segment-btn-active text-center block cursor-pointer">Emailem</label>
        <label class="segment-btn segment-btn-inactive text-center block cursor-pointer">Telefonem</label>
    </div>
    <p class="font-sans text-xs text-graphite text-center mt-4">Ukázka segmentového tlačítka `.segment-group` namísto klasických radio button koleček.</p>
</div>

4.4 Akordeony & Rozbalovací UI

• Od designu nabídek služeb až po “doplňující nastavení u investic” mají panely stejný ráz chování a ikon – třídy .accordion-header, uvnitř které operuje .accordion-title.

5. Práce s Gridem a Nástroji rozložení (Layouts)

• Komponenty jsou vždy lemovány mřížkou utvořenou buď CSS gridem, ale na úrovni pozadí aplikace běží jemný grid-lines grafický pattern (background-image: var(--background-image-grid-pattern)). Umocňuje prvek financí, os a exaktnost práce.
• Vizuální prvky v řadě mají na desktopech tendenci hraničit tenkým linkovým dělením k dosažení “tiskového” vzhledu novinových sloupců.

6. Fotografie, Grafika a Datové Tabulky

Grafy

Pech a Partneři nevyužívají standardizované vizualizační výstupy (např. běžný Excel look). Charty musí být nakódovány (Chart.js atd.) pomocí tokenů z palety. Ostré hrany sloupců a cutout: "85%" pro kruhové Doughnut grafy (tvářící se jako tenké moderní pásy). Rámečky tooltipů musejí být také rounded-none, používat font-mono a nemít stíny.

Fotografie

Doporučuje se fotky ladit do černo-bílých nebo tlumících tónů (grayscale u týmu apod.) s občasným plným přebarvením do plných barev až po najetí myši. To dává maximální vyniknout samotným obsaženým datům a textu.

Tabulky a přehledy (Bento grids)

Už nepoužíváme klasické ohraničené exelové <table> řádky. Nahrazuje ho systém CSS boxů nebo velmi tenké dělící horizontální čáry (border-b border-ink/10 nebo divide-y divide-ink/10).

Závěr

Základním pravidlem tohoto manuálu je, že “Méně rozptyluje, více slouží”. Naším brandem nechceme ukřičet klienta vizualizací, chytáme ho na přesnost dat zabalenou ve vysoce organizované, špičkové krabici z prémiového kartonu s inkoustovým razítkem.