Design tokens to zapisane jako dane (a nie jako grafika) podstawowe wartości projektu: kolory, wielkości pisma, odstępy, cienie czy czasy animacji, czyli jedno źródło prawdy współdzielone przez projektantów i programistów.
Zamiast „zieleń przycisku jest mniej więcej taka jak w makiecie", token mówi precyzyjnie: color.action.primary = #00624C. Te same tokeny zasilają makiety w Figmie i kod aplikacji, więc zmiana wartości w jednym miejscu aktualizuje całość spójnie.
Tokeny to najniższa warstwa design systemu. Typowa struktura: tokeny bazowe (surowe wartości palety), tokeny semantyczne (np. background.error) i tokeny komponentów. Dzięki semantyce możliwe są motywy (np. tryb ciemny) bez przeprojektowywania ekranów.
Dlaczego to ważne: tokeny eliminują dryf, w którym po roku produkt ma czternaście odcieni szarości i nikt nie wie, który jest „ten właściwy".