Set up a design system once. Keep it interoperable forever.
Vois turns Tailwind palettes, Radix scales, Figma Variables, and your repo into one living system of tokens, docs, audits, and MCP tools for Cursor and Claude. Start from proven foundations, then maintain every change across design and code.
Interoperates with the tools teams already trust
Design sources and code outputs, connected visually
Vois sits between Figma and your repository as an interoperable system layer. Animated sync lines show how foundational palettes, product tokens, generated code, and AI agent context stay connected.
Design sources
Choose a starting base
Tailwind slate
50-950 scale
Radix mauve
1-12 scale
Brand primary
Figma Variables
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
color.background
color.foreground
color.accent
type.body.default
space.container
radius.control
Engineering output
Generated code and agent context
@theme {
--color-background: var(--system-surface);
--color-primary: var(--brand-accent);
--spacing-4: var(--space-md);
}See it in action
A visual editor for your design tokens. Automated audit tools for your code. Built for the way modern teams work.
Your entire design system, in one place
Browse, search, and edit every token across your project. Global values, semantic mappings, and auto-generated CSS variables — visible and editable without touching code.
- Color swatches with live hex preview
- Semantic token mappings
- Light and dark mode in sync
Global
#2563EB#F9FAFB#111827#EF4444- background: #2563EB+ var(--color-primary-500)- padding: 16px+ var(--spacing-4)- font-size: 14px+ var(--type-sm)Stop hardcoding. Start catching.
Scan any file for hardcoded colors, spacing, and font sizes. Vois matches them to your token system and generates the exact fix — one click to apply, or batch-fix the whole codebase.
- Detects hardcoded colors, sizes, and spacing
- Shows the exact token substitution
- One-click or batch fix across files
Everything to set up and maintain your system
Vois gives teams a neutral, portable source of truth that connects the best parts of modern design and engineering workflows.
Start from proven foundations
Seed a system from Tailwind color families, Radix scales, or your existing Figma Variables, then map them into semantic roles your product can use.
Interoperable across every tool
Vois keeps design, code, and AI agents aligned with CSS variables, Tailwind v4 @theme output, TypeScript types, JSON, and MCP tools.
Code artifacts on demand
Run npx vois sync to pull the latest tokens and regenerate Tailwind config, CSS variables, TypeScript types, and system docs.
Maintain system health
Audit any file for hardcoded colors, spacing, or font sizes. Get token suggestions, one-click fixes, and pull requests your team can review.
Visualize design-to-code flow
Use product screenshots and animated sync lines to see exactly how Figma, Vois, GitHub, Cursor, and Claude stay connected.
Semantic type and component roles
Define typography, color intent, spacing, and component usage as semantic tokens so teams use meaning instead of raw values.
From starter palette to maintained system
Build on familiar primitives, then keep design and code aligned as the product evolves.
Choose your foundation
Start from Tailwind palettes, Radix scales, Figma Variables, or your current CSS variables and normalize them into one source of truth.
Map design to code
Connect Figma and GitHub. Vois writes .vois/system.json, CSS variables, Tailwind v4 @theme output, and typed token artifacts.
Maintain every change
Audit code, review pull requests, sync updates, and expose token guidance to Cursor, Claude, and your team through MCP.
Give your team a system every tool can use.
Start with your existing foundations, connect Figma and GitHub, and keep designers, engineers, Cursor, and Claude working from the same source of truth.