Foundational design system architecture — token hierarchies, theming infrastructure, token pipelines, and governance. Use when creating design tokens, implementing theme switching, setting up Style Dictionary, or establishing multi-brand theming. Triggers on design tokens, theme provider, Style Dictionary, token pipeline, multi-brand theming, CSS custom properties architecture.
- Initial release of foundational design system architecture patterns. - Covers token hierarchies (primitive, semantic, component), theming infrastructure, token pipelines, and governance. - Includes practical patterns for React theme switching, SSR FOUC prevention, multi-brand theming, and Style Dictionary pipelines. - Provides accessibility token strategies and standardizes token naming conventions. - Outlines token governance workflow for scalable, maintainable design systems.