Moving to Basemode

Moving to Basemode doesn't mean starting again. Bring the tokens you have, check the output matches, then switch the pipeline over.

From a token file

If your tokens live in a W3C DTCG file or a Tokens Studio export:

1. Try the file in the playground to see what Basemode generates.
2. Create a design system and start it from the file, or run the CLI on it:

basemode generate --input tokens.json --format css --format tailwind4 --out src/tokens

3. Compare the output with what your codebase uses today. Names follow the token paths, so color.action.primary becomes --color-action-primary. Set a prefix if your current variables have one.

From zeroheight or Supernova

Export your tokens as W3C DTCG JSON, then follow the steps above. Keep the documentation tool for long-form pages while you try Basemode for the pipeline: the shared docs page can be embedded in any site.

From Style Dictionary

Basemode replaces the build step. Point Basemode at the same Figma file and pick the formats your Style Dictionary config produced. If you still need a custom transform, add dtcg to your formats: Style Dictionary reads it, so your existing config keeps working on Basemode's output.

From a hand-maintained stylesheet

1. Publish your Figma variables with the plugin and connect your repository.
2. Run basemode lint to find every hard-coded value and the token to use instead. Values that are already tokens can be swapped without anything changing on screen.
3. Watch the adoption score climb as the team moves over.

Keeping names stable

The first pull request may rename variables your code already uses. Merge it with Fix renamed references on, and Basemode rewrites those references in the same pull request.