Series one follows the action colour, and the companions here are mixed from the same pick, so this demo stays on brand as you re-theme.

Every stroke of the sphere is a token, so presets and the colour ramps re-draw it live. Drag it, steer it with the arrow keys, or hover a marker for its callout. The flat map below carries the same seven points on the same tokens.

Surfaces, borders, and text all sit on the neutral scale: switch on the neutral tint to watch every container in this section wash toward your seed colour.

The bento tiles pair an ambient colour with a texture, so they follow the accents under Advanced colours and the elevation lever at once; press one to open it. The card stack flips through the container surface on the radius scale, and the pace of its lift follows the Motion lever.

Every action component draws from the brand ramp your colour pick rebuilds: solid fills, hover and pressed states, and focus rings all move together. The Pill buttons switch decides whether these stay pills; the radius lever shapes them when it is off.

The AI components keep their own signals on purpose: the gradient ring marks where a model answers, and the status colours keep their meaning, so the brand lever leaves both alone. Everything else about them moves with the controls, so typeface, corner radius, and the neutral tint re-theme these surfaces like any other.

{
  "query": "action colour",
  "scope": "tokens",
  "limit": 5
}

Focused borders, selected states, and checked fills all follow the action colour: focus any field to see it. The radius lever reshapes every input at once.

Active indicators, current-page markers, and hover states all derive from the same action tokens as the buttons above, so one colour pick keeps wayfinding consistent.

Panels, menus, and tips share the container surfaces and radius scale: open any of these while a tint or radius change is active and the overlay matches the page beneath it. Every panel here also wears the elevation lever, so Flat and Soft read most clearly in this section.

These are the one deliberate exception: status colours are a separate token set that keeps its meaning regardless of branding, so the brand lever doesn't move them. Info stays blue, errors stay red, while radius, tint, and typeface changes still apply.