Tier 3: Component-Scoped Tokens

Component tokens tie semantic decisions directly to individual components. They are the most granular tier in the system:

{
  "button": {
    "primary": {
      "bg": { "value": "{color.interactive.default}" },
      "bg-hover": { "value": "{color.interactive.hover}" },
      "radius": { "value": "{radius.md}" },
      "padding-x": { "value": "{space.16}" }
    }
  }
}

Why use Component Tokens? Imagine executive leadership decides: 'We want all buttons to have 24px pill rounding, but cards and dialogs must keep sharp 8px corners.' Without component tokens, changing {radius.md} would accidentally round cards, dialogs, and tables as well. Component tokens provide the isolation needed for targeted styling.