Design Tokens (U.S. Web Design System)
USWDS’s own page on design tokens: the practice of curating a fixed, limited set of style values — color, spacing, typography, opacity, shadow, and a handful of others — rather than allowing arbitrary values everywhere a style decision gets made.
License: CC0 1.0 Universal (public domain) — https://creativecommons.org/publicdomain/zero/1.0/
Key points
- The core idea: a design token set is a deliberately constrained palette of values, the same way a musical scale picks a limited set of named notes out of the full range of possible frequencies. Limiting the choices available at each decision point is what makes a system fast to design and build with, and it gives designers and developers a shared, named vocabulary (“space-2,” “primary-dark”) instead of each side inventing its own numbers.
- Token categories: color, spacing units, typography (family, size, line height, measure), opacity, shadow, z-index layering, and flex/order properties for layout — USWDS treats all of these as the same kind of decision (pick from a defined scale) rather than as unrelated concerns.
- Why constrain rather than allow anything: an unconstrained system lets every designer or developer pick a slightly different shade of blue or a slightly different spacing value for the same purpose, and those small inconsistencies compound across a large site into a visibly incoherent whole; a token system trades that flexibility for consistency and for faster communication between design and engineering, since both sides are choosing from the same named list rather than translating between a visual mockup’s exact pixel values and a developer’s implementation.