What format are the design tokens in?

Bezel stores and exports design tokens in the W3C Design Tokens Community Group format. That makes the token file easier to transform into CSS variables, platform-specific outputs, or internal design system packages.

Can I preview tokens on my own components?

Yes. Each Bezel 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 and preserve the meaning of a design decision. 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 design tokens, guidelines, and project context. That includes tools such as Claude Code and Cursor.

Bezel for Design Engineers

Connect design intent, tokens, components, and AI-assisted code

Bezel gives design engineers a shared system for semantic tokens, component previews, exportable artifacts, and AI-readable guidelines, so design decisions keep their meaning from concept to production.

Early Access Book a Demo

Bezel token editor showing base color tokens mapped to semantic aliases

Design Tokens

Model tokens with the structure production systems need

Base tokens, semantic tokens, aliases, export names, token types, and references are first-class parts of the model. Change a base value and every dependent semantic token follows.

Tokens export in the W3C Design Tokens format, giving your build pipeline a standard source instead of a hand-maintained spreadsheet or copied values from a design file.

Bezel token table showing semantic.color.primary.default resolving to the base.color.electric-violet.500 alias with its resolved swatch

Live Previews

Validate token changes against the components you ship

Point Bezel at your own Storybook or running app and token edits render on your components in your framework. Designers and engineers can see the impact before a pull request exists.

Because the preview is your code running, design system decisions are reviewed against the same surfaces that will reach production.

Bezel MCP

Make the design system readable by AI coding agents

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

Design engineers define the rules once. Human developers and AI agents both work from the same source of truth.

❯ claude› Which of our semantic colors change in dark mode? Use the Bezel MCP, don't guess.⏺ bezel - get-project-contexts (MCP)  ⎿  {"projectName":"Bezel Marketing","contextGroups":[{"groupName":"theme","supportedValues":["$root","light","dark"],"defaultContext":"$root","description":"Context group \"theme\" with 3 values. The \"$root\" context is always the default/base value."}],"usage":"Pass a context value (e.g., \"$root\", \"dark\", \"light\") as the contextKey parameter when using query-tokens, get-token-by-path, export-tokens, or get-framework-overrides."}⏺ bezel - query-tokens (MCP)(groupPath: "semantic.color")  ⎿  {"resultCount":14,"tokens":[{"path":"semantic.color.info.foreground","type":"color","contexts":{"$root":"{base.color.neutral.foreground}"},"exportNames":["info-foreground"],"extensions":{"com.bezel.app":{"exportName":["info-foreground"]}}},{"path":"semantic.color.info.default","type":"color","contexts":{"$root":"{base.color.info.500}"},"exportNames":["info"],"extensions":{"com.bezel.app":{"exportName":["info"]}}},{"path":"semantic.color.destructive.foreground"     … +13 lines (ctrl+o to expand)⏺ Theme contexts are $root, light and dark. Of the 14 semantic colors, four carry a dark override: semantic.color.secondary.default (base.color.secondary.500 → .600), semantic.color.secondary.foreground (base.color.neutral.foreground → .background), semantic.color.tertiary.default (base.color.tertiary.500 → .600) and semantic.color.tertiary.foreground (same swap). primary, destructive, info, success and warning keep their $root value in every theme.

What design engineers do with Bezel

Standardize tokens across a codebase

Replace hardcoded colors, spacing, radii, and typography values with an exported token system.

Bridge design and engineering

Give designers a guided place to decide and developers a standard format to implement.

Keep AI-generated UI consistent

Let AI coding agents retrieve real design tokens and guidelines instead of guessing from existing code.

Built to fit an existing stack

Bezel produces standard artifacts and connects over open protocols, so your design system can meet your existing repo, component library, and AI tooling where they are.

W3C design tokens: Export standards-based design-tokens.json files and transform them into CSS variables 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

Same System

Bezel for the rest of your team

Designers

Bezel gives product designers a guided place to define color, typography, spacing, radius, and accessibility decisions, then see those decisions applied to real components before developers or AI agents build from them..

Bezel for Designers

Developers

AI can generate code quickly.

Bezel for Developers

AI-Assisted Teams

AI agents can write interface code quickly, but they need explicit design context to stay on brand.

Bezel for AI-Assisted Teams

Early access · Space is limited!

Make design engineering the source of truth

Join Bezel as an early product partner and connect your tokens, components, build pipeline, and AI coding tools to one system. Join Pro at $7 per month for one year, billed annually, with personalized onboarding and support throughout your first year. As a product partner, your direct feedback will help guide new features and the future of Bezel.

Early Access Book a demo

Spots are extremely limited. Acceptance requires a demo and a commitment to sharing ongoing feedback.