Interactive elements cannot have just one color. A primary button or clickable table row moves through multiple user interaction states:
color-interactive-primary).color-interactive-hover $\rightarrow$ typically 8–10% darker in light mode, or 8–10% lighter in dark mode).color-interactive-active $\rightarrow$ slightly darker/deeper saturation to simulate physical depression).color-focus-ring with 2px offset).color-interactive-disabled $\rightarrow$ reduced opacity or neutral gray, with cursor: not-allowed).In a mature token system, state colors are authored as dedicated semantic tokens rather than ad-hoc CSS filters.
Level 3 · Design Tokens & Foundations