Figma ⇄ code ⇄ AI — one source of truth

One design system for designers, developers, and builders.

Design it in Figma, ship it in pure CSS, or let AI build it for you — all from one theme.json source of truth. 66 free components to start today.

Browse 66 components Find your path

$ npm install veritheme

1 Source of truth

2-way Figma sync

MCP AI-native

66 Free components

Figma plugin · variables

⇅ round-trip

theme.json source of truth

"brand": "213 87% 49%",
"radius":  10,
"font":    "Inter"

Code pure CSS · tokens

AI agent MCP server

Choose your path

Three ways to build with Veritheme

Whether you design, code, or just want it done — start where you are. It's the same design system underneath.

For designers

Design in Figma

Generate the whole library inside Figma with every variable already bound — colors, type, spacing, radius. Export theme.json and round-trip safely.

Open the Figma plugin For developers

Ship in pure CSS

66 production components, semantic tokens, dark mode, zero runtime. Copy-paste or npm install — no framework, no lock-in.

Get the components Building your own product

Let AI build it

No designer, no coder? Pick your brand color and ask your AI assistant — it builds real, on-brand screens on your design system.

See how it works

For designers theme.json → Figma

Generate Veritheme inside Figma

Pick the components you need and the plugin builds them in Figma with every variable already bound — colors, type, spacing, radius and shadows.

Select components

Choose only what you need from the Veritheme set — buttons, forms, cards, the lot.

Generate in Figma

The plugin draws real frames with semantic tokens already wired up.

Variables bound

Export theme.json and reuse it on the web — round-trip safe.

Veritheme Figma plugin generating components with bound variables

Open in Figma Community

For developers Free components

66 free components

Production-ready primitives, all wired to the same tokens. Copy, paste, ship.

Button

Pagination

Blueberry

Select

Input

Rating

August 2023

MoTuWeThFrSaSu

Calendar

Notifications Auto-update

Switch

Primary Active Pending Failed Beta

Badge

Checkbox label Unchecked

Checkbox

Slider

Option A Option B

Radio

Tooltip

Auth

Breadcrumb

Storage68%

Compute91%

Progress

Team plan

Popular

$29/ mo

Card

Tabs

Avatar

Heads up

Your trial ends in 4 days.

Alert

Design Code AI

Chip

Default link Muted link

Link

See all 66 components

Installation

Start in 30 seconds

Three ways to add Veritheme to your project. Pick whichever fits your stack.

Terminal

$ npm install Veritheme

Then import the stylesheet in your entry file:

main.ts

import 'veritheme/veritheme.css';

HTML <head>

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/veritheme@latest/veritheme.min.css">

No build step required — drop into any HTML page.

HTML

<link rel="stylesheet" href="veritheme.css">

Download veritheme.css → and host it yourself.

Copy & paste

Each component is clean, self-contained HTML. No installation, no imports.

Semantic tokens

Two-layer token system with Figma-aligned names. Consistent everywhere.

Dark mode built in

Light and dark out of the box using CSS variables and a single .dark class.

Zero runtime

Pure HTML and CSS — no framework, no JS bundle, no hydration.

For builders No code needed

Building your own product? Let AI do the UI.

You don't need to know CSS or Figma. Pick a brand color, ask your AI assistant to build with Veritheme, and get real, consistent screens — the same design system professionals use.

Pick your color

Choose a brand color in the live generator — no code, just click. Everything re-skins to match instantly.

Ask your AI

Tell Claude, Cursor or any AI assistant: "Build a dashboard with Veritheme." It reads your real components.

Get real screens

On-brand, consistent and ready to ship — not a mockup. The same tokens designers and developers use.

Try the generator — no code Connect AI (MCP)

theme.json → AI agent

The design system your AI agent reads directly

Point your AI assistant at the Veritheme MCP server and it stops guessing markup. It pulls your real components, tokens and themes — and builds UIs that match your design system on the first try.

Patterns first, live source list_patterns, get_component, get_tokens, get_theme, search — the agent starts from proven layouts, not the model's memory.
Same tokens as Figma & code The agent reads the very theme.json your designers and CSS use — no drift between what's designed, shipped and generated.
One command to connect Works with any MCP-capable client — Claude, Cursor and more.

$ claude mcp add veritheme -- npx -y @veritheme/mcp-server

AI agent · Veritheme MCP connected

Build a team members card with a header action bar.

get_component("card") called

get_component("page-btn") called

get_tokens("radius") called

Real vt-card + vt-list-item — one control height, one radius:

Team members

8 people

Alex Rivera

alex@acme.co

Owner

Jordan Kim

jordan@acme.co

Editor

Sam Ortiz

sam@acme.co

Viewer

theme generator live

Brand

Radius

Font

Notifications

PRO live

brand 213 87% 49% radius 10px font Inter

theme.json → your browser

Make it yours — live, right here

Drag the controls and watch real Veritheme components restyle in real time — the same tokens you'd ship. This isn't a screenshot: it's the design system reacting to one source.

Real-time tokens Color, radius and font flow straight into the components — nothing is faked.
Export ready-to-ship CSS The full generator downloads veritheme.css with your theme baked in.
One file for code and design The same theme.json imports into Figma — your library re-themes to match.

Open the full generator

Get started

One source of truth. Figma, code, and AI in sync.

Free, open source, MIT-licensed. Start with 66 components today — and grow into the design-to-code-to-AI bridge when you're ready.

Browse components See the bridge