Design system é a biblioteca central de decisões, componentes e regras que governam como o produto se parece e se comporta. Ele inclui as fundações visuais, como cor, tipografia, espaçamento e ícone, os componentes feitos a partir delas, como botão, formulário e card, a documentação de uso e, cada vez mais, o código que implementa tudo.
O propósito prático é consistência em escala, porque sem um sistema compartilhado cada pessoa decide por conta como fazer um padrão comum, e o resultado é deriva visual, com botão que varia de tela pra tela e espaçamento sem critério. O sistema troca decisão individual por decisão compartilhada.
A peça que sustenta isso são os tokens, que são variáveis nomeadas pra guardar valores de cor, tipografia e espaço. Em vez de hex code solto no componente, o token dá um nome semântico, e, quando você muda o valor do token, ele muda em todo lugar que o usa. É justamente isso que faz rebrand e dark mode serem viáveis sem refazer tela por tela.