# Design Systems & Tokens

**Track:** Systems, Strategy & Frontier — Design & Human-Centered Design — proposed (25)
**Framework / surface:** design
**Level:** Advanced
**Prerequisites:** Grids, Layout & Composition, Nielsen’s Usability Heuristics

**In one line:** Reusable components, patterns, and design tokens that scale consistency across a product.

## Theory, aesthetics & inspiration

A design system is not a style guide but a contract: a single source of truth that lets a product scale consistency without re-deciding it. Brad Frost's "Atomic Design" (2016) gave the idea its grammar — atoms, molecules, organisms — recasting a flat pattern library as a composable hierarchy that designers and engineers share. Beneath the components sit design tokens, the named variables Jina Anne coined at Salesforce in 2014 to store a decision once and distribute it everywhere — web, iOS, Android. Today that bridge is formalizing: the W3C Design Tokens Community Group's Format Module reached its first stable version in October 2025, a vendor-neutral handoff between design and code.

## References

- [Design system](https://en.wikipedia.org/wiki/Design_system)
- [Atomic Design — Chapter 2: Atomic Design Methodology (Brad Frost)](https://atomicdesign.bradfrost.com/chapter-2/)
- [Design Tokens Format Module 2025.10 — first stable version (W3C Design Tokens Community Group)](https://www.designtokens.org/tr/2025.10/format/)