Principles
Browse the knowledge base by principle.
Accessibility — Principles
Non-negotiable requirements every design system must satisfy: WCAG 2.2 AA conformance, keyboard operability, focus visibility, touch target sizing, semantic structure, motion accommodation, and text readability.
AI — Principles
Two documents covering the intersection of design systems and AI: one on designing UI for products with AI features, one on structuring a design system so AI tools produce consistent output from it.
Color Architecture — Principles
How to design a color system that is accessible, themeable, and honest about the tradeoffs of different architectural approaches. This section synthesizes patterns from multiple production design systems and the underlying color science into a system-agnostic framework.
Content Design
How to write UI copy that serves users rather than impresses them. This section synthesizes patterns from production content design systems — MailChimp, Shopify Polaris, and industry writing practice — into principles that apply regardless of which design system or brand you're working in.
Depth and Elevation — Principles
The two elevation models (shadow-based vs. tonal surface layering), when to use each, the hybrid approach for products with both light and dark modes, layering rules, and a z-index scale pattern.
Motion Architecture — Principles
Easing curve semantics, duration guidelines, functional vs. expressive motion stance, and the non-negotiable `prefers-reduced-motion` requirement.
Visual Quality — Principles
Frameworks for evaluating whether design system decisions are specific and intentional versus generic AI defaults. This section provides the vocabulary and tests to identify low-quality token choices before they become embedded in the system.
Shape Architecture — Principles
Border radius as a product personality signal, scale approaches (named semantic tiers vs. numeric steps vs. global factor), component consistency rules, and when to use full-radius (pill) shapes.
Spacing and Layout — Principles
How to design a spacing system that functions as a unified coordinate system across component-internal, component-to-component, and layout-level spacing decisions.
Token Architecture — Principles
How to structure a design token system that stays useful as the system grows. This section synthesizes patterns from multiple production design systems into a system-agnostic framework for token architecture decisions.
Typography Architecture — Principles
How to structure a type system that works at scale — from density axis and scale construction through role taxonomy, legibility constraints, variable fonts, and the relationship between typography and spacing.
Visual Language — Principles
Frameworks for translating a positioning brief into specific visual directions before any token values are generated. This section provides the vocabulary and structured process for moving from abstract brand stance language to concrete preliminary decisions about color, typography, shape, and surface treatment.