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ě.

CodeDock s.r.o. · Zlenická 863/9, 104 00 Praha 22 · IČO 14292769

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).

Hlavní verze · logo/svg/codedock-logo-horizontal.svg

Na světlé pozadí · codedock-logo-horizontal-on-light.svg

Symbol a varianty

Symbol · výchozí

Reverse · na fotky a rušná pozadí

Bílá · jednobarevný tisk, ražba

Černá · fax, razítko, dokumenty

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

x = ¼ 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

Nedeformovat

Neměnit barvy

Neotáčet

Nedávat oranžové C na oranžovou

Bez stínů a záře

Světlý nápis na světlém pozadí

Neprůhledné, ne „vybledlé“

Ne na rušné pozadí (použít reverse)

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

Ink a povrchy · 78 %

Text · 14 %

Orange · 6 %

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.

Aa Čč Žž

Plus Jakarta Sans · 400 / 500 / 600 / 700 / 800

0123 T+48h

JetBrains Mono · 400 / 500

Hierarchie

H1 · heroJakarta 700
clamp(2.3–4 rem)
řádkování 1.03 · −0.04 em

Systémy, které fungují i pod zátěží.

H2 · sekceJakarta 700
clamp(2–3.7 rem)
−0.035 em

Návrh na papíře do 48 hodin.

H3 · kartaJakarta 600
1.3–1.45 rem
−0.01 em

Integrace padají ve 2 ráno

TextJakarta 400
1–1.15 rem · 1.6
barva Text 2

Úzká hrdla, výpadky, nepředvídatelné chyby. Najdeme příčinu v architektuře a opravíme ji natrvalo. Žádné dočasné záplaty.

EyebrowMono 400 · 13 px
VERZÁLKY · +0.12 em
barva Orange

Who we help

StatistikaMono 400 · 13–14 px
barva Orange

0 min downtime at cutover

ČísloJakarta 600–700
tabular-nums

200+ propojených lékáren

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.

Ukázka vizuálního jazyka: objednávky proudí přes váš systém do skladu, fakturace a dopravy

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í.

● Ano

Návrh architektury do 48 hodin od prvního hovoru.

● Ne

Rychle dodáváme inovativní řešení na míru.

● Ano

Integrace padají ve 2 ráno a data ráno opravujete ručně.

● Ne

Pomáháme firmám s digitální transformací procesů.

● Ano

Najdeme příčinu a opravíme ji natrvalo. Žádné dočasné záplaty.

● Ne

Komplexně řešíme vaše IT výzvy pomocí moderních technologií.

● Ano

30 minut zdarma, bez závazků, bez obchodníků.

● Ne

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.

Book a free 30-min call Book a consultation View case studies Currently available for new projects

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.

−80% costs vs. Shopify

Integrations break at 2am

You fix the data manually by morning instead of sleeping.

hover: oranžový rámeček + záře

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í

Osobní LinkedIn cover · 1584 × 396 · vlevo dole zůstává místo pro profilovou fotku

Firemní LinkedIn cover · 1128 × 191

Obrázek pro sdílení a příspěvky · 1200 × 627

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ží.

codedock-brand/ ├── brand-manual.html tento manuál ├── logo/svg/ vektorová loga: web, tisk, prezentace ├── logo/png/ bitmapy 64–1024 px, app icon, favicon ├── colors/ tokens.css, tokens.json, palette.png ├── fonts/ Plus Jakarta Sans, JetBrains Mono + licence OFL ├── email/ podpis (Outlook, Apple Mail), banner, logo ├── social/ LinkedIn covery, obrázek pro sdílení └── web/ animace a sekce webu, hero-viz pro podstránky

Stáhnout vše (ZIP, 2,3 MB)

logo/ Logo – SVG a PNG 30