Theme Customization
Material Design 3 is built for customization. Starting from a single seed color, you can generate a complete color scheme, then further customize typography, shape, motion, and component styles to express your brand while maintaining M3's usability foundations.
6 flow steps6 topics5 brand guidesM3 Exclusive
Customization Areas
Color SchemeExtended ColorsShapeTypographyMotionComponent Theming
Making M3 Your Own
Material Design 3 is designed to be customized. Unlike previous versions, M3 provides a systematic approach: start with a single seed color and the system generates an entire harmonious color scheme. From there, you can customize typography, shape, motion, and individual component tokens to express your brand identity.
Seed-to-Scheme Flow
1
Choose a Seed Color
Select a brand color as the seed. This single input color defines the hue for all generated palettes.
2
Generate Tonal Palettes
The seed is analyzed in HCT space. Five tonal palettes are generated: Primary, Secondary, Tertiary, Neutral, and Neutral Variant, each with 13 tones.
3
Assign Color Roles
Specific tones from each palette are assigned to semantic roles (primary, on-primary, surface, etc.) for both light and dark modes.
4
Add Custom Colors
Optionally add extended colors (success, warning, brand-specific) by providing additional seed colors that generate their own tonal palettes.
5
Export Tokens
Export the complete color scheme as design tokens in your target format: CSS, Kotlin, Dart, Swift, or JSON (DTCG).
6
Integrate in Code
Apply the exported tokens to your app's theme configuration. M3 libraries on all platforms accept custom color schemes.
Customization Topics
Brand Integration
Logo Color
Extract your brand's primary color from your logo and use it as the M3 seed color. The generator will create harmonious secondary and tertiary palettes automatically.
Use Material Theme Builder's color picker to sample your logo, then refine the seed color in HCT space for optimal tonal palette generation.
Brand Typography
Replace the M3 type scale fonts with your brand fonts. Map your display/heading font to the Display and Headline roles, and your body font to Body and Label roles.
Override the md.sys.typescale.* tokens with your brand font specifications while maintaining M3's size, weight, and tracking ratios for readability.
Illustration Style
Adapt your illustration style to use colors from the generated M3 scheme. Use primary, secondary, and tertiary containers as illustration background fills.
Pull illustration colors from the tonal palettes at tones 80–95 (light mode) or 10–30 (dark mode) to ensure illustrations harmonize with the UI.
Iconography
Use Material Symbols as a base and customize weight, grade, and optical size to match your brand's visual density. You can also use custom icon sets.
Set icon color to the on-surface or on-surface-variant role. Use the FILL axis for selected states and WGHT axis to match your typography weight.
Photography & Imagery
Let Dynamic Color extract palettes from content images to create contextual color schemes that shift based on displayed imagery.
On Android 12+, use content-based dynamic color to generate schemes from hero images. On other platforms, pre-compute palettes from key brand images.