De fire grunnpilarene i et designsystem er designspråk, fundament, komponenter og prosess.
Modellen nedenfor viser at for å kunne lage komponenter, så må man i bunn ha en identitet som setter føringer for personlighet og det visuelle uttrykket som komponentene skal ha. Og mellom identiteten og komponenter, har vi et lag som kalles design tokens, som er en slags oversettelse av designprofilen og en definisjon av de visuelle egenskapene som trengs for å bygge opp en komponent. Selve fundamentet som komponentene bygger på.
Denne modellen er basert på designsystemchecklist.com som lister ut alt som kan være nyttig å inkludere i et designsystem som en sjekkliste.
Designspråket handler om identiteten til en organisasjon, og hvordan man kommuniserer denne identiteten til publikum gjennom ulike flater. Et tydelig designspråk er selve kjernen i en helhetlig brukeropplevelse. Det omfatter da både den visuelle profilen, men også hvilke verdier, formål og personlighet som selskapet har.
Eksempel på hvordan Entur sin identitet og designspråk er kommunisert.
Design tokens er selve fundamentet eller grunnmuren for alle elementer i et grensensitt. Det er vanlig i designsystemer å ha flere kategorier av design tokens for å standardisere og organisere designelementer.
Det er ulike måter å strukturere design tokens på i et system, og enhver organisasjon må løse det etter hva som fungerer best for deres praksis. I modellen under vises de mest vanlige kategoriene av design tokens som ofte finnes i et designsystem med eksempler på navngiving av semantiske tokens i hver underkategori.
Eksempel på hvordan fargetokens kan se ut når de er definert som semantiske tokens (det vil si, semantisk navngiving som sier noe om når eller hvordan det skal brukes, og ikke en spesifikk HEX-kode).
Komponenter er selve byggesteinene som utgjør et grensesnitt. For å gjøre biblioteket enklere å navigere i, velger noen å organisere komponentene i overordnede kategorier utifra hvilken funksjon de har slik som knappeelementer, navigasjonselementer, skjemaelementer, layoutelementer og feedback-elementer. Modellen i bildet under tar utgangspunkt i denne inndelingen, og viser en oversikt over hvilke standardkomponenter som man bør vurdere å inkludere i sitt designsystem.
