Brand manuál · verze 1.0 · říjen 2026
Systémy, které fungují i pod zátěží.
Jak CodeDock vypadá, mluví a pohybuje se. Pravidla pro web, e-maily, sociální sítě, nabídky i prezentace, aby každý kontakt se značkou působil stejně: klidně, přesně a srozumitelně.
Značka
CodeDock navrhuje a opravuje složité systémy a integrace tak, aby fungovaly i pod zátěží. Na každém projektu je senior architekt, ne obchodník.
Nejdřív architektura, pak kód
Začínáme příčinou, ne záplatou. Řešení navrhujeme tak, aby fungovalo i za rok stejně spolehlivě jako v den spuštění.
Konkrétně, ne obecně
Mluvíme v číslech a výsledcích: návrh do 48 hodin, 0 minut výpadku, 200+ propojených lékáren.
Klid místo chaosu
Klient od nás odchází s pocitem, že systém má pod kontrolou. Tak má působit i vizuál: uspořádaně a bez křiku.
Pro koho mluvíme
Majitelé menších a rostoucích firem
E-shop, sklad, fakturace a dopravci spolu nemluví, data se přepisují ručně. Mluvíme jejich jazykem: objednávky, faktury, ušetřené hodiny. Bez technických zkratek.
Technické týmy a enterprise
Výkon pod zátěží, legacy systémy, migrace do cloudu bez výpadku. Tady technické pojmy (Azure, .NET, p95) pomáhají a důvěru budují.
Logo
Symbol tvoří dvě do sebe zaklesnutá písmena: oranžové C a grafitové D. Zaklesnutí je to, co CodeDock dělá: spojuje systémy do jednoho celku. Proto ho neměníme ani nerozpojujeme (kromě animace, viz Pohyb).
Symbol a varianty
Jednobarevné verze mají v místě, kde C překrývá D, úzkou mezeru. Bez ní by písmena splynula a zaklesnutí by nebylo čitelné.
Ochranná zóna a minimální velikost
xxx = ¼ výšky symbolu. Kolem loga necháváme volný prostor alespoň x ze všech stran. Žádný text, hrana ani jiné logo do něj nezasahuje.
Minimum na obrazovce: symbol 16 px (favicon), logo s nápisem 96 px na šířku.
Minimum v tisku: symbol 6 mm, logo s nápisem 25 mm.
Čemu se vyhnout
Barvy
Značka žije na tmavém pozadí. Oranžová je jediný akcent a znamená vždy totéž: řešení, „váš systém“, akci. Kliknutím na barvu zkopírujete její hodnotu.
Povrchy a text
Funkční barvy
Poměr v ploše
Oranžové má být málo, aby vždy ukazovala na to podstatné. Pokud je v obrázku oranžových prvků víc než pár, ztrácí význam.
Pozor na screenshoty z Macu: ukládají barvy v profilu Display P3, takže oranžová v nich naměří #EC6B34. Oficiální hodnota je vždy #FE6019.
Typografie
Dvě písma, obě zdarma (licence OFL) a obě ve složce fonts. Plus Jakarta Sans nese obsah, JetBrains Mono technické štítky, čísla a popisky.
Hierarchie
Nadpisy píšeme větou (velké jen první písmeno), nikdy celé verzálkami. Verzálky patří jen mono štítkům. Jedno slovo nebo fráze v nadpisu smí být oranžově, vždy ta, která nese pointu.
Vizuální jazyk
Ilustrujeme systémy, ne lidi u počítačů. Jednoduché 3D tvary z tenkých linek na tmavém pozadí, mezi kterými proudí data jako svítící body.
Linka, ne plocha
Objekty mají tenké obrysy (1–2 px) a tmavou výplň. Žádné gradienty, textury ani realistické 3D.
Oranžová = řešení
Oranžově svítí to, co děláme my: váš systém, oprava, aktivní tok. Šedé je okolí, bílé jsou běžná data.
Data jako světlo
Tok informací ukazují malé svítící body po trasách. Rychlost a hustota vyjadřují zátěž.
Problém červeně, jen na chvíli
Červenou ukazujeme pouze bolest, kterou klient zná (výpadek, ztracená objednávka), a vždy s jejím vyřešením.
Mřížka a kóty
Jemná rýsovací mřížka, kóty a razítko výkresu odkazují na architekta. Používat střídmě (portrét, covery).
Věcné popisky
Ve scénách popisujeme věci obyčejnými slovy (sklad, fakturace, objednávky). Technické názvy jen tam, kde jim publikum rozumí.
Portrét
Fotka architekta je jediná fotografie v komunikaci. Na webu ji zasazujeme do „architektonického výkresu“ (mřížka, kóty, razítko). V malém formátu dostává tenký kruh s oranžovým obloukem a zelenou tečkou „available“. Ukázky jsou ve web/codedock-avatar.html.
Pohyb
Animace vysvětlují, nebaví. Každá vypráví jeden malý příběh, který na stránce dokazuje, co tvrdí text vedle ní.
Klidná smyčka
Smyčky trvají 6–10 sekund, pohyb je plynulý (ease in-out), bez blikání a rychlých střihů. Hero animace jsou bez interakce.
Jeden velký moment
Na stránce smí být jen jeden „velký“ moment, typicky při načtení nebo doscrollování. Ostatní animace jsou tiché.
Logo se zaklapne
Jediná povolená animace loga: C a D se mírně oddálí a zaklapnou zpět do sebe s krátkým oranžovým zábleskem. První (statický) snímek je vždy logo v klidu.
Ohleduplnost
Animace běží jen když jsou vidět, respektují nastavení „omezit pohyb“ a jsou dekorativní (aria-hidden). Obsah musí dávat smysl i bez nich.
Tón komunikace
Píšeme jako zkušený architekt, který mluví s majitelem firmy: přímo, věcně, s respektem k jeho času. Bez prodejních frází.
Návrh architektury do 48 hodin od prvního hovoru.
Rychle dodáváme inovativní řešení na míru.
Integrace padají ve 2 ráno a data ráno opravujete ručně.
Pomáháme firmám s digitální transformací procesů.
Najdeme příčinu a opravíme ji natrvalo. Žádné dočasné záplaty.
Komplexně řešíme vaše IT výzvy pomocí moderních technologií.
30 minut zdarma, bez závazků, bez obchodníků.
Neváhejte nás kontaktovat pro nezávaznou konzultaci!
Čísla místo přídavných jmen
„−80 % nákladů“ místo „výrazně levnější“. Když číslo nemáme, raději popíšeme konkrétní situaci.
Problém klientovými slovy
Začínáme tím, co klient zažívá, ne tím, co prodáváme. Řešení přichází až potom.
Krátce a bez vykřičníků
Krátké věty, aktivní slovesa, žádné vykřičníky ani emoji. Sebevědomí z faktů, ne z hlasitosti.
Slova, kterým se vyhýbáme: inovativní, komplexní, synergie, na míru šité, digitální transformace (bez konkrétního obsahu), přední, nejlepší, revoluční.
Komponenty webu
Základní stavební prvky, ze kterých se skládá web. Proměnné jsou v colors/tokens.css.
Primární tlačítko: plná oranžová, jedno na obrazovku. Sekundární: oranžový obrys. Tiché: šedý obrys. Zaoblení 10 px.
E-commerce platforms
Growing e-shops that have outgrown Shopify or WooCommerce.
Integrations break at 2am
You fix the data manually by morning instead of sleeping.
Karta: Surface, rámeček Line 1 px, zaoblení 16 px. Statistika vždy mono oranžově na konci karty.
Aplikace
Hotové podklady pro nejčastější použití.
LinkedIn a sdílení
E-mailový podpis
Složka email obsahuje podpis pro Outlook (podpis.html), instalační skript pro Apple Mail a animovaný banner. Obrázky musí být na webu v /static/email/.
Web
Složka web obsahuje hero home stránky, sekce „Do you recognise this?“, „Who we help“, „Services“, hero vizuály pro všechny podstránky (hero-viz) a portrét architekta.
Ikona aplikace a favicon
Symbol na tmavém zaobleném čtverci · 512 / 180 (Apple touch icon) / 32 px (favicon)
Soubory
Co je ve složce a k čemu to slouží.
Nápis „CodeDock“ v logu je převedený do křivek z písma Plus Jakarta Sans Bold, takže logo vypadá stejně i na počítači bez nainstalovaného fontu.