Bezel
Sign up

Generate a design system from one prompt.

Describe your brand in a sentence and Bezel builds the token set. Adjust any value later, previewing every change in real time on real components. Ship it to your AI tools over MCP, to Figma, or as design-tokens.json.

Enter to start · Shift + Enter for a new line

Try:

Free to start · No credit card · Your first system in about a minute

or start from an empty project

The Bezel editorA three-pane application window: a guide list on the left, a color guide in the middle showing suggested palettes and a ten-step color ramp, and a live component preview on the right.app.bezel.newGUIDESColorPrimaryNeutralAccentStatusTypographyFont familyType scaleBorderWidthRadiusSpacingSizeSELECT PRIMARYprimary50900LIVE PREVIEW

What you actually get

Files your build already knows what to do with.

design-tokens.json

W3C DTCG 2025.10, with OKLCH color

variables.css

Scoped CSS custom properties, one scope per theme

Figma variables

One Figma mode per theme, published from the plugin

MCP tools

17 tools your coding agent can call directly

v1.2.0

A semver release with a generated changelog

One token document producing five artifactsA design-tokens.json file at the left connects to five outputs: a CSS variables file, Figma variables, MCP tools, a semantic version release, and the token JSON itself.design-tokens.jsonDTCG 2025.10variables.cssone scope per themeFigma variablesone mode per themeMCP tools17 callable by your agentv1.2.0semver + changelogvariables.css:root { --primary: oklch(...); --primary-foreground: ...; --radius-md: 8px; --spacing-4: 16px;}[data-theme="dark"] { --primary: oklch(...);}

The gap

AI writes screens in seconds. Keeping a design system under them is still manual.

You can prompt a whole page into existence now. What you can’t prompt is the system underneath it, so every new screen drifts a little further off-brand than the last. Turning that pile of output into a component library anyone can reuse is the same slow, hand-fixed work it has always been.

Generated screens drifting away from the brandA brand definition on the left connected by dashed arrows to three generated screens. Each successive screen matches fewer of the original brand rules than the one before it.your branddefined oncescreen 10 rules re-guessedscreen 81 rule re-guessedscreen 30nothing matches

  • Tokens live in a doc

    The values are written down somewhere. The components have never read them.

  • Contrast fails after ship

    Nobody checks a color pairing until someone files a bug against a live screen.

  • Generated UI looks plausible

    It looks clean and it hangs together. It just doesn’t look like you.

  • One tweak breaks the library

    Change the brand blue and you’re hand-editing every component that hardcoded it.

  • Design and code drift apart

    The moment either side moves, the other is out of date and nobody notices for a sprint.

  • Your agent re-guesses every prompt

    With no source of truth to read, it invents a new palette each time you ask.

How it works

From one prompt to a shipped design system, in three steps.

  1. 01

    Describe

    Give Bezel a sentence about your brand. It picks a primary, builds the neutrals and accents around it, sets your status colors, chooses a typeface and a scale, then settles radius, border width and spacing. The ramps behind all of that come from real color math rather than a lucky guess.

    Describing a brand in a promptA text prompt box above nine labelled decision chips representing the design choices Bezel makes from it.primaryneutralaccentstatusfontscaleradiuswidthspacing

  2. 02

    Tune

    Walk the guides or edit the tokens directly. Ask the assistant to warm up the neutrals or tighten the radius. Every change lands on real components in the preview as you make it.

    Tuning tokens in a guideA colour ramp above two chat messages, showing a plain-language request adjusting the generated scale.primarywarm up the neutralsUpdated 9 neutral tokens.Contrast still passes AA.

  3. 03

    Ship

    Publish a semver release, push the variables into Figma, and hook your AI coding tools up over MCP. After that, generated code reaches for your tokens on its own.

    Shipping the systemA version tag connected to three destinations: a code repository, Figma, and an AI coding agent over MCP.v1.2.0your codevariables.cssFigmavariable modesyour agentover MCP

Live preview

See every design token change land live on real components.

