material-design-3-color
Material Design 3 Color and Dynamic Theming
Overview
This skill guides the application of Material Design 3 (M3) Expressive color and theming principles to create vibrant, accessible, and emotionally engaging user interfaces.
Keywords: Material Design 3, M3, dynamic color, theming, color palette, Material You, accessibility, color tokens, surface colors, accent colors, fixed accent colors, emphasis colors, contrast levels
Core Principles
Dynamic Color System
Material Design 3's color system is built on the concept of dynamic color, allowing interfaces to adapt to user preferences and contexts:
- Tonal Palettes: Use five key tonal palettes (Primary, Secondary, Tertiary, Neutral, Neutral Variant) with multiple tones (0-100)
- Color Roles: Map 26+ color roles to UI elements (e.g., primary, onPrimary, primaryContainer, onPrimaryContainer)
- Adaptive Theming: Support both light and dark themes with appropriate contrast
- User Personalization: Allow color schemes to adapt based on user wallpaper or preferences (Material You)
- Fixed Accent Colors: Provide color tokens that remain consistent across light and dark themes for brand identity
More from shelbeely/shelbeely-agent-skills
material-design-3-guide
Master guide for Material Design 3 — covering the full specification from Material You foundations through M3 Expressive. Explains when to use each Material Design 3 skill subset (color, motion, typography, shape, layout, components, icons). Use this when starting a Material Design 3 project, when you need to understand which M3 skill to apply, or when the user asks about Material Design 3 in general.
30material-design-3-components
Comprehensive guide to Material Design 3 components — from baseline Material You through M3 Expressive. Covers action, containment, communication, navigation, selection, and text input components with specifications, states, and implementation guidelines. Use this when building or styling UI components following Material Design 3 guidelines.
30material-design-3-layout
Applies Material Design 3 Expressive layout, spacing, and size hierarchy principles including grid systems, responsive design, and elevation. Use this when working on page layouts, spacing, grids, responsive design, or when the user asks to apply Material Design 3 layout guidelines.
22material-design-3-typography
Applies Material Design 3 Expressive typography principles including variable fonts, type scales, and hierarchy. Use this when working on text styling, type hierarchy, readable interfaces, or when the user asks to apply Material Design 3 typography guidelines.
22material-design-3-motion
Applies Material Design 3 Expressive motion and animation principles to create natural, intuitive, and engaging user experiences. Use this when implementing animations, transitions, micro-interactions, or when the user asks to apply Material Design 3 motion guidelines.
18material-design-3-shape
Applies Material Design 3 Expressive shape and containment principles including rounded corners, morphing shapes, and container design. Use this when working on component shapes, borders, containment, or when the user asks to apply Material Design 3 shape guidelines.
17