Skip to main content

Design system compliance in pull requests

Flag raw values in GitHub PRs. Semantic token suggestions for every diff.

Start freeSee how it works

No credit card. One repo free.

Pull request check

Button.tsx:23

- background: #2563EB

+ var(--color-primary-500)

Suggested token: primary action color

Matches your semantic mapping for interactive controls.

Drift shows up late

Design systems live in Figma and docs, but code changes every day. Hardcoded colors and spacing slip into pull requests. Reviewers catch the same consistency issues again and again.

AI coding tools speed that up. They do not automatically know your token names or semantic roles. Violations pile up unless something checks each change against your system.

Close the governance loop

Three capabilities here. See define through measure on the product page.

Open the product page

Define

Manage tokens and semantic mappings in one editor. Connect Figma variables to the roles your product uses in code.

Enforce

Run GitHub checks on every pull request. Flag raw values and suggest the semantic token that matches your mappings.

Improve

Audit repos, expose guidance to Cursor and Claude through MCP, and track findings in project insights as you fix drift.

Canonical tokens and mappings

Edit semantic roles once. Generated CSS stays in sync with Figma and your repos.

Token editor

Browse global values and semantic mappings without touching source files for every change.

vois.app/tokens
Colors
Typography
Spacing

Semantic

color/primary/500
var(--color-primary)
color/gray/100
var(--muted)
color/gray/900
var(--foreground)
color/error/500
var(--destructive)

Semantic fixes in review

GitHub checks flag raw values and suggest tokens from your semantic map.

github.com/acme/app/pull/482
Vois design check2 findings
Button.tsx:23Apply suggestion

Primary action color

- background: #2563EB+ var(--color-primary-500)
Card.tsx:45Apply suggestion

Container padding md

- padding: 16px+ var(--spacing-4)

Pull request checks

Developers see why a replacement fits, not just that a value is noncompliant.

  • Checks run on every pull request
  • Suggestions tied to semantic roles
  • Audits and MCP for agents outside PRs

One layer between design and code

Figma variables, generated CSS, GitHub pull requests, and MCP tools share the same token definitions and semantic mappings.

Design sources

Choose a starting base

Tailwind slate

50-950 scale

Import

Radix mauve

1-12 scale

Import

Brand primary

Figma Variables

Import
Normalize into semantic roles

Start with known palettes, then map raw scales into product intent before code ever sees a value.

Product screenshot

Vois system graph

Semantic token coverage

93% mapped

Healthy

color.background

color.foreground

color.accent

type.body.default

space.container

radius.control

Figma syncLive
Code auditLive
MCP contextLive

Engineering output

Generated code and agent context

.vois/system.jsonUpdated
app/globals.cssUpdated
tailwind.config.tsUpdated
vois MCP toolsUpdated
@theme {
  --color-background: var(--system-surface);
  --color-primary: var(--brand-accent);
  --spacing-4: var(--space-md);
}

Token changes flow to GitHub checks and agent context through MCP

Built for system owners

  • Design systems

    Keep canonical tokens and semantic roles aligned with code.

  • Design ops

    See violations before merge and track what keeps recurring.

  • Frontend platform

    Give every repo the same PR checks and MCP guidance for agents.

Works with your stack

Figma · GitHub

Design to repo

Figma variables and GitHub stay on one token definition.

GitHub App

Pull request checks

Semantic suggestions on every diff before merge.

Cursor · Claude

Agent context

MCP tools for Cursor and Claude use live tokens and rules.

Running a design partner pilot? Talk to us about a focused evaluation on your repos.

Make compliance measurable

Connect tokens to pull requests, recommend semantic fixes, and give agents the same rules your reviewers use.

Start freeTalk to us