Tokens

Design tokens are the building blocks of our design system, encapsulating the core visual properties that define our brand’s look and feel. They provide a standardized and scalable way to manage design attributes such as colors, typography, spacing, shadows, and more. By using design tokens, we ensure consistency, maintainability, and flexibility across all our digital products.

What Are Design Tokens?

Design tokens are named entities that store design decisions. These decisions include anything from a color value to a border radius. Tokens are the source of truth for these values, making it easier to apply consistent styles across different platforms and devices.

Figma Demo

Code Source of Truth

GitHub - Victualler - Craft Tokens

Build Tokens

  1. Export updated variables from Figma using the plugin.
  2. Styles need to be added manually.
  3. Replace the 3 tokens files exported from Figma in the repository.
  4. From the ui directory, run pnpm build:tokens to rebuild the output files.
  5. When running pnpm dev again from the ui directory, Tailwind will rebuild with the latest tokens.

Token/Variable Naming

The general syntax for a token is as follows:

Namespace - Prefix - Category - Property - Modifier - State

  • Namespace = system name
  • Prefix = only used to identify core-level tokens
  • Category = the style being applied, such as color, text, etc.
  • Property = the UI element being affected by the token, such as bg, border, etc.
  • Modifier = the specifics of the token being applied, such as brand, neutral, etc.
  • State = if applicable, the interaction state for which the token is applied

Tokens Spreadsheet

Our tokens spreadsheet is embedded below or can be viewed here.