Getting started

Basemode keeps design tokens in sync with code. A designer changes a variable in Figma and presses Publish. Basemode turns the variables and styles into code in the formats your team uses, opens one pull request with a plain-language summary, and fixes references to renamed tokens along the way.

Five minutes, no Figma needed

1. Create an account with Get started at the top of this page. The Free plan needs no card.
2. Create a design system and choose Load sample tokens. You get a small, realistic system with a light and a dark mode.
3. Open Export to see what the tokens become in CSS, Tailwind, TypeScript, Swift, Android and the rest.
4. Load the sample again. The second version renames a token and changes a color, so Changes shows you what a real update looks like.

Connect your own

What a sync does

1. Reads every variable and style and follows each alias in every mode. A broken alias becomes a warning, not a failed sync.
2. Saves a snapshot only if something changed.
3. Compares the generated files with your base branch. If the repository already matches, no pull request is opened.
4. Measures the change against basemode.lock.json on the base branch, so the pull request describes what merging it really does.
5. Rewrites code that uses renamed tokens, and lists files that still use removed ones.
6. Commits to the basemode/tokens branch, opens or updates one pull request, and tells your team in the app and in Slack.

A scheduled sync with nothing new leaves the repository alone, so a pull request someone closed on purpose doesn't come back every night.