On this light ground the ground-side of each ramp is the light end: light steps (100–300) make tinted fills, hovers and subtle borders; 500 is each role’s base; dark steps (700–900) carry text on those tints. 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).