The system, as a file you can inspect.
Variables by collection and mode, text and effect styles, and every component with its variants. Nothing here is copied: it is read from tokens.css and components.css when the page loads, and resolved by the browser in each mode, so it cannot drift from the code.
Loading…
One set of names, four surfaces.
A mode is a selector that remaps the semantic variables, so no component has a dark variant. Light is the one page theme (dark mode was removed on 14 October); On-dark, Raised and Invert are surface contexts any band can carry.
Every variable, in every mode.
Choose a row to inspect it: its alias chain, values by mode, contrast, rationale and the rules that consume it. Collections with mode-specific values show a column per mode; the rest show one value.
Text and effect styles.
The type scale composed into named styles, with each spec measured off the rendered specimen.
Text
Effects
The catalog, as component sets.
Live markup from components.css. Each frame switches between modes, lists its properties, and links every variable it consumes back to the inspector.