Design Tokens for AI Coding Agents: What to Hand Over

Given twelve hex codes, an agent has to guess which is the page background and which is the border. Given roles, it can't get it wrong. Name colours by job:

{
  "palette": {
    "background": "#efeee8",
    "surface": "#f8f7f3",
    "text": "#151513",
    "textMuted": "#5c5a54",
    "border": "#e4e2dc",
    "accent": "#0d7268",
    "onAccent": "#ffffff"
  }
}

If your design has a dark theme, give it the same roles. The agent can then build both themes from one component.

• Type scale: each step's size, weight, line height and letter spacing, plus the font families. Headings that tighten as they grow are a big part of a design's feel.
• Spacing: the base unit (4px or 8px) and the values actually used. Agents over-pad without one.
• Radii: the main radius and where pills are used.
• Borders and shadows: whether depth comes from hairlines or soft shadows. Agents add shadows by default.
• Motion: durations and easing curves, and which properties animate.

Tokens copied from a screenshot drift: colours are off by a few points and the spacing scale is invented. Measuring the rendered page gives the values the site really uses and how often, so the dominant ones become the defaults. That's what Livery does: it renders a site at desktop, tablet and phone widths and measures every visible element, then writes tokens.json with roles, shares and the reasons behind them.