# 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`            |
| 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.

## 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 |