Design tokens are named values for color, spacing, typography, and other primitives that can be reused across tools and code. They are the atomic layer of a system: instead of writing a hex value in twenty places, the system exposes a token that resolves to that value everywhere. This abstraction is what makes consistency possible at scale, and it is also what enables theming, which means swapping values to produce alternative looks without changing component code. Tokens are usually organized into tiers. Tier 1 is the primitive layer of raw values with no semantic meaning, renamed only on major version bumps. Tier 2 is the semantic layer named for its role, such as color.text.primary or spacing.section, which is what most teams actually consume. Tier 3 is component-scoped, bound to a single component's needs. Alias tokens point to other tokens to share values while preserving semantic naming for swap-ability.
The single source of truth debate asks whether design tools or code should hold the canonical tokens, and the practical answer is increasingly a JSON file managed in Git and consumed by both sides. The W3C Design Tokens community specification defines a portable JSON format that lets tools exchange tokens, and Style Dictionary, an Amazon-built tool, transforms a single token source into platform-specific outputs for CSS, iOS, Android, and more. Tokens Studio brings this workflow into Figma, syncing tokens between design files and a code repository. Token transforms are pipeline steps that rewrite tokens for a specific platform, such as converting pixels to rems or color formats. The result is platform parity, where the same component behavior and look across web and mobile emerges from per-platform implementations aligned to one design source.
Theming is one of the most valuable capabilities that tokens unlock. Dark mode implementation defines dark-mode token values, ensures contrast ratios, and adjusts component behavior, for example, expressing elevation as a tint rather than a shadow. Multi-brand theming supports multiple brand identities through runtime or build-time token swaps. Context-aware theming adapts to user preference, system setting, or page area, such as an inverted hero section. Elevation tokens represent perceived layering, often encoded as shadow stacks or a tint plus blur amount. Shadow tokens are composite values of offset, blur, and color for a single elevation level. Z-index tokens name stacking levels like modal, dropdown, and toast so layering stays consistent without arbitrary integers scattered through code.
Visual rhythm comes from disciplined scales. A spacing scale is a geometric or linear progression of values used everywhere to enforce rhythm. A type scale is a modular progression of font sizes, often based on ratios like 1.25 or 1.333, that establish visual hierarchy. A fluid type scale uses CSS clamp to scale smoothly with the viewport, avoiding fixed breakpoints. A baseline grid aligns type to a common vertical rhythm that increases polish in dense layouts. The 8-point grid makes all spacing multiples of eight for easy mental math and alignment with most platform default densities, while a 4-point grid is common when finer increments are needed for icons or dense data UI. Density modes offer compact, comfortable, and spacious variants of components for different data densities, set through a token swap. Responsive component design uses container queries so components adapt internally to their container width rather than the viewport, enabling real component-level responsiveness as part of Jen Simmons' framing of intrinsic web design.