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.

Rozmazani patri jen tam, kde pod nim neco opravdu projizdi:

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

Podklad modalu a prekryv menu v portalu rozmazani nemaji: je to vrstva pres celou obrazovku a pod ni lezi hlavicka, ktera rozmazana je. Kazda animace pod dialogem (pulz tecky "Zive", spinner, obnova seznamu) pak nutila prohlizec prepocitat rozmazani cele plochy, jeste pres to druhe - a vedle portalu sekalo video pri kazdem otevrenem dialogu. Tmavy prekryv s vyssim krytim (bg-ink-950/85) dela tutez praci zadarmo. Ze stejneho duvodu tecka "Zive" nepulzuje: pulz ma jen stav, kdy se spojeni teprve navazuje nebo obnovuje.

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.