Design Tokens

What Are Design Tokens?

Design tokens are design decisions expressed as data. They serve as a shared language between design and engineering, providing a consistent foundation for building user interfaces. By acting as a “source of truth,” tokens ensure that product experiences feel unified, cohesive, and scalable across the Progress Infra 360 ecosystem.

Tokens encode essential design elements, such as colors, spacing, typography, object styles, and animations, in reusable, systemized formats. For example:

A color can be represented as an RGB value.
Spacing can be expressed as a pixel value.
Animation easing can use Bezier coordinates.

By relying on tokens instead of hard-coded values, the I3DS token system supports scalability, adaptability, and consistency across a variety of platforms and products.

I3DS Design Token System

The I3DS token system prioritizes predictability and constiency. Rather than providing every possible value for all scenarios, the system focuses on a carefully curated set of tokens. While tokens provide critical design information, they work in conjunction with additional design and engineering documentation for a complete understanding of components and patterns.

Tokens are directly integrated into I3DS component libraries, UI kits, and development resources, covering platform scales, color themes, component states, and more. Teams can also utilize tokens independently for non-I3DS implementations.

Types of Design Tokens

Warning

I am just guessing here this needs to be aligned from UX

Global Tokens

These tokens are used across the entire design system. They represent foundational values such as colors, spacing, and typography that are consistent system-wide.

Component-Specific Tokens

These tokens are tailored to individual components, providing specific values for those components while referencing global tokens wherever possible.

Alias Tokens

Alias tokens are intermediate references that connect component-specific tokens to global tokens. This abstraction allows flexibility while maintaining consistency.

Theme Tokens

Theme tokens define design decisions for specific themes, such as light and dark modes, or custom brand themes. They ensure consistent adjustments across products while adhering to a unified system.

Examples of Design Tokens

Warning

Needs real examples not made up stuff

Size Tokens

Size tokens are categorized into: - T-Shirt Sizing (e.g., small, medium, large): Used for consistent spacing and typography across components. Each size follows a linear scale (e.g., increments of 8px). - Numeric Sizing (e.g., size-50, size-100): Used for flexible components like avatars or thumbnails, where a broader range of sizes is required. These tokens follow a non-linear scale.

Color Tokens

Global Tokens: Represent foundational colors in the system (e.g., blue-500 as #0265DC).
Alias Tokens: Represent specific usage (e.g., primary-color referencing blue-500).

Layout Tokens

These tokens define core layout elements, including: - Object styles (e.g., borders, shadows) - Spacing (e.g., padding, margins)

Naming Design Tokens

Warning

Needs a real naming convention

Naming Principles

Human-Readable
Token names use descriptive and human-friendly language to ensure accessibility for all stakeholders, not just designers and engineers.
Flat Structure
A flat naming structure avoids nested hierarchies, enabling clear and direct communication without prioritizing specific coding constructs.
Predictable and Flexible
Token names follow a structured, natural language format, accommodating updates while remaining intuitive and scalable.

Naming Structure

Warning

TBD

Why Use Design Tokens?

Design tokens enable:

Scalability: Easily adapt to different platforms, themes, and products.
Consistency: Ensure cohesive experiences across the Infra 360 ecosystem.
Efficiency: Save time for design and engineering teams by providing reusable, standardized values.
Flexibility: Allow for seamless updates and iterations within the system.