Bez systemu projektowania każdy projektant i programista samodzielnie podejmuje drobne decyzje: nieco inny kolor niebieski, nowy styl przycisków, inna wartość odstępów. Po roku produkt doczekał się kilkudziesięciu niemal duplikatów. System projektowania zastępuje powtarzane decyzje decyzjami wspólnymi.
Większość systemów projektowania składa się z trzech warstw. Tokeny projektu to nazwane wartości, takie jak color.primary, space.4 lub motion.duration.short, które przechowują nieprzetworzone decyzje. Komponenty, takie jak przyciski, wejścia, karty i okna dialogowe, są budowane z tych tokenów i obejmują każdy stan. Wytyczne dokumentują, jak używać każdego komponentu, jak pisać etykiety i wiadomości oraz jakie zasady dostępności mają zastosowanie.
System projektowy występuje w dwóch miejscach: w narzędziu do projektowania, jako biblioteka komponentów, oraz w kodzie, w postaci instalowanej przez twórców pakietu. Najtrudniejsza jest synchronizacja tych dwóch elementów. Kiedy zakodowany przycisk nie pasuje już do zaprojektowanego, ludzie przestają ufać systemowi.
Ruch również należy do systemu. Czasy trwania, krzywe łagodzenia i ustawienia sprężyn mogą być tokenami, a komponenty interaktywne wymagają określonego zachowania podczas najechania kursorem, naciśnięcia, ładowania i przejść. ExodeUI, który tworzymy, przechowuje to zachowanie w jednym otwartym pliku ze stanami i fizyką sprężyn, więc ten sam komponent działa w React, Vue, SwiftUI, Flutter i innych frameworkach.
Dobrze znane publiczne przykłady obejmują Material Design firmy Google, wytyczne dotyczące interfejsu ludzkiego firmy Apple, Carbon firmy IBM i Polaris firmy Shopify. Ich przeczytanie to dobry sposób, aby zobaczyć, jak zorganizowany jest dojrzały system.