Design token is a named, reusable value in a design system: color, type size, spacing, radius, shadow, or contrast pairing. Instead of pasting #1A73E8 in fifty files, teams use something like color.brand.primary.
Tokens live in Figma and in code (often as CSS variables). Type tokens are typography with a name. Change the token once, and buttons, links, and alerts update together. That keeps branding consistent and makes accessibility rules easier to apply without hunting hex codes.
A real-life example of a design token
A shop’s “sale red” is slightly different on the homepage, the app, and the email footer. Nobody meant to drift; each person picked a close red. Tokens are the paint chips with names: one color.sale for every surface.
Start with color, type, and space before you tokenize everything. For how tokens sit in a broader system, see the design system entry; for eye training with hex and swatches, UI/UX games is a practical side door.