Getting Started with Bezel
Bezel is a design token editor with a built-in AI assistant. You use it to build the raw values that power your design system (colors, type, spacing, borders) and then get them out to your team, whether that's publishing a versioned release for developers, pushing into Figma, or handing the tokens straight to your coding agent.
What's in the app
The side nav on the left has three tabs, and they change what you're working on:
| Tab | What it does |
|---|---|
| Design | Nine guided workflows for the decisions that define a brand: color, type, spacing, borders. Requires a plan that includes AI credits |
| Tokens | The token table: every group, every value, editable directly |
| Code | A read-only view of the GitHub repo linked to your project |
The center panel shows whichever of those you've selected. The AI assistant opens alongside it from the sparkle icon in the panel header. On the right is a live preview that renders a real site using your current tokens, updating as you edit.
A few things you can do:
- Build and organize tokens into groups, with types for colors, dimensions, font settings, durations, and more
- Use the Design guides for a guided approach to color palettes, type scales, border styles, and spacing
- Create multiple themes and override specific tokens per theme
- Chat with the AI to create or modify tokens
- Browse the repo linked to your project without leaving the app
- Publish versioned releases, or download the current state whenever you need it
- Give your coding agent direct access to your tokens over MCP
- Use the Figma plugin to push tokens into Figma as variables, or pull Figma variables back in
Finding your way around these docs
| Section | What's in it |
|---|---|
| The Editor | The tabs, panels, and controls you'll be using |
| Creating a Project | Starter repos, preview URLs, and how to begin |
| Token Editor | The token table, token types, themes, and organizing things |
| AI Assistant | Chatting with the AI to build and edit tokens |
| Design Mode | The nine guides for color, type, spacing, and borders |
| Code | Viewing your linked repo and getting tokens out of Bezel |
| Live Preview | The preview panel, preview URL, and device widths |
| MCP Server | Giving AI coding tools your real tokens |
| Libraries | The open-source packages that turn tokens into CSS |
| Versions & Releases | Downloads, versioned releases, and release notes |
| Figma Integration | Syncing tokens with Figma variables |