Build your design system. Get the components.
Pick a colour and watch a whole system fall out of it — scales, semantic roles, shape, spacing, type. Take it away as Figma components and pure CSS, from one source of truth.
npm install veritheme
theme.json
source of truth
"brand": "213 87% 49%", "radius": 10, "font": "Inter"
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.
Design in Figma
Generate the whole library inside Figma with every variable already bound — colors, type, spacing, radius. Export supported variable values as theme tokens and import them back into the builder.
Open the Figma plugin For developersShip in pure CSS
Themeable components and patterns, semantic tokens, dark mode, zero runtime. Copy-paste or npm install — no framework, no lock-in.
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 workstheme.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.
Choose only what you need from the Veritheme set — buttons, forms, cards, the lot.
The plugin draws real frames with semantic tokens already wired up.
Export supported token values and reuse them on the web. Changes to component structure stay in Figma.
64 documented components
Production-ready primitives, all wired to the same tokens. Copy, paste, ship.
Start in 30 seconds
Three ways to add Veritheme to your project. Pick whichever fits your stack.
$ npm install Veritheme
Then import the stylesheet in your entry file:
import 'veritheme/veritheme.css';
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/veritheme@latest/veritheme.min.css">
No build step required — drop into any HTML page.
<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.
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.
Choose a brand color in the live generator — no code, just click. Everything re-skins to match instantly.
Tell Claude, Cursor or any AI assistant: "Build a dashboard with Veritheme." It reads your real components.
On-brand, consistent and ready to ship — not a mockup. The same tokens designers and developers use.
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 Extract the system package into your project. The agent reads its manifest and tokens through
get_project_systemand confirms the revision. -
One command to connect Works with any MCP-capable client — Claude, Cursor and more.
claude mcp add veritheme -- npx -y @veritheme/mcp-server
vt-card + vt-list-item — one control height, one radius:
Team members
8 people
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 Download
theme.cssto load after the library, or get the system package with a working demo and AI instructions. -
One file for code and design The same
theme.jsonimports into Figma — your library re-themes to match.
Veritheme in the wild
Coverage of the design system and the thinking behind it.
One source of truth. Figma, code, and AI in sync.
Free, open source, MIT-licensed. Start with 64 components today — and grow into the design-to-code-to-AI bridge when you're ready.