Introduction

Design tokens are the core building blocks of a design system, ensuring consistency and reusability across digital products by defining styles like colors, typography, and spacing.

Understanding Design Tokens

Design tokens are like building blocks for design decisions. They define colors, typography, spacing, and other styles in a consistent and reusable way across all platforms.

Why are they important?

They keep designs consistent.

They make design updates easier.

They help developers and designers work together efficiently.

Where Are Tokens Stored?

Design tokens are stored in Figma, the single source of truth for all components of the Nova Design System.

For Designers

You use tokens directly in Figma to create consistent designs.

Figma variable structure :
Intentional / color / feedback / success / high / text

For Developers

Tokens are exported as CSS variables and Tailwind utility classes, ensuring design and code stay aligned.

Nova utility class structure :
.text-feedback-success-high

Types of Design Tokens

Primitive Tokens → Basic values like colors and spacing.

Intentional Tokens → Purpose-specific tokens (e.g., error, success, interactive elements).

Component-Specific Tokens → Tokens tailored for particular UI components (e.g., buttons, forms).

Reference flow

Context agnostic tokens

By leveraging a context-agnostic approach, tokens remain flexible and reusable, decoupling design decisions from specific themes while maintaining a unified design language.