Цветовая система Material Design строится из одного исходного цвета и выражается 13-ступенчатой тональной шкалой (от 0 до 100) плюс семантические роли: primary, secondary, tertiary и surface. Шкала держит контраст предсказуемым в светлой и тёмной темах.
Как использовать
Применяйте роли через сгенерированные CSS-переменные вроде --md-sys-color-primary или Material Theme Builder. Самые тёмные ступени — для текста, самые светлые — для поверхностей, чтобы выполнить требования WCAG.