Ilman suunnittelujärjestelmää jokainen suunnittelija ja kehittäjä tekee pieniä päätöksiä itse: hieman erilainen sininen, uusi painiketyyli, toinen väliarvo. Vuoden kuluttua tuotteella on kymmeniä lähes kaksoiskappaleita. Suunnittelujärjestelmä korvaa nämä toistuvat päätökset jaetuilla päätöksillä.
Useimmissa suunnittelujärjestelmissä on kolme kerrosta. Suunnittelutunnukset ovat nimettyjä arvoja, kuten color.primary, space.4 tai motion.duration.short, jotka tallentavat raakapäätökset. Komponentit, kuten painikkeet, syötteet, kortit ja valintaikkunat, on rakennettu näistä tunnuksista ja sisältävät kaikki tilat. Ohjeissa kerrotaan, kuinka kutakin komponenttia käytetään, kuinka kirjoitetaan tarroja ja viestejä ja mitä saavutettavuussääntöjä sovelletaan.
Suunnittelujärjestelmä asuu kahdessa paikassa: suunnittelutyökalussa, komponenttikirjastona ja koodissa, paketin kehittäjien asentamana. Näiden kahden synkronointi on vaikein osa. Kun koodattu painike ei enää vastaa suunniteltua, ihmiset lakkaavat luottamasta järjestelmään.
Myös liike kuuluu järjestelmään. Kestoajat, kevennyskäyrät ja jousiasetukset voivat olla tunnuksia, ja interaktiiviset komponentit tarvitsevat määritellyn käyttäytymisen leijulle, painallukselle, lataamiselle ja siirtymille. Valmistamamme ExodeUI tallentaa tämän käyttäytymisen yhteen avoimeen tiedostoon, jossa on tilat ja jousifysiikka, joten sama komponentti toistetaan React-, Vue-, SwiftUI-, Flutter- ja muissa kehyksissä.
Tunnettuja julkisia esimerkkejä ovat Googlen Material Design, Applen Human Interface Guidelines, IBM:n Carbon ja Shopifyn Polaris. Niiden lukeminen on hyvä tapa nähdä, kuinka kypsä järjestelmä on organisoitu.