Component · Token Inspector

01 · Hover · lock · raw-auditthree modes

Primary action

Token-mapped button. Hover to read the recipe.

Search input

Surface tier 3 background, line-strong border.

Status badge

Accent-2 chroma, surface-pinned background.

Active

Avatar card

Cosmos · agent

Surface chip

Reads --ink-dim on tier 3.

tier 3

Ghost action

Outlined variant — same token recipe, lighter ink.

hover any tile

UsageAPI surface

Authoring contract

Any element you want the inspector to describe gets a data-tokens attribute — a JSON map of css-property → token-name. The inspector listens at the stage level, walks up from event.target, and renders the nearest annotated ancestor. data-name sets the panel title. In raw-audit mode, descendants without data-tokens get the spotlight. Lock with click or Enter.

Hook	Values	Effect
`data-mode` on stage	hover · lock · audit	Inspection style.
`data-tokens` on element	JSON map	Property-to-token recipe shown in overlay.
`data-name` on element	string	Title in the overlay.
JS event	`ti:inspect`	Fires with `detail.target, tokens`.
`prefers-reduced-motion`	—	Overlay opacity transition disabled.

—hover

Move your cursor

hover any tileclick to lock

View HTML

<div class="lsd-ti">
  <div class="lsd-ti__demo" data-name="Primary button"
       data-tokens='{"background":"--accent","border-radius":"--r-md"}'>
    <button class="lsd-btn">Launch</button>
  </div>
</div>
<div class="lsd-ti__overlay">…</div>