The right half of Bezel is a live browser pane. Edit a token and the change reaches it in under a quarter of a second, re-rendering components that are genuinely running. Nothing in there is a screenshot.

A token edit streaming into the live previewOn the left, a design token table with one value being edited. An arrow labeled postMessage points right into a browser frame rendering real components, below device width options for desktop, tablet, and mobile.TOKEN EDITORTOKEN NAMEVALUEcolor.primary.400#8A8A8Acolor.primary.500#5A5A5Acolor.primary.600#3F3F3Fcolor.primary.700#2B2B2Bborder.radius.md8pxspacing.size.416pxfont.size.base20pxpostMessage~200msyour-app.dev14401024768390

Point it at your own app.

Out of the box the preview points at Radium, our open-source component library, which is shadcn/ui built on Base UI and Tailwind v4. That URL is yours to change. Add the open-source @bezel-labs/crystal receiver to your own Storybook or to a running app, point Bezel at it, and you’re previewing your tokens on your own components in your own framework. The preview matches what ships, because it is your own code running.

Sub-second updates
Token edits stream over a secure postMessage channel, debounced at around 200ms.
Real device widths
Render at 1920, 1440, 1024, 768 or 390 pixels, plus a fullscreen mode.
Theme-aware
Switch theme and the preview reloads in that theme rather than the default one.
Never blanks
Last known-good styles are retained, so a half-typed value can’t break the view.

Guided setup

Nine guides, one for each decision that defines a brand.

They cover primary, neutrals, accents and status colors, then font family and type scale, then border radius and width, then spacing. Each guide puts a few options in front of you, says why it picked them, and builds the full ramp behind whichever one you take.

A design guide with suggested optionsA list of nine design guides grouped under Color, Typography, Border and Spacing, next to four suggested palette options and the ten-step ramp generated from the selected one.ColorPrimaryNeutralAccentStatusTypographyFont familyType scaleBorderWidthRadiusSpacingSizeSELECT PRIMARYprimaryforeground50900

  • Color

    • Primary
    • Neutral
    • Accent
    • Status

  • Typography

    • Font family
    • Type scale

  • Border

    • Width
    • Radius

  • Spacing

    • Size

Or start from a preset.

Seed the border, radius and spacing guides from Tailwind CSS v4, shadcn/ui, Material UI v7 or Ant Design v5 if you’d rather not start from zero.

AI assistant

A UX designer built into every design decision.

Every guide has an assistant sitting beside it, prompted to answer the way a professional UX designer would. Ask for what you want in ordinary language and you get back a recommendation along with the thinking behind it. The options turn up in the suggestions panel ready to click, so there’s nothing to copy out and apply by hand.

A plain-language request updating the suggestions panelA chat request asking for a more trustworthy primary colour on the left, with an arrow pointing to a suggestions panel on the right that now shows four new palette options, each with a contrast result and a generated ramp.ASSISTANTSCOPEthis guidewhole projectHelp me choose a primary thatreads as trustworthyFour options in the suggestionspanel, each with an AA-safeforeground.Warmer, and less roundedWarmed 9 neutrals, radius 6px.Contrast still passes AA.Ask for a change…writes tothe panelSUGGESTIONS PANELSELECT PRIMARYupdated just nowDeep HarborAASlate TrustAAAQuiet NavyAAAInk BlueAAprimarygenerated from the selected option

Things people actually ask it

  • Help me choose a primary that reads as trustworthy
  • Make this feel warmer
  • Give me a secondary that works on dark
  • Less rounded
  • Is this pairing readable at body size?
ASSISTANTThis guideWhole project
Help me choose a primary that reads as trustworthy
Four options in the suggestions panel, each with an AA-safe foreground.
Warmer, and make the borders less round
Warmed 9 neutrals and set radius to 6px. Contrast still passes AA.
Ask for a change…
Answers arrive in the panel
Ask a guide for options and the suggestions panel repopulates as the response comes in. Each option is ready to select, with its full ramp already generated.
Scoped to the guide, or the whole project
Keep a change inside the guide you’re working in, or switch to project scope and let the assistant adjust related tokens across every group at once.
It explains its reasoning
Answers come back in terms of hierarchy, readability and accessibility, so you can judge a suggestion before you commit to it.
Accessibility carried through
Suggested colors arrive with an accessible foreground already paired and their WCAG result shown, so a suggestion never quietly costs you contrast.

