Token-to-code

The Figma file is right. The CSS is last month's file. Two sources of truth means neither one is.

The token model emits code. CSS custom properties for the app. A registry entry for the install. Same names, same values, two formats. You change the model. The outputs regenerate.

Switch the theme. Watch both formats rewrite from the same source.

:root {
  --color-primary: #2563eb;
  --color-background: #fcfcfa;
  --color-foreground: #1a1a16;
}

{
  "name": "button",
  "type": "registry:ui",
  "cssVars": {
    "light": {
      "color-primary": "#2563eb",
      "color-background": "#fcfcfa",
      "color-foreground": "#1a1a16"
    }
  }
}

One model. CSS variables for the app. Registry JSON for the install.

Portable means the names survive a framework change. --color-primary does not care if you are in CSS modules or a registry.