Follow one component from Figma to production.

01 · DesignedIt starts where designers already are.
01 / 06 · Designed
Pricing / Plan card
surface/raised#FFFFFF · radius/md 8

PRO

$24/ seat / month

Unlimited design systems Coding assistant access Shared docs
text/defaulttype/display 44 · space-6
Upgrade plan
action/primary#2563EB · radius/sm 6
tokens.css
--color-action-primary: var(--color-blue-600);
--radius-sm: 6px;
--space-6: 24px;
Tokens.swift
static let colorActionPrimary = Color(red: 0.1451,
  green: 0.3882, blue: 0.9216, opacity: 1)
values/colors.xml
<color name="color_action_primary">#FF2563EB</color>
<dimen name="radius_sm">6dp</dimen>
+ Tailwind 3 and 4 · Sass · TypeScript · DTCG · Storybook
Sync design tokens: 1 renamed, 2 updatedbasemode/tokens → main · #214
⚠ color/brand/legacy removed, still used in banner.tsxRenamed action/primary-hover → action/hover · 6 files
src/components/upgrade-button.tsx- <Button className="hover:bg-action-primary-hover">+ <Button className="hover:bg-action-hover">
Checks passed · ready to merge

PRO · ANNUAL

$240

Two months free
Choose annual
On spec
Coding assistant · MCP: basemode› Add an annual plan card<Button style={{ background: "#1f6feb" }}>check_code#1f6feb isn't in the design system. The closest is var(--action-primary).<Button variant="primary">check_code · 0 findings
Figma · action/primary#2563EB
acme.com/pricing
PRO$24Upgrade plan
Web · light
PRO$24Upgrade plan
iOS · dark
07

Now look inside

Where the whole system lives

Tokens by mode, written guidelines, the component inventory, every change and every request from your coding agents. Click through it.

app.basemode.io/acme/systems/brand
TokensEvery token, by mode, and how much of the codebase actually uses them.
Adoption94%
Token references3,812
Hard-coded values241
Tokens in use138 of 412
Find a tokenlightdark
  • color/action/primary#2563EB
  • color/action/hover#1E40AF
  • color/surface/raised#F8FAFC
  • color/text/default#0F172A
  • color/text/muted#64748B
  • color/feedback/danger#DC2626
Notes · Tokens1 / 5
  1. 1
    Product

    Adoption is measured on every sync: the share of styling that comes from the system.

  2. 2
    Design

    Light, dark and any other mode, side by side, exactly as Figma resolves them.

  3. 3
    Engineering

    Usage counts show which tokens are load-bearing before anyone renames one.

08

One engine

Wherever the work happens, the same rules

The hosted product, the Action, the CLI and the MCP server share one engine, so a check that passes for an agent passes in CI, and a token generated by hand matches the pull request byte for byte.

No code changes. Runs on a schedule or by hand, and opens or updates the one pull request.

.github/workflows/tokens.yml
on:  schedule: [{ cron: "0 22 * * 0-4" }]  workflow_dispatch:permissions: { contents: write, pull-requests: write }jobs:  tokens:    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v4      - uses: arcarolabs/basemode-action@v1        with:          basemode-key: ${{ secrets.BASEMODE_KEY }}          formats: tailwind4,typescript          path: src/tokens
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.