Rebrand na WorkNuke: zelena znacka a prestavene hero

Prevzeti vizualniho smeru z predlohy. Web i portal stoji na tychz tokenech,
takze zmena hodnot v index.css se projevila naraz na obojim - portal je
zeleny, aniz by se sahlo na jedinou jeho komponentu.

Znacka a tokeny:
- akcent z cyanove na zelenou #B7FF3C, podklad z modrocerne na zelenocernou
  #0F1411. Seda dostala zelenou prichut, aby vedle podkladu nepusobila spinave.
- druhy akcent a text-gradient se nemazaly, jen presmerovaly do zelene rady.
  Pouziva je 341 mist a prepsat je vsechna kvuli barve by byla zbytecne velka
  zmena; fialova z nich zmizela tak jako tak.
- stav "v poradku" je nove modrozeleny. Akcent je zeleny a dve zelene na jedne
  obrazovce, kazda o necem jinem, nikdo nerozlisi.
- pismo Archivo na nadpisy, IBM Plex Sans na text, IBM Plex Mono na cisla a ID.
  Nadpisy maji tesny proklad, ktery Inter neumel bez trikareni.
- znak je plocha bomba misto pismene v gradientnim ctverci. LogoMark je
  samostatny export, aby sel pouzit i uvnitr snimku v heru. Novy favicon.
- primarni tlacitko je plna zelena misto prechodu ze dvou barev.

Hero a navigace:
- prokladany nadtitulek misto odznaku, dvouslovne radky nadpisu, jedno
  primarni tlacitko plus textovy odkaz, ctyri slovesa misto tri odrazek
  a snimek portalu vybihajici z prave hrany.
- navigace je pri levem okraji a bez pilulky za aktivni polozkou. Jedina
  pilulka na liste je primarni akce.

Opraveno u toho:
- zare v heru je pozadi sekce, ne vrstva pod ni. Prekryv se zapornym
  z-indexem se schoval za podklad stranky a nebyl videt vubec.
- presah snimku se pocita ze sirky kontejneru. Pevna hodnota ve vw stacila
  na notebooku, ale nad 1600 px se snimek vesel do postranni mezery
  a prestal byt oriznuty.

Zamerne nezmeneno: klice v prohlizeci (automia.token, automia.tenant), ID
firmy tnt_automia, ID aplikace csbot-prototype a prihlasovaci e-maily
v ukazkovych datech. Vypadaji jako jmeno, ale jsou to identifikatory.

Popis, jak znacka funguje v kodu, je v documentation/22-znacka-a-design.md.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
JiriUhlir
2026-08-26 09:56:23 +02:00
co-authored by Claude Opus 5
parent 2e863c1f8b
commit 73e0ecca4f
11 changed files with 640 additions and 174 deletions
+129
View File
@@ -0,0 +1,129 @@
# 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` |
| Nazev, kontakty, claim | `web/src/config/brand.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.
## 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`, ale nikde neni nasazena |
| Prochazeni `accent-*` | 341 mist, ktera uz nemaji duvod pouzivat druhy klic |
+41
View File
@@ -2,6 +2,47 @@
Nejnovejsi nahore.
## 2026-08-26 - rebrand na WorkNuke
Prevzeti vizualniho smeru z predlohy. Popis, jak znacka funguje v kodu, je
v [22-znacka-a-design.md](22-znacka-a-design.md).
### Zmeneno
- **Barevnost.** Akcent z cyanove na zelenou `#B7FF3C`, podklad z modrocerne
na zelenocernou `#0F1411`. Web i portal stoji na tychz tokenech, takze se to
projevilo naraz na obojim.
- **Druhy akcent uz neni barva.** `accent-*` ukazuje do teze zelene rady jako
`brand-*`. Klice zustaly, protoze je pouziva 341 mist; prepsat je vsechny
naraz by byla zbytecne velka zmena. Totez u utility `text-gradient`, ktera
uz negeneruje prechod, ale plnou zelenou.
- **Stav "v poradku" je modrozeleny.** Akcent je zeleny, a dve zelene na jedne
obrazovce, kazda o necem jinem, nikdo nerozlisi.
- **Pismo.** Archivo na nadpisy, IBM Plex Sans na text, IBM Plex Mono na cisla
a ID. Nadpisy maji tesny proklad, ktery Inter neumel bez trikareni.
- **Znak.** Plocha bomba misto pismene v gradientnim ctverci. `LogoMark` je
samostatny export, aby sel pouzit i uvnitr snimku v heru.
- **Tlacitko.** Plna zelena misto prechodu ze dvou barev. Prave tim vystupuje
z rady.
- **Hero.** Prokladany nadtitulek misto odznaku, dvouslovne radky nadpisu,
jedno primarni tlacitko plus textovy odkaz, ctyri slovesa misto tri odrazek
a snimek portalu vybihajici z prave hrany.
- **Navigace** je pri levem okraji a bez pilulky za aktivni polozkou. Jedina
pilulka na liste je primarni akce.
- **Nazev, claim a kontakt** v `brand.ts`.
### Opraveno u toho
- **Zare v heru je pozadi sekce, ne vrstva pod ni.** Prekryv se zapornym
z-indexem se schoval za podklad stranky a nebyl videt vubec.
### Co se zamerne nezmenilo
Klice v prohlizeci (`automia.token`, `automia.tenant`), ID firmy `tnt_automia`,
ID aplikace `csbot-prototype` a prihlasovaci e-maily v ukazkovych datech.
Vypadaji jako jmeno, ale jsou to identifikatory. Duvody jsou
v [22-znacka-a-design.md](22-znacka-a-design.md).
## 2026-08-26 - prepinac firmy: do sidebaru a prekresli obsah cely
Dodelavka predchoziho bodu. Tvrzeni "prepinac plati pro cely system" nebylo