JiriUhlirandClaude Opus 5
73e0ecca4f
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>
5.7 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 |
| 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 |