Tokens
LiveHardcoded colors and sizes in CSS, SCSS, CSS Modules, inline styles and Tailwind, matched to the nearest token in the same role.
132 outline: 1px solid;
→ var(--border-width-1)
221 outline: 2px solid;
→ var(--border-width-2)
Design-system drift auditor
Know exactly where your code has drifted from Figma.
Paritrix checks every pull request, including the ones AI agents write, for hardcoded values, component props and renders that no longer match your design system. Then it turns the gap into one number your team can move.
Free during early access · Reads your repo, never pushes to it
northwind/storefront · mainSample repo
Health score
85.3/ 100
Token adoption
2,411 token references · 541 hardcoded values
Components in sync
13 of 15 connected with Code Connect
Visual match
7 of 8 variants match their Figma frames
ProductCard.module.css:12padding: 13px→--space-3≈ near
How it works
Three steps. Then it runs on every pull request.
- 01
Install the GitHub App
Pick the repos Paritrix may read. It reads code and comments on pull requests. It never pushes to your branches.
- 02
Point it at your tokens
Choose your CSS variables or DTCG tokens file. Paritrix opens a pull request adding
paritrix.config.jsonfor you to merge. - 03
Get a drift check on every PR
One comment per pull request, updated on each push, listing only what that pull request changed. Your score updates on every merge.
What it measures
Three kinds of drift, one health score.
Deterministic code finds the drift. Claude helps decide between tokens that share a value. The score never includes AI judgment, so it is the same every time you run it.
Components
LiveFigma variants and properties against React props, through your Code Connect files.
Figma · variantButton · variant
primary"primary"
secondary"default" · renamed
danger"danger"
none"link"
Visual
LiveEvery component variant rendered from your deployed Storybook and compared pixel by pixel with its Figma frame.
Figma frame
Storybook render
Why Paritrix
Other tools cover one piece. Paritrix closes the loop.
Linters, token sync, visual regression and documentation platforms each help. None of them checks what you shipped against your Figma design system, on every pull request, and turns it into a score.
| Capability | Lint rules | Token sync | Visual regression | Docs platforms | paritrix |
|---|---|---|---|---|---|
| Checks shipped code against your tokens | partial | — | — | — | ✓ |
| Compares components with Figma | — | — | — | partial | ✓ |
| Compares rendering with Figma | — | — | code vs code | — | ✓ |
| Runs on every pull request | ✓ | — | ✓ | — | ✓ |
| Opens fix pull requests | in editor | — | — | — | ✓ |
| Reproducible health score and report | — | — | — | enterprise | ✓ |
By tool category; individual tools vary.
In the pull request
Feedback where engineers already are.
- Only the files the pull request changed. No wall of legacy debt.
- Exact matches fixed by a pull request you approve. Paritrix never pushes to your branch.
- Components the pull request touched, checked against Figma.
paritrixbot commented
Paritrix · design-system drift
Token adoption: 81.7% (2,411 token references, 541 hardcoded values across 612 files)
2 hardcoded values in the 3 files this PR changes:
| Where | Value | Use instead |
|---|---|---|
| ProductCard.module.css:31 | 20px | --space-5 |
| ProductCard.module.css:12 | 13px | ≈ --space-3 |
Components in sync: 86.7%. The components this PR changes are in sync with Figma.
For the AI era
AI agents write code fast. Paritrix keeps it on-system.
- Spots AI-assisted pull requests (Claude Code, Copilot, Cursor, Codex, Devin) and shows how much drift they add.
- Teaches agents your system: one pull request adds your tokens and components to AGENTS.md.
- Every AI pull request gets the same check and the same safe fix PRs as everyone else's.
AI-assisted pull requestslast 30 days · sample
43%
of PRs
74%
of new drift
2.9×
drift per PR
<!-- paritrix:agent-rules:start -->
Never hardcode colors or sizes. Use var(--token).
Spacing: --space-1 4px · --space-2 8px · …
<!-- paritrix:agent-rules:end -->
Never hardcode colors or sizes. Use var(--token).
Spacing: --space-1 4px · --space-2 8px · …
<!-- paritrix:agent-rules:end -->
For design-system leads
A number you can put in a quarterly review.
Adoption decks usually run on anecdotes. The health score is computed the same way every time, from your code. Export a quarterly report with the trend, the drift your teams removed, an hours-saved estimate and a breakdown by team.
Tokens
81.7
share of design values that use a token
Components
86.7
share of connected components in sync
Visual
87.5
share of variants that match Figma
Health
85.3
average of what is measured
Questions
Before you install.
Does Paritrix change my code?
Only through pull requests you ask for. Tick the box in a Paritrix comment, or press Open fix PR on the dashboard, and it opens a separate pull request. It never pushes to existing branches.
Where do my tokens come from?
From your repo: CSS custom properties or a DTCG / Style Dictionary JSON file. You don't need Figma Enterprise or Figma Variables.
What code does it read?
React with CSS, SCSS, CSS Modules, inline styles and Tailwind. Vue, native and styled-components are not supported yet.
What does it need from Figma?
Nothing for token drift. For component and visual drift, your Code Connect files and a Figma personal access token with read-only file access. Visual drift also needs your deployed Storybook; Paritrix never builds or runs your code.
Does it work with AI coding agents?
Yes. Paritrix labels AI-assisted pull requests, checks them like any other, and can add your design-system rules to AGENTS.md so agents use your tokens from the start.
What does it cost?
Nothing during early access. Pricing will be per organization, not per seat.