Define, manage, and apply consistent design decisions using scalable and platform-agnostic tokens in the Tendoo Design System.

Design Token

Design tokens are the single source of truth for storing and applying visual design decisions in the Tendoo Design System. They enable consistency across platforms, scale across teams, and bridge the gap between design and code.

Tokens are abstract values — such as color, spacing, typography, and motion — that can be mapped to actual styles in design tools and codebases.

Why Use Tokens?

Consistency — Standardizes UI styles across products.
Scalability — Enables theme customization and dark/light modes.
Efficiency — Reduces redundancy in both design and development.
Automation — Powers code generation and design-tool sync (e.g., Figma → code).

Token Categories

Category	Description	Example Token
Color	Brand, semantic, background, borders	`color.primary`, `color.surface`
Typography	Font family, size, weight, line height	`font.size.md`, `font.weight.semibold`
Spacing	Padding, margin, gaps	`space.md`, `space.lg`
Border	Border width	`border.thin`, `border.thick`
Corner Radius	Roundness of elements	`corner.sm`, `corner.lg`
Elevation	Shadows and depth	`elevation.md`, `elevation.lg`
Motion	Easing, duration, animation styles	`motion.duration.fast`
Z-Index	Stacking order	`z-index.modal`, `z-index.toast`

Token Format

Tokens follow a structured naming convention:


\[category].\[variant] = \[value]

Example

export const color = {
  primary: "#3B82F6",
  surface: "#FFFFFF",
  text: {
    default: "#111827",
    muted: "#6B7280",
  },
};

export const space = {
  sm: "8px",
  md: "16px",
  lg: "24px",
};

How to Use Tokens

In Design

Use design tools like Figma Tokens, Style Dictionary, or Tokens Studio to apply design tokens to layers and components. Tokens should be named consistently and synced with the codebase.

In Code

Apply tokens via CSS variables, utility classes, or Tailwind config extensions:

<div className="p-md bg-surface text-text-default">
  Example using design tokens
</div>

Theming Support

Design tokens enable light/dark themes and custom brand themes by swapping token values without changing component code.

// lightTheme.tokens.ts
export const color = {
  background: "#FFFFFF",
  text: "#000000",
};

// darkTheme.tokens.ts
export const color = {
  background: "#000000",
  text: "#FFFFFF",
};

Design tokens are the foundation of scalable UI systems. By abstracting values into reusable variables, Tendoo empowers teams to build with clarity, consistency, and confidence.

Design Token

On this page