Material Design 3 Tonal System
Google's modern approach to color and theming
What is Material 3?
Material Design 3 introduces a tonal system where colors are derived from a single source color and automatically generate accessible, harmonious color schemes across light and dark modes.
Tonal Palette Concept
Instead of manually picking each color, Material 3 generates a palette of tones (0–100) from a source color. This ensures harmony and makes theming trivial.
Key Roles
- Primary: Main brand color (50–90 tones)
- Secondary: Supporting color
- Tertiary: Accent color for contrast
- Error: Red-based for warnings
- Neutral: Grays for backgrounds and surfaces
Tonal Field + Material 3
Tonal Field natively supports Material Design 3 exports, letting you generate production-ready Material theme configurations.