All foundations
THE FOUNDATION

State layers

Feedback for every interaction.

Version 1

About state layers

A state layer is a translucent overlay between a container’s background and its content. It creates consistent interaction feedback without requiring a separate color token for every state.

Anatomy of a state layer

A translucent layer sits above the container and below the content. Only this middle layer changes opacity. Labels and icons remain fully opaque.

1Content · label and icon
2State layer · foreground color × opacity
3Container · background color
Three independent layers1. Content 2. State layer 3. Container. Decorative layers must not intercept pointer input.

Interaction states

The source documents default, hover, pressed, and selected layers. Focus uses an additional visible indicator. Selected states also need the corresponding semantic state, such as aria-selected or aria-pressed.

Continue opacity: 0%
Default · 0%The state layer is transparent.
Continue opacity: 15%
Hover · 15%A pointer is over the interactive surface.
Continue opacity: 20%
Pressed · 20%The control is being activated.
Continue opacity: 5%
Selected · 5%The control represents an active choice.

The documented selected value is 5%, but the captured global table omits a matching primitive. These are documented visual values; the opacity collection still needs reconciliation before it is exported as verified source tokens.