v1.2.0

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.

Open Figma plugin Create your system — free

What are you building?

Colors

Grays

Corners

Built on tools you already know

439+

Design decisions, made for you

68

Ready-made components

24

Ready page layouts

19

AI tools

How it works

One design system. Everyone on the same page.

Change a color once — it updates in Figma, in your app and in what your AI builds.

Source of truth

Your app

Developers get ready-made styles and components. Nothing new to learn.

Figma

Designers get a library in their style, with nothing to redraw.

Your AI tools

Claude, Cursor and other assistants build screens in your style instead of guessing.

Open Figma plugin Build your system
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 65 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

68 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.
Features

From an idea to a real product in four steps

Create a theme, generate the whole design system in Figma and in code, and let your AI read it. No designer or front-end team needed.

  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 it in Figma

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

    Get the plugin

  3. Get the code

    The same system as code: tokens, theme.css and every component, in one line with npm, a CDN or the shadcn CLI.

    Installation

  4. Your AI reads it

    Connect the MCP server: your AI assistant reads the whole system and builds screens with it.

    Set up MCP
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 with every variable bound, and imports and exports theme tokens (theme.json or DTCG). Import the exported file back into the builder to update code. Structural edits made on the canvas are not transferred automatically.
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