What problem does it solve? Designing accessible, consistent color systems for light and dark themes is error-prone when developers hard-code hex values and skip contrast validation. This Skill provides the complete Material Design 3 (M3) Expressive color framework—tonal palettes, 26+ color roles, fixed accent colors, and contrast levels—so interfaces meet WCAG requirements and support dynamic theming. ## Core Features & Use Cases - Complete M3 Color Token System: Implements all five tonal palettes (Primary, Secondary, Tertiary, Neutral, Neutral Variant) mapped to 26+ semantic color roles as CSS custom properties for light and dark themes. - Accessibility-First Theming: Standardizes three contrast levels (standard, medium, high) and enforces WCAG contrast ratios with proper "On" color pairings. - Ready-to-Use Assets: Ships a tokens.css file based on the orange baseline palette (#FF9800) that can be copied directly into a project and customized. - Use Case: When building a Next.js app with a design system, use this Skill to generate the full M3 token set, wire up dark mode via data-theme="dark", and apply surface container hierarchy to cards, dialogs, and snackbars. ## Quick Start Apply Material Design 3 color tokens to my app's stylesheet using the included tokens.css and set up light and dark theme support.