Token editor

A real design token editor underneath the guides.

Underneath the guides sits a plain table. Base and semantic groups, export names, units, types and descriptions are all editable there, and all stored as W3C DTCG 2025.10 with OKLCH color. Because export names are kept separate from token paths, base.border.width.default can ship as border-1 and land wherever your framework expects to find it.

The token table in a non-default themeA design token table with columns for token name, export name, default value, value, unit and type. A theme selector above shows the dark theme selected, and only two rows carry an override value; the rest inherit.THEMEdarkoverrides only, blank inherits from $rootTOKEN NAMEEXPORT NAMEDEFAULT VALUEVALUEUNITTYPEbase.border.width.0border-00pxinheritspxDimensionbase.border.width.defaultborder-11px2pxpxDimensionbase.border.width.2border-22pxinheritspxDimensionbase.border.width.4border-44px6pxpxDimensionbase.border.width.8border-88pxinheritspxDimensionbase.color.neutral.500neutral-500oklch(...)oklch(...)n/aColor

One system, many themes.

Add a context and override only what changes; everything else inherits from the default. Each context becomes its own CSS scope on export and its own variable mode in Figma.

Accessibility

Pro

WCAG contrast checked before it becomes a bug.

Every color pairing is scored against WCAG AA and AAA while you build. At save time Bezel picks the accessible foreground for you and prints the exact ratio on the token, so bad contrast gets caught in the system long before it reaches a QA ticket.

Contrast scoring on a colour pairingTwo colour pairings showing their contrast ratio and WCAG results. The first passes AA and AAA at 8.6 to 1; the second fails both at 2.1 to 1 and is marked for correction.primary.500 / foreground8.62 : 1foreground auto-selected from the rampAAAAAwarning.300 / foreground2.11 : 1below the 4.5 : 1 minimum for body textAAAAA
  • A live contrast ratio and AA/AAA result on every color pairing
  • The accessible foreground selected automatically from the ramp
  • The same check available to your coding agent over MCP, as contrast-check

For AI coding tools

Pro

Give your AI coding tools your real design tokens, over MCP.

Bezel runs a hosted MCP server. Connect it once and Claude Code, Cursor, Copilot, Windsurf, Zed, Cline or Continue can read your actual tokens while they write code. No more #3B82F6 turning up in a codebase where your blue is something else entirely.

An AI coding tool calling the Bezel MCP serverAn editor pane on the left sends a get-token-bundle request to the Bezel MCP server on the right, which lists its available tools and returns the button token bundle.your editor> build the sign-up button with our tokenscalling bezel · get-token-bundle{ "intent": "button" }✓ 14 tokens resolvedclassName="bg-primary text-primary-foreground rounded-md px-4 py-2"on-brand, first tryMCPtokensmcp.bezel.new17 toolsDISCOVERlist-projectsget-project-manifestREADquery-tokensget-token-by-pathget-token-bundleEXPORTexport-tokensget-framework-overridesCOMPUTEcolor-rampcontrast-checkunit-convert

17 tools, shaped so an agent doesn’t burn its context window reading them. Ask for the project manifest and you get the structure without any values. Query a few tokens by path. Or pull a whole bundle for a button, a card, an input, an auth page or a dashboard shell. There are deterministic utilities in there too, covering color conversion, ramp generation, contrast checks and unit conversion, alongside framework overrides that emit the right shape for Tailwind v3 and v4, shadcn/ui and Mantine v7.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Zed
  • Cline
  • Continue

.mcp.json

{
  "mcpServers": {
    "bezel": {
      "url": "https://mcp.bezel.new/mcp",
      "headers": { "Authorization": "Bearer <your-token>" }
    }
  }
}

