BM-001The design system, enforced

Built to spec. Kept to spec.

Basemode turns your Figma library into the specification your code, your pull requests and your coding agents are held to. A designer publishes, a pull request arrives, and every check knows the new values.

General notes
  1. 1.Every value comes from the system.
  2. 2.Every change arrives as a pull request.
  3. 3.Every agent checks its work before it finishes.
DWG BM-014 · Plan cardScale 1:1
PRO$24/ seat / monthUpgrade planspace-6 · 24240 · size-cardtext-display38 / 1.0border-strong1.5pxradius-sm6text-muted#64748Baction/primary#C2410Csurface-card#FFFFFF
Revisions · publishing on a loop, pick one
Rev
R14 · #C2410C
Published
Figma · Brand
Issued to
csstailwindtsMCPdocs
Pull request
#214 · basemode/tokens
Checked
basemode lint · 0
Contrast
5.2:1 · AA
On spec
01

No new tool to learn

Figmaas you see it there

PRO

$24

Upgrade planButton / Primary
BasemodeBrand system
Changes since last publishRenamedaction/hoverUpdatedaction/primaryUpdatedsurface/raisedAddedborder/disabled
Opens a pull request in acme/webPublish 4 changes
02

Drift audit

Every design system drifts. Yours can drift back.

A hex copied from a screenshot. 18px because 16 looked tight. An agent that guessed. None of them is a bug on its own, and together they're a second, unofficial design system. Basemode finds each one, names the token it should be, and keeps new ones from landing.

Hard-coded values
60
Tokens
0
Audit · src/ · colorsscroll to resolve
--action-primary--text-muted--feedback-danger
03

Redline review

A spec gate, not a style guide

Guidelines in a wiki get skimmed. Basemode turns your system into checks that run in CI, in review and inside every agent's session, so 'on spec' is a status, not an opinion. This is the real rule set: edit the stylesheet and watch it reviewed.

src/pricing/plan-card.css
$ basemode lint · exit 1 · 8 to resolve
Adoption27%3 tokens · 8 hard-coded · 5 already tokens
Revise
  • Colors come from the system
  • Spacing sits on the scale
  • Radii are tokens
  • Type sizes are tokens
  • Adoption is 90% or more
  1. 1
    line 3auto-fix#E2E8F0 is already a token: use var(--border-subtle).
  2. 2
    line 4needs a decision10px isn't in the design system. The closest is var(--radius-md) or var(--radius-lg).
  3. 3
    line 5auto-fix24px is already a token: use var(--space-6).
  4. 4
    line 10auto-fix20px is already a token: use var(--text-xl).
  5. 5
    line 15auto-fix#2563eb is already a token: use var(--action-primary).
  6. 6
    line 16auto-fix#fff is already a token: use var(--text-on-action).
  7. 7
    line 17needs a decision10px isn't in the design system. The closest is var(--space-2) or var(--space-3).
  8. 8
    line 17needs a decision18px isn't in the design system. The closest is var(--space-4) or var(--space-5).
04

Agents

Coding agents that check their own work

Connect Claude Code, Cursor or any MCP client. Before an agent finishes, it runs the same rules your CI does. When the system doesn't have what it needs, it asks your team instead of inventing a value.

get_design_system
What's in the system. Called first.
search_tokens
Find tokens by name or meaning
find_token
The token for a raw value, exact or closest
check_code
Hard-coded colors, spacing, radii, font sizes
get_guidelines
Your team's written rules
list_components
What exists before building another
check_contrast
WCAG contrast by value or token name
report_gap
Ask your team instead of inventing
Coding assistant · MCP: basemode
05

Collaboration

Design, engineering and agents, on the same loop

No handoff file, no sync meeting, no Slack thread asking which blue is current. Each person sees the change in the tool they already use, and what's missing flows back to the people who can add it.

  1. 01

    Designer · Publishes in Figma

    From the plugin on any plan, or Figma's webhook on Enterprise. Nothing new to learn, no file to export.

  2. 02

    Basemode · Opens one pull request

    New values in your formats, renamed tokens rewritten where code uses them, and a changelog with the worst news first.

  3. 03

    Slack · Tells the channel

    Managers hear about the pull request, and about any sync that failed, where they already are.

  4. 04

    Reviewer · Merges a diff that builds

    basemode lint and --check can gate CI on drift. If the repository already matches, there's no pull request to review at all.

  5. 05

    Agents · Work from the new values

    The next lookup returns what was merged, and check_code flags anything still using the old ones.

  6. 06

    Gaps · Come back to design

    When an agent can't find a token or component, report_gap puts the request in front of your design team.

The Basemode loop: designer, Basemode, Slack, reviewer, agents, gaps, and back to the designerOne change,everyone in step01Designer02Basemode03Slack04Reviewer05Agents06Gaps

FAQ

Questions design and engineering both ask

If yours isn't here, get in touch and we'll answer it.

How is this different from a design system documentation platform?

Documentation tells people what the system is. Basemode makes code match it: changes arrive as pull requests in your repository, and the same checks run in CI, in review and inside your coding agents. Your repository stays the source of truth, and nothing ships off spec without someone choosing to.

What do coding agents actually get?

An MCP server with eight tools: the design system's overview, token search, the token for a raw value, a code check, your written guidelines, your component inventory, a contrast check, and a way to report what's missing to your team instead of inventing it.

Do we need Figma Enterprise?

No. Figma only shares variables through its REST API on the Enterprise plan, so every other plan publishes through the Basemode plugin, which works everywhere. Enterprise teams can use either.

What does Basemode change in our repository?

Only the folder you choose, plus references to renamed tokens if you turn that on. Everything arrives as a pull request on its own branch, so nothing reaches your main branch unless someone merges it.

Can we use it without an account?

Yes. The engine is also a command line tool and a GitHub Action you can add with no code changes. The hosted product adds the plugin, history, reference repairs across your team, shared docs and Slack.

Where do our tokens and credentials live?

Tokens are stored per organization, and Figma and GitHub tokens are encrypted and never shown again after you add them. Anyone with access can see what's connected, not the secret itself.

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.

Prefer email? hello@basemode.io