State layer
Tabs organize and manage content within an interface, allowing users to navigate between different sections or views without leaving the current page.
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.
