02

For engineers

Tokens that arrive as code you'd write.

One pull request with the values in your formats, renamed tokens already fixed, and checks that keep hard-coded values out of main, including the ones your coding agent writes.

In GitHub
Sync design tokens: 1 renamed, 2 updated, 1 added #214 Open basemodewants to merge into main from basemode/tokens

Removed, still used: color/brand/legacy in src/marketing/banner.tsx

Renamed · references updated in 6 filesaction/primary-hover action/hover
Updatedaction/primary #2563EB #1D4ED8surface/raised #F8FAFC #F1F5F9
src/components/save-button.tsx- <Button className="bg-action-primary-hover">+ <Button className="bg-action-hover">
basemode lintSuccessfultokens up to date (--check)SuccessfulbuildSuccessful Ready to merge. No meeting needed.

A day, redrawn

What one change looks like from your seat

  1. 10:03Step 01A pull request is waitingbasemode/tokens → main: 1 renamed, 2 updated, 1 added.
  2. 10:05Step 02CI is greenbasemode lint and --check passed on the branch.
  3. 10:06Step 03Merge itNo ticket, no copy-paste, no sync meeting.
  4. 14:20Step 04Your agent stays on speccheck_code catches a hard-coded hex before the agent says it's done.

Redline review

Marked up, and revised

Rev A · as it is today

1Copy hex values out of a Figma file

2Grep for a renamed token after the build breaks

3Point out hard-coded colors one review at a time

4Agents that invent their own spacing

Rev B · with Basemode

Generated files for CSS, Tailwind, TypeScript, Swift and Android

References rewritten as whole names, gray-1 never touching gray-10

basemode lint fails CI on hard-coded values

An MCP server with your tokens, components and rules

Approved · Rev B

In Basemode · Code

The files the next pull request will contain

Preview exactly what Basemode will write, in every format you ship. Semantic tokens stay references, so light, dark and any other mode switch with one attribute, and output only changes when the design does.

app.basemode.io/acme/systems/brand/code
tokens.css · tailwind4tokens.tsTokens.swiftcolors.xml
/* Generated by Basemode from Figma. Do not edit. */@theme static {  --color-blue-600: #2563EB;  --color-blue-400: #60A5FA;  --color-action-primary: var(--color-blue-600);  --spacing-4: 16px;  --radius-sm: 6px;}[data-theme="dark"] {  --color-action-primary: #60A5FA;}
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.