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). 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.