v1.2.4 27

The perfect starting point
for any designer, founder, vibe coder, AI agent or side project.

Pick a color, a shape and a font. Veritheme turns them into a complete design system — ready in Figma for your designer, in code for your developer, and for the AI that builds your app.

Create your system — free

What are you building?

Colors

Grays

Corners

Built on tools you already know

Design to code

From a Figma frame to a working page in seconds

Your designer composes the screen in Figma from the Veritheme library. Your AI agent passes the frame to the Veritheme MCP server and gets back working HTML: each instance becomes its real component and variant, each auto-layout frame becomes layout, and nothing is redrawn from a screenshot.

Everything this step needs is already built: the Figma library, the MCP server and the checks against your design system. Connect the server to your AI harness and run it. Every frame your team draws becomes a page in one pass.

Design in progress

sign-in.html 
<form class="vt-form">  <h2 class="vt-heading-sm">Welcome back</h2>  <div class="vt-field">    <label class="vt-label">Email</label>    <input class="vt-input" type="email">  </div>  <div class="vt-field">    <label class="vt-label">Password</label>    <input class="vt-input" type="password">  </div>  <div class="vt-form-actions vt-form-actions-block">    <button class="vt-btn vt-btn-primary">      Sign in    </button>  </div></form>

Ready for dev

Open Figma plugin Set up MCP
How it works

One system, generated for Figma, code and AI

Veritheme generates your Figma library and your production code from the same tokens, and your AI reads all of it through MCP. Nothing to redraw, nothing to hand-code: change a color once and all three update.

439+

Design decisions, made for you

67

Components, in Figma and in code

24

Page layouts, ready to build on

21

MCP tools your AI reads it with

System builder

One color in, a whole system out

  • A whole palette from one color

    Hover, pressed and soft shades are worked out for you.

  • Always readable

    Text contrast is checked in light and dark mode.

  • Take it anywhere

    Download it for Figma, code or your AI assistant.

Brand

Radius 12px

Pro Active
brand blue radius 12px
Figma plugin

A Figma library in one click

  • Organized, not messy

    Palette, colors, sizes and type in ordered collections.

  • Matches the real product

    Built from the same styles as your app, so the two never drift.

  • Bring your own theme

    Import a theme into Figma, or send your changes back to the builder.

Local variables

Components

Button, Input, Card and 64 more component sets, each linked to these variables.

primary
grey
blue
green
yellow
orange
red
Brand brand-fill
Page surface-page
Card surface-card
Text foreground-primary
Muted text foreground-muted
Border border-default
Success success-fill
Error error-fill
spacing-0_5 2 px
spacing-1 4 px
spacing-2 8 px
spacing-3 12 px
spacing-4 16 px
spacing-5 20 px
spacing-6 24 px
spacing-8 32 px
spacing-10 40 px
spacing-12 48 px
Aaheading-lg
Aaheading-md
Aaheading-sm
Aabody-lg
Aabody-md
Aabody-sm
Aalabel-md
Aalabel-sm
Aacaption
Components

67 building blocks, ready to use

  • Works with any tech

    Your developer adds it with one line. No lock-in.

  • Accessible by default

    Works with the keyboard and screen readers.

  • Dark mode included

    Every screen gets a dark version automatically.

Invite your team

They will get access to all projects.

Send invite Copy link

Verify your email

Enter the code we sent to phoenix@acme.co.

Verify

Payment received

$1,280 from Acme Inc. for the Pro plan.

View invoice

Set up your workspace

  1. Account
  2. 2
    Team
  3. 3
    Launch
MCP server

Claude & Cursor build in your style

  • Starts from proven layouts

    24 ready page layouts, not made-up screens.

  • Checks its own work

    Anything that breaks your style is caught before you see it.

  • Knows your own system

    Your theme and your components, not a generic kit.

Claude Code · Veritheme MCP connected
Use my Veritheme system and build the settings page for Acme.
get_project_system()
get_pattern("settings")
validate_markup(html)
Done. The settings page is built from your Settings pattern: 14 components, all from your library, in your blue and your corners. The linter found nothing to fix.
Open Figma plugin Build your system
Features

From an idea to a real product in five steps

Create a theme, generate the library in Figma, draw your screens with it, let your AI turn every frame into a page, and keep all of it in sync.

  1. Create your theme

    Pick a color, corners and a font. The builder works out the palette, type and spacing.

    Open the builder

  2. Generate the library in Figma

    The plugin generates the whole design system: variables, text styles and every component, all linked.

    Get the plugin

  3. Draw your screens

    Your designer composes each screen from the library's components. Every layer stays a real component, ready to become code.

    See how it works

  4. Get them as code

    Connect the MCP server and your AI turns each frame into a page on your components. The library installs in one line with npm, a CDN or shadcn.

    Set up MCP

  5. Keep it in sync

    Change a color, a radius or a font once. Import the new theme into Figma, drop the new theme.css into your code, and your AI reads it on its next call.

    Change your theme
Who it's for

One system, four ways in

Whether you design, run a product, vibe-code or write code, it is the same system underneath.

Founders & managers

Get a product that looks consistent and on-brand — without hiring a design team first.

Designers

Stop rebuilding buttons for every project. Start from a full Figma library in your style.

Developers

Ready-made styles and components for any framework. No lock-in, nothing to set up.

Vibe coders

Give your AI assistant a real design system, so every screen looks like the same app.
FAQs

Frequently asked questions

Everything about the price, the Figma plugin and working with AI. More on the FAQ page.

No. You can create your design system in the builder and get it in Figma without writing a line of code. To turn it into a working product, hand it to a developer or to your AI assistant — both can use it straight away.
Yes. It is open source under the MIT license, so you can use it in personal and commercial projects. The components, tokens, system builder, Figma plugin and MCP server are all free.
No. Veritheme is pure CSS plus a small vanilla-JS bundle for interactive components. Add a link and a script tag and it works with React, Vue, Svelte, plain HTML or anything else.
The plugin builds the library in Figma from your system’s tokens.json, with every variable bound. To change the theme, edit the system in the builder and drop the new tokens.json on the plugin: the variables update in place. The builder stays the source: the plugin does not export tokens, and structural edits made on the canvas are not transferred to code.
It lets AI assistants such as Claude Code or Cursor query your real components, tokens, themes and patterns instead of guessing class names, and lint the markup they write against the rules of the system.
Yes. In the system builder you pick a brand color, fonts, radius, density and more, then download theme.css, DTCG tokens for Figma, and a system package with a working demo and AI instructions.
Out of the box. Add the .dark class to the html element and every component and token switches to its dark value.

Start your design system today

Free, takes a minute, works with Figma, code and AI.

Build your system Documentation GitHub