State layer
State layer communicates interactive states by applying a semi-transparent overlay above a component's content. It adapts across container types and scales for light and dark mode.
Subtle
State changes are lightweight and distinct.
Additives
If multiple states occur simultaneously, like selected and hover, each will be clear and obvious.
Consistent
State changes are similar across components throughout the system.
Color fill
For elements with a container, a state-layer is added above the content. Each state increases the opacity by 4%. Dark mode uses white (#FFF) for the interaction layer instead of black.
Graphics
Graphic elements use a heavier scrim to account for the variation in contrast and detail. Light and dark mode use black (#000).
No container
Elements that do not have a container, like links or pagination, use opacity to indicate a change in state. Light and dark mode use 60% opacity for hover states. The focused state does not receive the opacity shift.
