csbot-prototype/documentation/22-znacka-a-design.md

22 - Znacka a design

Naprogramovano. Navrh, ze ktereho to vzniklo, je artefakt "WorkNuke Rebrand".

Tenhle dokument popisuje, jak znacka funguje v kodu - kde se meni barvy, pismo a znak, a co se pri prejmenovani menit nesmi.

Kde se meni vzhled

Co	Kde
Barvy, pismo, utility	web/src/index.css
Znak a slovni znacka	web/src/components/layout/Logo.tsx
Kontakty a fakturacni udaje	provozovatel portalu v Nastaveni, Firmy (GET /api/public/brand)
Nazev, claim, zaloha kontaktu	web/src/config/brand.ts
Nazev na serveru	BRAND_NAME, vychozi v src/config.ts
Titulek a fonty stranky	web/index.html

Zmena barevnosti celeho webu i portalu je zmena hodnot v index.css. Web i portal stoji na tychz tokenech, takze se projevi naraz na obojim.

Nazev je na dvou mistech, a je to zamer

Klient je staticky soubor, takze runtime promenne containeru do prohlizece nedosahnou. Proto:

• server cte BRAND_NAME (vychozi WorkNuke) a pouziva ho v titulku Swaggeru a v OpenAPI,
• klient cte VITE_BRAND_NAME pri buildu, jinak vychozi hodnotu v brand.ts.

Obe maji tutéž vychozi hodnotu, takze bez nastaveni cehokoliv sedi.

Pozor na zamenu s firmou v datech. Pozvanka ukazuje jmeno firmy, do ktere zve, a ukazkova firma se jmenuje Automia. Neni to zbytek po prejmenovani, je to zaznam zakaznika - zadna promenna znacky ho nemeni.

Kontakty bere web z provozovatele, brand.ts je jen zaloha

Kontaktni a fakturacni udaje uz nejsou natvrdo v kodu. Zdrojem je firma oznacena jako provozovatel portalu (Tenant.portalOperator, nastavuje spravce platformy v Nastaveni, Firmy - viz 07-firmy-a-prava.md). Server je vraci bez prihlaseni z GET /api/public/brand s Cache-Control na minutu, aby se zmena projevila bez restartu a bez noveho buildu klienta.

Pole z provozovatele	Odkud na firme
name, legalName	name (obchodni jmeno, zvlastni pole neni)
ico, dic, address, legalForm	udaje z ARES nebo rucne
email, phone, website	contactEmail, contactPhone, website

Na klientovi to sklada useBrand() (web/src/hooks/useBrand.ts): vraci hned statickou hodnotu z brand.ts, po odpovedi serveru ji po polich vymeni - null ze serveru nechava zalohu, takze castecne vyplneny provozovatel nerozbije paticku. Bez provozovatele nebo bez odpovedi zustane brand.ts cely. Nacita se jednou za nacteni stranky a sdili pres useSyncExternalStore, aby paticka, kontakt a vyzva k akci neposlaly tri stejne dotazy.

Pouziva ho Contact, Footer, CallToAction, About, Login, Logo a usePageMeta. Kdo pise novy kus webu s kontaktem, bere useBrand(), ne brand primo.

Co zustava staticke v brand.ts a provozovatel to nema: claim, description, founded, social a support (otevirajici doba, SLA). Jsou to texty znacky, ne udaje firmy. Adresa ze serveru je jedna textova radka, staticka zaloha ma tri (ulice, PSC a mesto, zeme); website zaloha nema, bez provozovatele je null.

Kontaktni formular na webu (pages/Contact.tsx) ma vedle poli i vyber priloh (FilePicker, nejvys 3 soubory po 5 MB) a poptavka konci jako ticket provozovatele, viz 06-tickety.md.

Barvy

Token	Hodnota	K cemu
brand-400	#B7FF3C	Akcent. Jedina hlasita barva na strance.
ink-900	#0F1411	Podklad. Cerna do zelena, ne do modra.
ink-600	#2E3A32	Linky a ohraniceni
ok-400	#2DD4BF	Stav "v poradku"
warn-400	#FBBF24	Stav, ktery chce pozornost
danger-400	#FB7185	Chyba

Proc je "v poradku" modrozelene a ne zelene. Akcent je zeleny. Kdyby byl zeleny i stav, byly by na jedne obrazovce dve zelene, kazda o necem jinem, a nikdo by je nerozlisil. Akcent znamena "tady se neco stane", stav znamena "takhle to dopadlo".

Sedy odstin ma zelenou prichut. Neni to nahoda ani chyba prevodu: seda s naznakem odstinu podkladu drzi paletu pohromade, ciste neutralni seda vedle zelenocerne pusobi spinave.

Druhy akcent uz neni barva

accent-300 az accent-600 ukazuji do teze zelene rady jako brand-*. Klice zustaly, protoze je pouziva 341 mist v kodu; nechat je namirene na fialovou by znamenalo dve akcentove barvy, prepsat je vsechny naraz zbytecne velkou zmenu. Az se ta mista projdou, klice zmizi.

Totez plati pro utilitu text-gradient: uz negeneruje prechod, ale plnou zelenou. Nazev zustal, aby se osm mist nemuselo prepisovat.

Pismo

