01

Integrations

It fits into what you already use

21 integrations across design, code, agents, platforms and your team, all running on the same engine. Nobody changes tools: the design system comes to them.

In
Figma, any plan
Out
9 formats
Agents
Any MCP client
variables inFigmapull requests outGitHub · CIMCPAgentscode out9 formatsposts · sign-inSlack · SSOBasemodeone engine
01

Design sources

5 · variables in
  • Figma pluginDesigners publish variables and styles with one button.Every Figma planPlugin
  • Figma REST APIBasemode reads the files itself, hourly, daily or when asked.Enterprise for variablesAPI
  • Figma webhooksA library publish syncs straight away, with no schedule to wait for.With the APIWebhook
  • Tokens StudioBring a Tokens Studio file in, with or without Figma variables.Import
  • W3C design tokensRead and write the DTCG format, so tokens move between tools.Import · export
02

Code and review

3 · pull requests out
  • GitHubCommits to basemode/tokens and opens or updates the one pull request.Connection
  • GitHub Actionsarcarolabs/basemode-action runs the sync from your own workflow.Action
  • Any CIbasemode lint and --check exit 1 on hard-coded values or drift.CLI
03

Coding agents

3 · MCP
  • Claude CodeLooks up tokens, checks its own code and reports gaps.MCP
  • CursorThe same tools, added through mcp.json.MCP
  • Any MCP clientHosted over HTTP with a developer key, or local from a lock file.MCP
04

Platforms

7 · code out
  • CSS variablesCustom properties, with modes switched by data-theme.tokens.css
  • Tailwind 4 and 3An @theme block, or a preset for Tailwind 3.tokens.css · preset
  • SassVariables, with a map for each extra mode.tokens.scss
  • TypeScriptTyped token and theme objects.tokens.ts
  • StorybookA docs page of your palette and measures.Tokens.mdx
  • SwiftUI and UIKitColors that follow dark mode, and metrics.Tokens.swift
  • AndroidColors and dimens, with a values-night folder.values/*.xml
05

Your team

3 · posts · sign-in
  • SlackEvery pull request and every failed sync, in the channel you choose.Webhook
  • SAML single sign-onSign in through your organization's identity provider.EnterpriseSAML 2.0
  • GoogleSign in with Google, or connect it to a password account.OAuth
Sign-off

Give your design system some teeth

Try it with sample tokens in a couple of minutes, then connect Figma, GitHub and your agents when you're ready. No card needed.