What a design system actually is
It's a small set of decisions — colors, type scale, spacing, radii, shadows — expressed as named variables (tokens), plus components built only from those variables. Screens are compositions of components. Change a token, and hundreds of screens update consistently. That's why an AI agent with a token file can generate coherent screens instead of a patchwork.
Tokens
--radius-md: 12px, --color-brand, --space-2. Roughly 30–60 tokens describe an entire visual language.
Type scale
Each heading step multiplies by a ratio. At ratio 1.25 from 16px: 16 → 20 → 25 → 31.3 → 39.1px. One number, five sizes.
Spacing grid
All gaps are multiples of one unit (usually 4 or 8px). Padding 2×, gaps 3×, sections 8×. Rhythm comes free.
Components
Buttons, cards, nav bars — each reads tokens, never hard-codes values. This is the contract that keeps 200 screens consistent.
Worked example: the 1.25 ratio
Base size 16px, modular scale ratio r = 1.25:
step(n) = 16 × rn → body 16px, h4 20px, h3 25px, h2 31px, h1 39px.
Bump the ratio to 1.333 and the same formula yields 16 / 21 / 28 / 38 / 51px — a more dramatic, editorial feel. One token edited, the whole hierarchy re-tuned. That is the leverage AI design tools exploit: they reason over ~50 tokens, not 5,000 pixel values.
Why this matters for builders
Agencies charge $15k–$60k for a mobile app design partly because consistency is labor-intensive by hand. With a tokenized system, consistency is structural. Your judgment shifts to the decisions that still need taste: which hue, which ratio, which tone of voice. Drag the scene above — every screen shares the same tokens, which is exactly why they feel like one product.