The session is focused only on color tokens. Arguably the most complex and foundational token category. We’ll look at how major design systems like Adobe’s Spectrum, IBM’s Carbon, and Google’s Material Design 3 solve color at scale, and then explore how you can apply those lessons to your own work.
We’ll start with a brief recap to ensure everyone shares the same foundation. From there, we’ll cover how to select appropriate color spaces, define accessible palettes, and apply upcoming changes in WCAG 3.0. You’ll learn how to design semantic token layers tied to real interface roles, define naming conventions that scale, and structure component-level tokens for flexible reuse.
We’ll also discuss what the life-cycle of color tokens looks like, from how tokens are introduced, maintained, and deprecated over time. Explore the invisible part of the system and find out how to create documentation, dedicate ownership, and governance that is needed to keep your system sustainable as it grows. Finally, you’ll learn how to prepare your tokens for automation and multiplatform delivery using Style Dictionary.
This workshop is not hands-on in the “open your laptop” sense. It’s mostly lecture-based, filled with examples, visual demos, and moments for reflection and discussion. There will be a few interactive parts, but the real value comes from the thinking behind the system, NOT just clicking buttons.
It’s designed for intermediate to senior-level designers and design managers who already work with UI components and understand the basics of design systems. If you’re a junior designer still learning layout and visual design principles, you’re welcome to join, but the pace might feel fast. Product managers or engineers involved in system design are also welcome, especially if they want to better understand the logic behind scalable color token structures.
What You’ll Learn
- The foundations of design tokens
What they are, how they’re structured, and why they matter. We’ll break down token tiers (core,
semantic, component) and explain the different value types (raw values, aliases, and mixing, computational, adaptive). - How color tokens fit into the bigger picture
Understand the specific role of color in design systems, and why it’s one of the most challenging yet essential token types to get right. - How to choose the right color space
Learn the differences between standard, wide gamut, and perceptually uniform color spaces.
You’ll know when to use which one, and why it matters for flexibility and accessibility. - What accessibility standards require today and tomorrow
Explore WCAG 2.2 contrast rules, how the contract ratio formula works and how we can manipulate the colors in the color space so we can pass criteria without heavily modify all color
attributes. Check what is changing in WCAG 3.0 and how future standards will influence how we
build and test color systems. - How large design systems define and manage color
We’ll look at how Adobe’s Spectrum, IBM’s Carbon, and Google’s Material Design approach color
tokens. You’ll get real examples of what to adapt and what to avoid. - How to define the anatomy of a good color token
We’ll walk through real-world naming conventions, show how to avoid ambiguity, and explain how
tokens evolve as systems grow. - How to build a color palette that fits your product
You’ll learn how to define brand-adaptable palettes based on real product needs, not just theory
or moodboards. - How to create a semantic layer that makes sense
Map your palette to clear interface roles (backgrounds, borders, surfaces, and more). You’ll learn
how to structure and name these tokens so your team actually wants to use them. - How to validate your color tokens rules for accessibility
After we define rules we’ll go through testing workflows and see how to build in contrast
validation directly into your design process. - How to define color tokens at the component level
Learn how to link your semantic tokens to UI components like buttons, inputs, and alerts.
Understand how the structure supports both consistency and flexibility. - How to keep your token system alive and healthy
Understand governance. Know who owns what, how to review tokens, and how to keep your
structure maintainable as your product scales. - How to automate your token pipeline with Style Dictionary
Learn how to structure your tokens for multi-platform delivery and support theming or brand
variations. You’ll see how to go from a clean JSON file to usable outputs for web, iOS, and
Android.
Additional Resources You’ll Get After the Workshop
You won’t just leave with new knowledge, you’ll take home a practical toolkit to help you bring
these ideas to life in your team or product environment.
- A ready to use presentation deck you can adapt for internal workshops or stakeholder alignment sessions.
- Naming convention cheat sheets for core, semantic, and component level color tokens.
- A structured Style Dictionary JSON file that supports multi-theme, multi-brand, and multiplatform exports.
- Sample token workflows and examples used during the workshop, for future reference.
- A list of tools and plugins demonstrated in the workshop, with links and setup guidance.
- A glossary of key terms and concepts to help your team build shared understanding.
Q&A
What language will the workshop be conducted in?
If there are non-Bulgarian participants, the entire workshop will be held in English. Otherwise, the
presentation and all discussions will be in Bulgarian, with English used only for key terms and slides.
Why focus only on color tokens?
Each token category (color, spacing, typography, animation, etc) have its own logic, challenges, and best practices. Covering all of them in a single workshop would limit us to surface-level overviews. Instead, this session is dedicated entirely to color, allowing us to go much deeper than would be possible otherwise. Color tokens are often the first category created in a system, and also one of the most complex.
Do I need to know about design tokens already?
A basic understanding of design systems will help, but we’ll start with a quick overview to get everyone on the same page.
Will we talk about accessibility?
Yes. Accessibility is a big part of how color tokens are designed and tested. We’ll cover what WCAG 2.2 requires today, but also take a quick look to WCAG 3.0, which introduces new contrast models and potentially big shifts in how we define usable color systems.
What if my team doesn’t have a design system yet?
Then this workshop is perfect. Whether you’re starting fresh or trying to clean up something that
grew too fast, you’ll get a clear mental model for how to approach color in a way that scales.
Will this apply to Web, iOS, Android, and design tools like Figma, Sketch, or Framer?
Yes. The approach we’ll cover is platform-agnostic. You’ll learn how to define tokens once and transform them for multiple environments using tools like Style Dictionary. When we discuss how tokens apply in design tools, Figma will be used for all demonstrations.
Габриел (Габо) Атанасов
Senior Product Designer
Hey, I’m Gabe, a product designer with nearly 10 years of experience across banking, software, and SaaS industries. I have worked in both agency and product teams, and I have learned how differently the projects dynamics are in each environment.
I always believed that good designers must understand the technical side of what they are building. That mindset led me to take on the challenge of creating and automating a crossplatform color token system for a large enterprise company.
I’m leading the workshop “Color Design Tokens – Build Scalable Color Systems Like the Big Teams” because I know how tricky it can be to get color tokens right. Over the past year, I went through three different approaches before landing on a structure that actually worked. I’m here to share everything I learned, so you can skip the trial and error, and build with confidence.
Outside of work, I love building things with my hands. I’m learning the basics of woodcutting and started building a grape arbor in my grandparents’ village. I have also been upgrading the old electrical installation and slowly turning the house into a smart one.