Vic Burneo • UX UI Portfolio

Why design tokens matter today?

Design tokens are more than a trend they’re a response to the challenges of modern product development. Today, brands operate across platforms, devices, and regions. With that complexity, it’s not sustainable to manage design decisions through traditional specs like PDF style guides or static Figma files. Tokens give us a better way.

Traditional Specs vs Design Tokens
How tokens solve real-world problems?
The future of tokens

Traditional Specs vs Design Tokens
How tokens solve real-world problems?
The future of tokens

Traditional Specs vs Design Tokens
How tokens solve real-world problems?
The future of tokens

Core Concepts & Language

Design tokens are named design values, like colours, fonts, spacing, stored in a central system. They're reusable, portable, and platform-agnostic. Instead of hardcoding values, you use names like colour.primary or spacing.medium.

A simple token system might look like this:
Atomic Foundations
Mapping to the Ecosystem
Separation of Concerns

A simple token system might look like this:
Atomic Foundations
Mapping to the Ecosystem
Separation of Concerns

A simple token system might look like this:
Atomic Foundations
Mapping to the Ecosystem
Separation of Concerns

Token System Architecture

Tokens are typically structured into 3 levels:  

Base tokens: Raw values like #000000, 16px,
Semantic tokens: Contextual names like color.text.primary
Component tokens: UI-specific use like button.padding.medium This architecture helps scale and adapt your system.

Distribution Methods
Preparing for Adoption
Template

Distribution Methods
Preparing for Adoption
Template

Distribution Methods
Preparing for Adoption
Template

Why Naming Matters?

Good naming helps everyone understand what a token means. Clear names avoid confusion, support collaboration, and make it easier to maintain your system over time. Poor naming slows teams down and breaks trust in your design system.

Common Pitfalls
Cross-Discipline Friendly
Naming Frameworks
Naming by Platform

Common Pitfalls
Cross-Discipline Friendly
Naming Frameworks
Naming by Platform

Common Pitfalls
Cross-Discipline Friendly
Naming Frameworks
Naming by Platform

Tools & Ecosystem

There are several tools to help manage design tokens. Some popular ones:

Figma Variables
Tokens Studio
Style Dictionary

Note: Each has pros and cons depending on your team and stack.

Accessibility in Themes
Advanced Theming

Accessibility in Themes
Advanced Theming

Accessibility in Themes
Advanced Theming

Theming Logic

Themes let you swap out token values while keeping the same structure. One token name, different outcomes: dark/light mode, brand variants, etc.

Accessibility in Themes
Advanced Theming

Accessibility in Themes
Advanced Theming

Accessibility in Themes
Advanced Theming

Tokens as a Product

Treat tokens like software. They need roadmaps, governance, release cycles, and feedback loops. This mindset helps them scale responsibly.

Distribution Methods
Preparing for Adoption
Template

Distribution Methods
Preparing for Adoption
Template

Distribution Methods
Preparing for Adoption
Template

Understanding Users

Designers, developers, and product managers all use tokens differently. Get their feedback, learn their pain points, and support their workflows.

Lifecycle Stages
Governance Models
Versioning & Branching

Lifecycle Stages
Governance Models
Versioning & Branching

Lifecycle Stages
Governance Models
Versioning & Branching

Maintenance, Governance & Evolution

Designers, developers, and product managers all use tokens differently. Get their feedback, learn their pain points, and support their workflows.

Lifecycle Stages
Governance Models
Versioning & Branching

Lifecycle Stages
Governance Models
Versioning & Branching

Lifecycle Stages
Governance Models
Versioning & Branching

Advanced Topics & Future proofing

Enterprise Use Cases:

M&A
Subbrands
Complex teams

Planning your design system to handle new needs and changes over time.

Global & Content Scaling
AI Integration
Capstone - Plan your organization’s design token roadmap

Global & Content Scaling
AI Integration
Capstone - Plan your organization’s design token roadmap

Global & Content Scaling
AI Integration
Capstone - Plan your organization’s design token roadmap

Follow me on other channels

Instagram

Navigation

Case studies

Follow me on other channels

Instagram

Navigation

Case studies

Follow me on other channels

Instagram

Navigation

Case studies

Follow me on other channels

Instagram

Navigation

Case studies

Follow me on other channels

Instagram

Navigation

Case studies

Why design tokens matter today?

Traditional Specs vs Design Tokens

How tokens solve real-world problems?

The future of tokens

Traditional Specs vs Design Tokens

How tokens solve real-world problems?

The future of tokens

Traditional Specs vs Design Tokens

How tokens solve real-world problems?

The future of tokens

Core Concepts & Language

Design tokens are named design values, like colours, fonts, spacing, stored in a central system. They're reusable, portable, and platform-agnostic. Instead of hardcoding values, you use names like colour.primary or spacing.medium.

A simple token system might look like this:

Atomic Foundations

Mapping to the Ecosystem

Separation of Concerns

A simple token system might look like this:

Atomic Foundations

Mapping to the Ecosystem

Separation of Concerns

A simple token system might look like this:

Atomic Foundations

Mapping to the Ecosystem

Separation of Concerns

Token System Architecture

Tokens are typically structured into 3 levels: Base tokens: Raw values like #000000, 16px,Semantic tokens: Contextual names like color.text.primaryComponent tokens: UI-specific use like button.padding.medium This architecture helps scale and adapt your system.

Distribution Methods

Preparing for Adoption

Template

Distribution Methods

Preparing for Adoption

Template

Distribution Methods

Preparing for Adoption

Template

Why Naming Matters?

Good naming helps everyone understand what a token means. Clear names avoid confusion, support collaboration, and make it easier to maintain your system over time. Poor naming slows teams down and breaks trust in your design system.

Common Pitfalls

Cross-Discipline Friendly

Naming Frameworks

Naming by Platform

Common Pitfalls

Cross-Discipline Friendly

Naming Frameworks

Naming by Platform

Common Pitfalls

Cross-Discipline Friendly

Naming Frameworks

Naming by Platform

Tools & Ecosystem

There are several tools to help manage design tokens. Some popular ones:Figma VariablesTokens StudioStyle DictionaryNote: Each has pros and cons depending on your team and stack.

Accessibility in Themes

Advanced Theming

Accessibility in Themes

Advanced Theming

Accessibility in Themes

Advanced Theming

Theming Logic

Themes let you swap out token values while keeping the same structure. One token name, different outcomes: dark/light mode, brand variants, etc.

Accessibility in Themes

Advanced Theming

Accessibility in Themes

Advanced Theming

Accessibility in Themes

Advanced Theming

Tokens as a Product

Treat tokens like software. They need roadmaps, governance, release cycles, and feedback loops. This mindset helps them scale responsibly.

Distribution Methods

Preparing for Adoption

Template

Distribution Methods

Preparing for Adoption

Template

Distribution Methods

Preparing for Adoption

Template

Understanding Users

Designers, developers, and product managers all use tokens differently. Get their feedback, learn their pain points, and support their workflows.

Lifecycle Stages

Governance Models

Tokens are typically structured into 3 levels:  

Base tokens: Raw values like #000000, 16px,
Semantic tokens: Contextual names like color.text.primary
Component tokens: UI-specific use like button.padding.medium This architecture helps scale and adapt your system.

There are several tools to help manage design tokens. Some popular ones:

Figma Variables
Tokens Studio
Style Dictionary

Note: Each has pros and cons depending on your team and stack.

Enterprise Use Cases:

M&A
Subbrands
Complex teams

Planning your design system to handle new needs and changes over time.