Role	Pismo	Kde
Nadpisy	Archivo 800	h1 az h4, trida font-display
Text	IBM Plex Sans	vychozi pismo dokumentu
Cisla a ID	IBM Plex Mono	casy, ID ticketu, nadtitulky

Nadpisy maji letter-spacing: -0.035em a line-height: 1.04. Prave tesny proklad delal v predloze ten rozdil; Inter takhle tesne nejde bez trikareni.

Plex Sans a Plex Mono jsou od jednoho autora, takze spolu ladi bez ladeni.

Znak

Plocha bomba mirici k zemi: nos vlevo dole, tri kridelka vpravo nahore, tri odletove cary u nosu. Kresli se svisle a otoci o 45 stupnu, aby se geometrie dala cist a upravovat.

Je plochy zamerne, ne render. Plochy znak snese jakoukoliv velikost, obarvi se jednou promennou (currentColor) a nezestarne s modou na 3D.

LogoMark je samostatny export, takze se da pouzit i mimo hlavicku - napriklad uvnitr snimku portalu v heru.

Hero

Prvek	Jak to je
Nad nadpisem	Verzalkova radka v mono, prokladana
Nadpis	Dve slova na radek, druhy radek zeleny
Tlacitka	Jedna zelena pilulka plus textovy odkaz
Pod textem	Ctyri slovesa s ikonou a jednou vetou
Snimek	Vybiha z prave hrany
Pozadi	Tri zelene radialni prechody, zadna mrizka

Zare je pozadi sekce, ne vrstva pod ni. Prekryv se zapornym z-indexem se schoval za podklad stranky a nebyl videt. Element se svym vlastnim pozadim tenhle problem nema.

Snimek vybiha z hrany schvalne. Oriznuty pusobi jako vyrez z neceho vetsiho, cely v ramecku pusobi jako obrazek.

Ctyri slovesa

Sbira, Automatizuje, Propojuje, Deleguje. Neni to marketingova ozdoba, jsou to ctyri kroky, ktere portal opravdu dela:

Sloveso	Co za tim v portalu je
Sbira	Udalosti, spoustece, webhooky
Automatizuje	Skripty konektoru
Propojuje	Strom kroku v builderu
Deleguje	Tickety a prirazeni lidem

Kdyz se ctverice zmeni, musi se zmenit i tady - jinak web slibuje neco jineho, nez aplikace dela.

Co se pri prejmenovani nemeni

Vypada to jako jmeno, ale jsou to identifikatory:

Co	Proc zustava
automia.token	Prejmenovani odhlasi vsechny prihlasene
automia.tenant	Zapomnela by se vybrana firma
tnt_automia	Sedi v ticketech, automatizacich i rozlozeni
/apps/csbot-prototype	Verejna adresa a routovani v Caddy, viz AGENTS.md
Ukazkove ucty	Prihlasovaci e-maily v seedu. Data, ne texty.

Firma Automia v datech je neco jineho nez produkt WorkNuke. Je to zaznam zakaznika v ukazkovych datech a prejmenovat ho nema duvod.

Co chybi

Chybi	Poznamka
Materialy mimo web	prezentace, obrazky pro socialni site
Domena	worknuke.cz v brand.ts jako zaloha, web provozovatele az z Nastaveni
Prochazeni accent-*	341 mist, ktera uz nemaji duvod pouzivat druhy klic

Rozmazani jen tam, kde neco prekryva

.glass je podklad skoro kazdeho panelu a nema backdrop-filter.

Puvodne mel blur(14px), jenze pod kartami je plna barva (bg-ink-950 na dashboardu): rozmazavala se jednolita plocha, zadny rozdil videt nebyl a kazda karta si za to drzela vlastni rozmazanou vrstvu ve skladaci. Pri dvaceti kartach na obrazovce to vytizilo GPU natolik, ze vedle portalu sekalo prehravani videa.

Na dashboardu nema backdrop-filter nic, ani lepici hlavicka. Rozmazani zustalo jen na verejnem webu, kde neni zadny stream ani dialog:

Kde	Trida
lepici hlavicka webu	backdrop-blur-xl
prekryv menu na verejnem webu	backdrop-blur-xl

Duvod je dialog. Jeho prekryv (bg-ink-950/85) lezi pres cely viewport, tedy i pres hlavicku. Rozmazana vrstva pod prekryvem se prepocitava pri kazdem prekresleni pod nim, a v otevrenem dialogu se prekresluje porad: blika kurzor ve fokusovanem poli, toci se kolecko obnovy dat, prichazi bublina udalosti. Bez dialogu se hlavicka neprekresluje a rozmazani nic nestoji, s dialogem bezelo cely cas a vedle portalu sekalo video. Plna barva hlavicky (bg-ink-900) vypada pod tmavym prekryvem stejne a nestoji nic. Tecka a znacka "Zive" v hlavicce byly odstraneny uplne.

Zadna nekonecna animace nad velkou rozmazanou plochou. Zare na prihlaseni a na webu jsou staticke: animovat pruhlednost objektu s blur(120px) znamena prepocitavat obrovskou vrstvu porad dokola, i kdyz se na strance nic nedeje.

Kdo ma v systemu vypnute animace (prefers-reduced-motion), nedostane ani ty zbyle.