Bezel for Design Engineers

Design tokens, components, and code in one connected workflow

You already live between design intent and production code. Bezel makes that space a system: tokens with real semantics, previews on real components, and a single source of truth that developers and AI agents can read.

Get Started Explore Design Tokens

Graphic placeholderToken editor beside live componentsThe token editor with base and semantic groups expanded, next to the live preview rendering the same tokens on real components.

Design Tokens

A real token model, not a spreadsheet of hex codes

Base and semantic tokens, aliases, export names, and types are all first-class. Change a base value and every semantic token that references it follows.

Tokens export in the W3C Design Tokens format, so they drop into the build pipeline you already have.

Graphic placeholderSemantic token referencing a base tokenA semantic token such as color-primary resolving to a base scale step, with the alias chain visible.

Live Previews

Preview on the components you actually ship

Point Bezel at your own Storybook or running app and token edits render on your components, in your framework, in under a second.

The preview is your code running, so what you see is what ships.

Graphic placeholderBezel previewing a custom component libraryThe preview panel pointed at a team’s own Storybook, with a spacing token change reflected across a form layout.

Bezel MCP

The same system, readable by your AI coding tools

Connect compatible coding agents through MCP and they can query tokens, guidelines, and project context instead of inventing values.

You define the rules once. Developers and agents both follow them.

Graphic placeholderAgent querying Bezel over MCPA coding agent asking for the semantic tokens for a card component and receiving the exact values and names from the project.

What design engineers do with Bezel

Standardize tokens across a codebase

Replace scattered hardcoded values with a consistent, exported token set.

Bridge design and engineering

Give designers a place to decide and developers a format to implement, without translation in between.

Keep AI-generated UI consistent

Make sure agent-written components reach for your tokens instead of guessing.

Built to fit an existing stack

Bezel produces standard artifacts and connects over open protocols, so nothing about your toolchain has to change.

W3C design tokens: Export a standards-based design-tokens.json and build CSS variables from it with Bezel Kit.
Your component library: Preview against Storybook or any running app with the open-source Crystal receiver.
Bezel MCP: Expose tokens and guidelines to Claude Code, Cursor, and other MCP-aware tools.
Radium: Start from Radium, the open-source component library Bezel previews out of the box.

FAQ

Questions from design engineers

What format are the design tokens in?

Bezel stores and exports design tokens in the W3C Design Tokens Community Group format, so they work with standard tooling and can be transformed into CSS variables or platform-specific outputs.

Can I preview tokens on my own components?

Yes. Each project has a configurable preview URL. Add the open-source Crystal receiver to your Storybook or running app and Bezel renders token changes on your own components.

How do semantic tokens work in Bezel?

Semantic tokens alias base tokens. When a base value changes, every semantic token referencing it updates, and the relationship is preserved on export.

Which AI coding tools can read a Bezel design system?

Any MCP-aware tool can connect to Bezel MCP and query tokens, guidelines, and project context. That includes tools such as Claude Code and Cursor.

Same System

Zero Drift Design

Own the space between design and code

Start a Bezel project and connect your tokens, components, and AI tools to one system.

Get Started Read the Docs