JiriUhlirandClaude Opus 5
f7ad429b3a
Server mel "Automia" napsanou primo v titulku Swaggeru a v OpenAPI - zbytek po prejmenovani, ktere probehlo jen na klientovi. Prejmenovat produkt tedy znamenalo hledat retezec po souborech. Dve promenne, a je to zamer: - server cte BRAND_NAME za behu, vychozi WorkNuke - klient cte VITE_BRAND_NAME pri buildu, vychozi tataz Klient je staticky soubor, takze runtime promenne containeru do prohlizece nedosahnou - proto se u nej dosazuje pri buildu. Obe maji tutéž vychozi hodnotu, takze bez nastaveni cehokoliv sedi. Zbytek firemnich udaju (claim, kontakty, adresa) zustava v brand.ts. Do promennych to nepatri, meni se to jednou za rok a env by z toho udelalo deset promennych, ktere nikdo nenastavi. Co se timhle nemeni: firma Automia v ukazkovych datech. Pozvanka ukazuje jmeno firmy, do ktere zve, a ta se v seedu jmenuje Automia - neni to zbytek po prejmenovani, je to zaznam zakaznika. Overeno: s BRAND_NAME=ZkouskaZnacky ma OpenAPI titulek "ZkouskaZnacky - portal a API" a Swagger "ZkouskaZnacky API". Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
6.4 KiB
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(vychoziWorkNuke) a pouziva ho v titulku Swaggeru a v OpenAPI, - klient cte
VITE_BRAND_NAMEpri buildu, jinak vychozi hodnotu vbrand.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 |