A short, practical introduction to design systems — the single source of truth for how a product looks and behaves. Learn what goes in one, how design tokens hold a brand's decisions, and how a reusable component library (organized with atomic design) turns those decisions into consistent UI.
Design systems are built from CSS and components — these come first.
What Is a Design System?
A design system is the single source of truth for how a product looks and behaves — learn what goes in one, why teams build them, and how tokens, components, and guidelines fit together.
Design Tokens
Design tokens are the named, reusable values behind a UI — learn how naming colors, spacing, and typography as tokens (often CSS custom properties) makes a product consistent and themeable, including dark mode.
The Component Library & Atomic Design
Turn tokens into reusable UI — learn what makes a component reusable, how atomic design organizes a library from atoms to pages, and why documentation is what makes a system actually get used.