Toggle

One setting, on or off. A round knob in a pill track with a thin black border; on fills the track black and moves the knob right.

Parts

Part	Markup	Look
Toggle	`button.sys-toggle` with `role="switch"` and `aria-checked`	13px caps label, 44px tall hit area
Track	`.sys-toggle__track`, first inside the button	40 × 22px pill, thin black border, white; black when on
Knob	Drawn by the track	14px black circle; white and 18px to the right when on

The label names the setting, never its state: “Motion”, not “Motion on”. The track shows the state.
It acts at once. No Save button after a toggle; if a change needs confirming, use a checkbox in a form instead.
Toggle or content switcher? One setting, on or off, is a toggle. Choosing between named views is a content switcher.
Track first, label after. The track is a pill, like a tag, an exception to square corners; no accent color for on. Black is the one active state, as in the content switcher.
The label turns magenta on hover (yellow on black). Disabled toggles drop to 40% and don’t respond.
Motion: the knob slides in 260ms with a slight overshoot, and stretches toward where it’s going while pressed. With reduced motion it just switches.
Use a real <button> with role="switch" and flip aria-checked in script; the styles follow the attribute.