Tokens

Design tokens provide a scalable way to define and apply design properties like colors, spacing, and typography — directly from your design system into your codebase.

They ensure consistency, enable theming, and make it easier to update UI styles without manually changing hardcoded values in multiple places.

---

What is a design token?

A design token is a named value (often a CSS variable) that stores visual design attributes.
They can represent:

• Color (--brand-500)
• Spacing (--spacing-xl)
• Typography (--font-size-body)
• Border radius, shadows, opacity, etc.

---

Token Structure

Tokens are exported from our Figma design system using a plugin and converted into CSS variables.

Example:

:root {
  --brand-500: #5d176a;
  --warning-300: #e0af5b;
  --neutral-100: #edeef3;
}

---

Color Tokens

We categorize color tokens by their purpose:

Category	Example token	Usage
Brand	--brand-500	Primary brand color
Critical	--critical-500	Errors, destructive actions
Warning	--warning-500	Warnings, confirmations
Success	--success-500	Positive feedback
Info	--info-500	Informational messages
Neutral	--neutral-500	Text, backgrounds, borders

---

Interactive Tokens

Tokens are also used for interactive states like buttons, toggles and inputs:

:root {
  --interactive-primary-brand-enabled: var(--brand-500);
  --interactive-primary-brand-hovered: var(--brand-700);
  --interactive-input-border: var(--neutral-300);
}

---

How to use tokens in your components

HTML + CSS

<button class="btn">Click Me</button>

.btn {
  background-color: var(--interactive-primary-brand-enabled);
  color: var(--neutral-0);
  border-radius: 4px;
  padding: 12px 16px;
}

SCSS

.button {
  background-color: var(--interactive-primary-brand-enabled);
  &:hover {
    background-color: var(--interactive-primary-brand-hovered);
  }
}

---

Why use tokens?

✅ Consistency
✅ Scalability
✅ Theming support
✅ Easier maintenance

Changing a single token value updates your UI everywhere that token is used.

---

Token Sources

All tokens are defined in a tokens.json file exported from Figma.

Our build pipeline converts this JSON to a CSS file, like:

tokens.css
├── :root {
├────── --brand-500: #5d176a;
├────── --interactive-primary-brand-enabled: var(--brand-500);