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 radius lever decides whether these stay pills.

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.

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.

Every chart colours its series from the action colour, with the lighter companions mixed from the same pick, so data visualisation stays on brand as you re-theme.

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.

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.