Stashpeak design tokeny v kostce

Proč všechny projekty Shieldxx sdílejí stejný odstín fialové. Záznam rozhodnutí v jediném článku.

Když vyvíjíte více produktů paralelně, je snadné sklouznout k tomu, že každému dáte vlastní vizuální identitu. Sám jsem to nějakou dobu zkoušel – Stashpeak měl svou charakteristickou fialovou, SimLauncher sytě zelenou a shieldxx.net měl být laděný do modra. Výsledkem byly tři různé ekosystémy, tři brandingová rozhodnutí a tři samostatné zdroje pravdy.

Po několika měsících jsem se však rozhodl vše sjednotit pod jednotný Stashpeak Design System.

Co tokeny řeší

Především jednu zásadní věc: odstraňují potřebu se neustále znovu rozhodovat. Když teď přidávám novou stránku na shieldxx.net, nemusím vůbec přemýšlet nad konkrétním odstínem fialové. Jednoduše použiji --color-accent a mám hotovo. A pokud se v budoucnu rozhodnu pro změnu, upravím ji na jediném místě a automaticky se promítne napříč všemi projekty.

Co konkrétně sdílíme

--color-accent: #ad46ff – primární fialová (primary purple)
Sadu skleněných povrchů (glass surfaces) – --glass-bg, --glass-border, --header-glass-bg
Zaoblení rohů (radii) – --radius-control (14px), --radius-card (20px), --radius-pill
Typografickou škálu (type scale) – Display/Hero (56px), Heading/L (28px), Body/Base atd.

Jediným zdrojem pravdy (source of truth) je Figma soubor s Foundations. Kdykoli dojde ke změně ve Figmě, ručně ji přenesu do tokens.css.

Co dál

Dalším krokem je tento přenos automatizovat. Pravděpodobně to vyřeším propojením přes Figma API, pomocným skriptem a automatickým Pull Requestem. To už je ale spíše inženýrská výzva než designové rozhodnutí, takže na to nijak nespěchám.