Bez dizajnového systému každý dizajnér a vývojár robí malé rozhodnutia sám: trochu iná modrá, nový štýl tlačidiel, iná hodnota medzier. Po roku má produkt desiatky takmer duplikátov. Dizajnový systém nahrádza tieto opakované rozhodnutia zdieľanými.
Väčšina dizajnových systémov má tri vrstvy. Tokeny dizajnu sú pomenované hodnoty, ako napríklad color.primary, space.4 alebo motion.duration.short, ktoré ukladajú prvotné rozhodnutia. Komponenty, ako sú tlačidlá, vstupy, karty a dialógy, sú zostavené z týchto tokenov a zahŕňajú každý stav. Pokyny dokumentujú, ako používať jednotlivé komponenty, ako písať štítky a správy a aké pravidlá dostupnosti platia.
Dizajnový systém žije na dvoch miestach: v dizajnovom nástroji, ako knižnica komponentov a v kóde, keď vývojári inštalujú balík. Udržať tieto dva v synchronizácii je najťažšia časť. Keď sa kódované tlačidlo prestane zhodovať s navrhnutým, ľudia prestanú systému dôverovať.
Do systému patrí aj pohyb. Trvanie, krivky nábehu a nastavenia pružiny môžu byť tokeny a interaktívne komponenty potrebujú definované správanie pre vznášanie, stlačenie, načítanie a prechody. ExodeUI, ktorý vyrábame, ukladá toto správanie do jedného otvoreného súboru so stavmi a fyzikou pružiny, takže rovnaký komponent hrá v React, Vue, SwiftUI, Flutter a ďalších frameworkoch.
Známe verejné príklady zahŕňajú Material Design od spoločnosti Google, Pokyny pre ľudské rozhranie od spoločnosti Apple, Carbon od IBM a Polaris od Shopify. Ich čítanie je dobrý spôsob, ako vidieť, ako je organizovaný vyspelý systém.