Tokens

Design tokens are the central building blocks of a design system. They ensure consistency and reusability by defining core design values such as colors, typography, and spacing.

What are Design Tokens?

Design tokens are named values that systematically represent design decisions like colors, font sizes, spacing, or shadows. They are used in code, tools, and documentation to guarantee a unified look and feel.

Structure and Naming Conventions

Tokens are usually organized by categories such as color, typography, spacing, etc. Naming follows a consistent scheme, e.g. color-primary, font-size-base, spacing-small.

Token Overview

Token Name	Value	Description
color-primary	#0057FF	Primary color
font-size-base	16px	Base font size
spacing-small	8px	Small spacing

Usage in Code

Tokens are used in CSS, SCSS, JS, or design tools like Figma. Example in CSS:

.button {
	background-color: var(--color-primary);
	font-size: var(--font-size-base);
	margin: var(--spacing-small);
}

Sources and Tools

Tokens are often managed in JSON, YAML, or with tools like Style Dictionary. The source should be clearly documented and versioned.

Maintenance and Updates

Tokens are maintained centrally. Changes follow clear processes to ensure consistency throughout the system.

---

Tip: Use tables, code examples, and visual representations (e.g. color swatches) to document tokens clearly. Link to further resources or guidelines within the design system.