Thanks! I had the same question.

I think there are quite a few grey-hairs in the Elixir community (myself included) who prefer doing almost anything else over tinkering with CSS, so it’s worth taking the time to explain the problem context and the problem your library solves.

Welcome to the community BTW, and thanks for your work on this library.

I should have made my question a little more specific and clear.

To be clear my question was made to make you realise that your topic doesn’t address users that have no clue what are design tokens, thus no idea what this is useful for. I know we can google it, but as someone that worked before as a Developer Advocate I would recommend you to be more specific in your promotion of your package to help increase it’s adoption among people unaware of what are design tokens.

…what even are “design tokens”?

@Exadra37 @dimitarvp Thank you for your questions and advises.
We assumed that Design Tokens were well know from the developer and designer community however even the most experimented of us lack knowledge about it.

What Are Design Tokens?

Design tokens are the smallest building blocks of a design system, storing design decisions such as colors, typography, spacing, shadows, and more in a structured, reusable format. They ensure consistency across different platforms and can be dynamically updated.

Core Idea of Design Tokens

• Platform-Agnostic: Instead of hardcoding values in CSS, Swift, or Android XML, design tokens store values in a structured format like JSON.
• Scalability: Tokens allow design changes to be applied globally across a system.
• Automation & Theming: Design tokens enable dynamic themes and dark/light mode transitions.
• Bridging Design & Code: They create a single source of truth between designers and developers.

History & Evolution of Design Tokens

1. Early Days (Pre-2014)

• Before tokens, design values were manually managed in stylesheets or hardcoded in codebases.
• Design systems existed but were often static and difficult to maintain.

2. Salesforce & Lightning Design System (2014-2016)

• Salesforce popularized the term “design tokens” in their Lightning Design System (2014).
• The goal was to create a consistent experience across platforms (Web, iOS, Android).
• Tokens were first stored in SCSS variables, later transitioning to JSON for platform-agnostic usage.

3. Adoption by the Industry (2017-2019)

• Companies like Adobe, IBM, Google, Microsoft adopted tokens in their design systems.
• Style Dictionary (by Amazon) was released, offering a way to export tokens into different formats (CSS, Android, iOS, JSON).
• The rise of Figma & design automation tools further accelerated adoption.

4. Figma Tokens & Automation (2020-Present)

• Figma Tokens Plugin introduced a way to manage tokens directly inside Figma, enabling live sync between design tools and codebases.
• Tokens Studio (formerly Figma Tokens) extended this to support multi-theme, aliases, and mode-based design tokens.
• Open Source Standardization: W3C, Token CSS, and Design Token Community Groups are working on defining a standard.

How Are Design Tokens Used?

• In Design Tools: Defined in tools like Figma, Sketch, or Adobe XD.
• In Code: Exported via JSON, transformed using tools like Style Dictionary into platform-specific formats.
• For Theming: Different themes (light/dark, brand variations) can be handled dynamically.

Example of Design Tokens (JSON Format)

{
  "color": {
    "primary": { "value": "#ff5733", "type": "color" },
    "background": { "value": "#ffffff", "type": "color" }
  },
  "typography": {
    "fontSize": { "value": "16px", "type": "size" }
  },
  "spacing": {
    "small": { "value": "8px", "type": "size" }
  }
}

This JSON can be transformed into:

• CSS Variables: --color-primary: #ff5733;
• iOS Variables: "primary": UIColor(red: 1.0, green: 0.34, blue: 0.2, alpha: 1.0)
• Android XML: <color name="primary">#ff5733</color>

Conclusion

Design tokens help streamline the connection between design and development, ensuring consistency and scalability. Their adoption continues to grow, with tools and frameworks evolving to support them natively.

Readings

Here are some import links
Style Dictionary
W3C Design Tokens Specification
Tokens Studio (Figma Plugin)

We hope this brings more clarity and understanding of Design Tokens.

What is DesignX?