Skip to main content
This step is required. The runtime call sequence writes solved values to :root, but no element picks them up automatically — each one opts in. Two attributes are the entire contract:
data-ucs opts the element into the Substrate cascade. It takes no value. data-mode is the element’s mode list — a space-separated set of tokens matched with ~=, so tokens compose orthogonally: data-mode="danger card frosted" is a danger-intent card with a frosted material. One attribute carries the full per-element mode composition: The conventional intent roles are brand, neutral, danger, warning, success, info, and beta, with brand-specific roles generated alongside them; the kernel’s mode resolver accumulates every active token’s effects in order (system modes first, component modes second).
One thing data-mode does not carry: the preference axes themselves. A brand preset token like dark applies that level’s property deltas, but the resolver explicitly excludes scheme and contrast-factor from token effects — light/dark position and contrast remain preference values on the vector, and there is still no theme attribute in Substrate.

​
Attributes the runtime writes

You author data-ucs and data-mode; the runtime owns the rest:

​
Styling with the solved values

Your own CSS composes from the same primitives the attributes activate — see Web for the calc() composition patterns, and the Color Token Reference for every variable an intent produces.

Runtime & Imports

The required call sequence that writes the values these attributes consume.

Surface Component

Required when a surface nests inside another — re-solves contrast locally.