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:
co-authored by
Claude Opus 5
parent
2e863c1f8b
commit
73e0ecca4f
@@ -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 |
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user