Blogs

What is a design token?

Melissa Rojas

A design token is a key-value pair that represents a single piece of a design system's visual style. These tokens are used to store design decisions such as colors, typography, spacing, and other properties in a format that can be easily consumed and applied across different platforms and environments.

Key Concepts of Design Tokens

  1. Atomic Elements:

Design tokens capture the smallest possible pieces of design decisions, like color values, font sizes, or spacing units.

  1. Consistency:

Using tokens ensures that the same design values are used consistently across various components and screens.

  1. Platform Agnostic:

Tokens can be transformed into different formats suitable for various platforms (e.g., CSS, JavaScript, iOS, Android), ensuring consistency across web, mobile, and other environments.

  1. Scalability:

They enable easy updates and scalability. Changing a token value in one place can propagate that change throughout the entire system.

  1. Themability:

Design tokens can be used to create themes. For example, dark and light themes can use different sets of tokens.

Types of Design Tokens

  • Color Tokens:

Store color values (e.g., primary, secondary, and background color).

  • Typography Tokens:

Define font-related properties (e.g., font family, font size, font weight).

  • Spacing Tokens:

Specify spacing units (e.g., margins, paddings, gaps).

  • Sizing Tokens:

Define size values (e.g., width, height).

  • Border Tokens:

Capture border properties (e.g., border width, border radius).

  • Shadow Tokens:

Represent shadow styles (e.g., box shadow, text shadow).

Example of Design Tokens

In JSON format, design tokens might look like this:

{
  "color": {
    "primary": "#FF5733",
    "secondary": "#33CFFF",
    "background": "#FFFFFF"
  },
  "typography": {
    "fontFamily": "Arial, sans-serif",
    "fontSize": {
      "small": "12px",
      "medium": "16px",
      "large": "24px"
    }
  },
  "spacing": {
    "small": "8px",
    "medium": "16px",
    "large": "32px"
  }
}

Benefits of Design Tokens

  • Centralized Control:

Makes it easier to manage and update design values from a single place.

  • Improved Collaboration:

Designers and developers have a common reference, reducing misunderstandings.

  • Efficiency:

Speeds up the development process by providing ready-to-use values.

  • Quality and Consistency:

Ensures a uniform look and feel across all parts of the application.

In summary, design tokens are fundamental building blocks in a design system, providing a structured and scalable way to manage design decisions across different platforms and components.

Melissa Rojas
Product Designer
August 19, 2024

Filed Under:

design

Recommended Reading

Microsoft SharePoint vs dotCMS: A Comprehensive Comparison for Intranet

This blog post will break down the two most popular intranet solutions: SharePoint and dotCMS to help you decide which is best for your company.

Stability and Security: How the WordPress Licensing Dispute is Impacting Enterprise CMS

Recent events in the content management space, including WordPress's licensing disputes, have highlighted the critical need for stability in enterprise CMS platforms.

New Feature: Automate Development & Deployments with dotCLI

dotCLI is a CLI tool that provides devs with a command-based interface for automating tasks and managing software deployment processes.

Highly Rated and Recommended

We're rated Excellent 4.2/5 stars on G2 - with 95+ verified reviews