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.
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.
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.