Material Design

About Material Design

Material Design builds its color system from a single source color, expressed as a 13-step tonal scale (0 to 100) plus semantic roles such as primary, secondary, tertiary, and surface. The scale keeps contrast predictable across light and dark themes.

How to use

Apply roles through generated CSS variables like --md-sys-color-primary, or use the Material Theme Builder. Reserve the darkest steps for text and the lightest for surfaces to meet WCAG contrast.