# Bezel Documentation > Official documentation for Bezel, an AI design system and design token management platform for designers, developers, design engineers, and AI coding agents. Use this index to find the authoritative guide for a Bezel workflow. Each link opens a clean Markdown version generated from the same source as the documentation site. For a single-file snapshot of the complete documentation, use [llms-full.txt](https://docs.bezel.new/llms-full.txt). ## Table of Contents - [Getting Started](https://docs.bezel.new/docs/intro.md): 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, spacin... - [Quick Start](https://docs.bezel.new/docs/quick-start.md): Add Bezel to an app you already have. By the end, your tokens come from your Bezel project, compile - [Creating a Project](https://docs.bezel.new/docs/creating-a-project.md): A project holds one design system: its tokens, themes, versions, and the repo it's linked to. Create one from the projects list. - [Core Concepts](https://docs.bezel.new/docs/core-concepts.md): A quick rundown of the main ideas in Bezel before you dig in. - [The Editor](https://docs.bezel.new/docs/the-editor.md): Open a project and you get four regions: the side nav, the center panel, the AI assistant, and the preview. Here's what each one does. - [Color Systems](https://docs.bezel.new/docs/design-guides/color-systems.md): The color section of the guides covers four things: primary, neutral, accent, and status. Each lives on its own page in the sidebar under **Color**. - [Themes & Contexts](https://docs.bezel.new/docs/design-guides/component-themes.md): You can have multiple themes in a single Bezel project. Light, dark, high-contrast, whatever you need. Each theme is a layer of overrides on top of... - [Design Mode Overview](https://docs.bezel.new/docs/design-guides/overview.md): The **Design** tab gives you a structured way to build out your token system. Instead of typing raw values into the token table, you get controls, ... - [Spacing & Layout](https://docs.bezel.new/docs/design-guides/spacing-layout.md): Three guides here, under **Border** and **Spacing** in the sidebar: border widths, border radii, and a spacing scale. - [Typography](https://docs.bezel.new/docs/design-guides/typography.md): Two pages here: **Font Family** for setting up your font choices, and **Type Scale** for the size system. - [AI Chat Interface](https://docs.bezel.new/docs/token-editor/ai-chat.md): The AI Assistant has moved to its own section. See [AI Assistant Overview](../ai-assistant/overview) to get started. - [Organizing Your Token Sets](https://docs.bezel.new/docs/token-editor/organizing-tokens.md): Bezel organizes everything through groups, which show up in the side nav as a collapsible tree under the **Tokens** tab. A well-structured group hi... - [Token Editor Overview](https://docs.bezel.new/docs/token-editor/overview.md): Click any group in the side nav under the **Tokens** tab and the center panel opens a table showing every token in that group. This is where you sp... - [Token Types & Properties](https://docs.bezel.new/docs/token-editor/token-types.md): Every token has a type. It tells Bezel (and anything consuming your tokens downstream) what kind of value is stored there. - [Live Preview Overview](https://docs.bezel.new/docs/live-preview/overview.md): The preview panel on the right side of the app renders a real site using your current tokens. Change a value and the site restyles, with no reload ... - [Preview URL](https://docs.bezel.new/docs/live-preview/preview-url.md): The Preview URL is the site the preview panel loads. Every project has one, set when you create the project and changeable any time. - [Using Live Preview](https://docs.bezel.new/docs/live-preview/using-live-preview.md): On the default Radium Storybook, use the sidebar inside the preview to choose what's on screen. Which one to reach for depends on what you're check... - [Global Mode](https://docs.bezel.new/docs/ai-assistant/global-mode.md): Global mode loads your entire project into the AI's context, every group and every token. Use it when a task spans more than one group, or when you... - [Working With a Group](https://docs.bezel.new/docs/ai-assistant/group-mode.md): Group mode is the default. When it's active, the AI only sees the token group you have open. Nothing else is in scope. - [AI Assistant Overview](https://docs.bezel.new/docs/ai-assistant/overview.md): There's a built-in AI assistant in Bezel. You can chat with it to create tokens, update values, reorganize groups, or get suggestions while working... - [Overview](https://docs.bezel.new/docs/mcp-server/overview.md): Bezel's MCP server puts your design tokens inside your AI editor. Instead of pasting a token file into chat and hoping it stays current, your assis... - [Install Server](https://docs.bezel.new/docs/mcp-server/setup.md): One endpoint, one sign-in: - [Tool Reference](https://docs.bezel.new/docs/mcp-server/tool-reference.md): Everything the server exposes: **17 tools**, **1 resource**, and **5 prompts**. You rarely call these by hand, since your assistant picks them, but... - [Workflows](https://docs.bezel.new/docs/mcp-server/workflows.md): Prompts that get useful results out of the server. All of these assume you've [installed the MCP](./setup). - [Creating a Release](https://docs.bezel.new/docs/publishing/creating-a-release.md): Click the publish button (the paper plane icon) in the app header to open the Publish Tokens dialog. - [Versions & Releases Overview](https://docs.bezel.new/docs/publishing/overview.md): Two ways to get your tokens out of Bezel: download or publish. - [Version Management](https://docs.bezel.new/docs/publishing/version-management.md): The Releases page shows every published version of your project. Open it from the version number in the app header. - [The design-tokens.json File](https://docs.bezel.new/docs/code/design-tokens-file.md): One file behaves differently from the rest of the repo. When you open `design-tokens.json` in the **Code** tab, Bezel shows **your current tokens**... - [Code Mode](https://docs.bezel.new/docs/code/overview.md): Every Bezel project is linked to a public GitHub repo, chosen when you create the project. The **Code** tab lets you browse that repo without leavi... - [Importing Tokens from Figma](https://docs.bezel.new/docs/integrations/figma/importing-tokens.md): If your design system already lives in Figma as variables, **Sync to Project** pulls them into Bezel so you can manage, extend, and publish from th... - [Installation](https://docs.bezel.new/docs/integrations/figma/installation.md): :::info Not yet released - [Figma Integration Overview](https://docs.bezel.new/docs/integrations/figma/overview.md): Bezel has a Figma plugin for moving tokens between the two tools. You can push tokens into a Figma file as variables, or pull variables from Figma ... - [Publishing Variables to Figma](https://docs.bezel.new/docs/integrations/figma/publishing-variables.md): **Publish to Figma** pushes your Bezel tokens into a Figma file as Figma variables. Once that's done, designers can apply them to any element using... - [bezel-kit](https://docs.bezel.new/docs/libraries/bezel-kit.md): Turns a W3C Design Tokens (DTCG) file into a scoped `variables.css`, with one CSS scope per context and token references resolved to literal values... - [crystal](https://docs.bezel.new/docs/libraries/crystal.md): Pushes live, validated CSS and web fonts from a parent application into an embedded preview over `window.postMessage`. This is what makes the Bezel... - [loupe](https://docs.bezel.new/docs/libraries/loupe.md): Two small runtime helpers for an app themed by design tokens: work out which context to apply on load, and load the web fonts your tokens reference... - [Overview](https://docs.bezel.new/docs/libraries/overview.md): Bezel is open source beyond the app itself. Four packages do the work of getting tokens out of Bezel and into a running interface, and you can use ... - [radium](https://docs.bezel.new/docs/libraries/radium.md): A [shadcn/ui](https://ui.shadcn.com)-based component library and design system, already wired to Bezel end to end. It's the fastest way to see ever... - [Community](https://docs.bezel.new/docs/support/community.md): Bezel is built in the open, and most of that happens on Discord. Here's what each place is for. - [Getting Help](https://docs.bezel.new/docs/support/getting-help.md): The fastest way to get an answer is the **[Bezel Discord](https://discord.gg/ZFP5rJN3Jj)**. Start a post in **#help-and-support** and you'll usuall...