Everywhere else

Connected to Figma, your repo, and your release process.

Two-way Figma variable syncFigma variables and Bezel tokens connected by arrows in both directions, with each Bezel theme mapping to a Figma mode.FigmaMode: lightMode: darkMode: brand-bBezel$rootdarkbrand-bone theme, one mode

Figma, both directions

Pull existing Figma variables in as a starting point, or publish your Bezel system out. Each theme becomes a Figma mode, so designers get the same structure developers do.

Browsing a connected repositoryA file tree from a connected GitHub repository beside a read-only source view, with a one-way arrow marked read-only.apps/storybook/packages/ui/button.tsxcard.tsxinput.tsxdesign-tokens.jsonreadonlyd1cf7f9 · 3 months ago

Your repo, in the app

Connect any public GitHub repo that has a design-tokens.json at its root, then read the real source alongside your tokens, file tree and latest commit and all. Start from the Radium starter or bring your own.

A published release and its changelogA list of published versions with change counts, and the generated changelog entries for the latest release showing added, updated and renamed tokens.VERSIONv1.2.034 addedv1.1.08 updatedv1.0.12 updatedv1.0.0initialCHANGELOGAdded34Updated6Renamed2Deleted0

Versioned releases

Publish a semver release and Bezel writes the changelog for you, listing what was added, updated, deleted or renamed with the old and new values beside each entry. The token JSON for any past version is there to download or copy.

Who it is for

Built for people shipping without a design systems team.

Solo founders

Get a coherent brand system in an afternoon instead of borrowing someone else’s default theme and hoping it reads as yours.

AI-first developers

Pull the system into your editor over MCP so generated UI stays on-brand and you stop hand-fixing drift after every prompt.

Lean product teams

Keep design and code pointed at the same tokens, and change the brand in one place when it moves.

FAQ

Questions worth answering before you sign up.

What format are the design tokens in?

W3C Design Tokens Community Group format, schema version 2025.10, with color stored in OKLCH. Your project exports as a single design-tokens.json file.

How do I get the tokens into my codebase?

Download or copy design-tokens.json into your repo root and run bezel build, the CLI from the open-source @bezel-labs/bezel-kit package. It emits a scoped variables.css plus contexts.ts and fonts.ts modules.

Can the live preview show my own components?

Yes. Every project has its own preview URL and you can change it at any time. Add the open-source @bezel-labs/crystal receiver to your Storybook or running app, point Bezel at that URL, and your token edits render on your components in your framework. If you’d rather not wire up your own, the default is Radium, an open-source shadcn/ui library.

Which AI coding tools work with the MCP server?

Claude Code, Cursor, GitHub Copilot, Windsurf, Zed, Cline and Continue. Any MCP-aware client can connect. The MCP server is available on the Pro plan and above.

Does Bezel write to my GitHub repo?

No. The GitHub connection is read-only. Bezel browses your repo so you can see your real source next to your tokens, but it never commits, opens pull requests or pushes changes. You move tokens into your codebase by downloading or copying the JSON.

Does it work with Tailwind CSS and shadcn/ui?

Yes. Each token carries its own export name independent of its path, so tokens land under the names your framework expects. The MCP server can also emit framework-specific overrides for Tailwind v3 and v4, shadcn/ui and Mantine v7.

Can I bring an existing design system or Figma variables?

Yes. Import an existing token JSON file and Bezel normalizes it to the DTCG format, or pull your local Figma variables in through the Bezel Figma plugin.

Is Bezel collaborative?

Not yet. Projects are single-user today. Shared workspaces, roles and permissions are on the roadmap but are not available on any plan.

Get started

Generate your design system in about a minute.

Bezel builds your token set from a single sentence about your brand. Or start from an empty project and tune every value by hand. Free either way.

Sign upRequest a demo

Or join us on Discord and see what people are building

  • Free to start, no credit card
  • Export your tokens on the free plan
  • Upgrade for MCP, accessibility guides, more themes and release history