Primary, surface, text, border: így építs szerepalapú színrendszert
A skálák csak nyersanyagok. A design system akkor lesz kezelhető, amikor a színeket funkcionális szerepekhez kötöd.
Röviden
A szerepalapú rendszerben nem azt mondod, hogy 'blue-600', hanem azt, hogy 'primary', 'text-muted' vagy 'surface-raised'. Így a komponens funkciója elválik a konkrét HEX kódtól.
Szemantikus színszerepek egy valódi komponensen
Ne csak nézd — manipuláld
Primary token
Picker megnyitása ↗
:root {
--background: #FFFFFF;
--surface: #F7F7F7;
--text: #171717;
--primary: #2563EB;
}
.button { background: var(--primary); }DASHBOARD / PROJECT
Új projekt
A komponens nem azt tudja, hogy „kék”. Azt tudja, hogy primary szerepet használ. Emiatt a rendszer színe cserélhető anélkül, hogy minden komponenst külön átírnál.
Mentés
Mégse
Nyers token és szemantikus token
A blue-600 egy nyers színérték, a primary pedig funkcionális szerep. Ha később rebrand vagy dark mode jön, a komponenseknek nem kell tudniuk, milyen konkrét kéket használnak; elég a szerepet hivatkozni.
Egy egyszerű webes rendszer alap szerepei
- background – oldal alapfelület
- surface – kártyák és emelt régiók
- text / text-muted – fő és másodlagos tartalom
- border – elválasztás
- primary / on-primary – fő interakció és rajta lévő tartalom
- success, warning, danger – állapotok
Az állapotszínek ne csak dekorációk legyenek
A danger vöröse semmit nem ér, ha nincs mellette ikon, címke vagy más formai jel. A szín segít gyorsabban észlelni az állapotot, de fontos információt ne kommunikálj kizárólag színnel.
A design token neve azt mondja el, mire való a szín; nem azt, hogy jelenleg hogyan néz ki.
Nyers szín token és szemantikus token nem ugyanaz
A `blue-600` egy konkrét árnyalatot nevez meg. A `primary` vagy `action-primary` viszont szerepet. Egy érett design systemben a komponensek lehetőleg a szerepre hivatkoznak, és a szerep mögött álló konkrét szín változhat témától vagy brandtől függően.
Ez teszi lehetővé, hogy light és dark módban, vagy akár több márkaváltozatnál ugyanaz a komponenslogika maradjon használható. A gombnak nem kell tudnia, hogy kék, lila vagy zöld; azt kell tudnia, hogy primary action.
Egy egyszerű weboldal minimális szemantikus készlete
- background és surface a rétegekhez
- text és text-muted a tipográfiai hierarchiához
- border a szerkezeti elválasztásokhoz
- primary és on-primary az elsődleges akciókhoz
- success, warning, danger és hozzájuk tartozó szövegszínek, ha a termék valóban használ ilyen állapotokat
Ha még az alapárnyalatokat keresed a szerepek mögé, a színpaletták gyűjteménye jó inspiráció, de a végső tokeneket mindig saját szerepeid alapján nevezd el.
Háromrétegű tokenmodell: primitive → semantic → component
Nagyobb rendszerben érdemes különválasztani a nyers színértékeket, a szemantikus szerepeket és az esetleges komponens-specifikus tokeneket. A primitive lehet `blue-600`, a semantic lehet `action-primary`, a komponensréteg pedig például `button-primary-bg`.
Nem minden projekthez kell mindhárom szint. A lényeg az, hogy a komponenskód ne véletlen színértékeket hordozzon, hanem olyan absztrakciót, amelyet később központilag át tudsz hangolni.
Az interaktív állapotoknak is legyen rendszerük
Primary nem egyetlen szín. Egy valódi gombnak default, hover, active, focus és disabled állapota is lehet, ráadásul külön foreground színnel. Ha ezek minden komponensben külön kézzel készülnek, hamar szétcsúszik a rendszer.
A semantic tokenek között ezért lehet `action-primary`, `action-primary-hover`, `action-primary-pressed` és `on-action-primary`. Ettől a design és a fejlesztés ugyanazt a nyelvet használja.
Ne a jelenlegi színt nevezd el, hanem a funkciót
Az olyan név, mint `blueButton`, rögtön összeköti a funkciót egy konkrét megjelenéssel. Ha később a brand zöldre vált, a token neve hazudni fog. A `primaryAction` vagy `buttonPrimaryBackground` hosszabb, de stabilabb jelentést hordoz.
A jó tokennév olyan szerződés a design és a kód között, amely a vizuális redesign után is értelmes marad.
A témák közötti értékcserét a dark mode színek leckében láthatod működés közben.
Gyakori kérdések
Miért jobb a primary token, mint a blue-600?
Mert a komponens funkcionális jelentéshez kötődik, így később a konkrét szín cserélhető a komponens kódjának módosítása nélkül.
Gyakorold tovább
Használd a saját szín- és palettaeszközöket
Az elmélet akkor rögzül, amikor konkrét árnyalatokon és kombinációkon is kipróbálod. Ezek a kapcsolódó ByBence oldalak ugyanennek a tananyagnak a gyakorlati folytatásai.
Források és további olvasnivaló
A webes színmodelleknél és accessibility részeknél szabványokra és elsődleges dokumentációra támaszkodj. A konkrét palettadöntéseket pedig mindig a saját felületeden, valódi komponenseken teszteld.