Skip to main content

Core Concepts

Bezel organizes your design system into tokens, groups, and themes.

Tokens​

A token is a named design value, such as a color, spacing size, or font family. Define it once and reuse it throughout your app.

Each token has a type that describes its value. See Token Types for the full list.

Groups​

Groups organize tokens like folders. A common structure uses:

  • Base tokens for raw values, such as a color palette.
  • Semantic tokens for roles, such as a button background, that reference base tokens.

Themes​

Themes let you use different values for the same tokens, such as light and dark colors.

Every project starts with default ($root). Other themes inherit those values unless you override them.

Use tokens in your app​

Download your tokens as design-tokens.json, or fetch them with MCP on Pro and higher. Bezel Kit turns that file into CSS variables and other configured outputs.

Published releases let you save a versioned snapshot for later use.

Ready to begin? Create a project.