Light steps (100–300) make tinted fills, hovers and subtle borders; 500 is each role’s base; dark steps (700–900) are for text on tints and for pressed states. In your own pages reach for a ramp step before reaching for color-mix() (the component layer uses color-mix() internally for its hover tints).