Design Tokens for Microcopy with Style Dictionary Manage product interface copy, error messages, and labels as design tokens using Style Dictionary. Keep your product language consistent, controllable, and collaborative across teams and platforms.

🎉 New Article 🎉

Keep your microcopy (button labels, error messages, form hints) as Design Tokens using Style Dictionary

www.alwaystwisted.com/articles/a-d...

#DesignSystems #DesignTokens #WebDesign #ContentStrategy

Generating Utility Classes from Design Tokens using Style Dictionary Generate Utility Class CSS from design tokens using Style Dictionary for seamless design-to-development workflows and collaboration and snowflakes.

#AI brings utility #CSS back into the spot light, so here is how you can turn your #designTokens into utility classes: buff.ly/XD5onwu by @sturobson.com

Why? Utility classes are a middle ground between rigid components and ad‑hoc CSS: you can move fast in markup without hard-coding raw values.

2 weeks in a row‽

Yep, another Design Systems newsletter is ready to hit the inboxes at 10am (GMT) today.

A curated email with the finest Design Systems tutorials, articles, examples, and more.

Not signed up yet?

news.design.systems

#DesignSystems #FrontEnd #WebDev #WebDesign #DesignTokens

Using Notion With Style Dictionary for Design Tokens Management Set up a collaborative design token workflow using Notion for management and Style Dictionary for automated code generation. Includes bidirectional syncing and integration with design tools like Figma...

Notion 🤝 Design Tokens

I created and wrote about a workflow that lets you manage tokens in Notion which syncs to your codebase and back again with Style Dictionary

Perfect for everyone on your Design System team

www.alwaystwisted.com/articles/a-d...

#DesignTokens #DesignSystems #FrontEnd #WebDev

Using Notion With Style Dictionary for Design Tokens Management Set up a collaborative design token workflow using Notion for management and Style Dictionary for automated code generation. Includes bidirectional syncing and integration with design tools like Figma...

before Covid-19 I was giving conference talks on Design Tokens where I live demo'd integration with Google Sheets.

Well, 6 years later, here's a riff on those demos

Using Notion With Style Dictionary for Design Tokens Management

www.alwaystwisted.com/articles/a-d...

#DesignTokens #DesignSystems

#Development #Launches
Design Tokens Links · Guides, videos, and resources on design tokens ilo.im/16akco by Stuart Robson

_____
#DesignSystems #DesignTokens #ProductDesign #UiDesign #WebDesign #Development #WebDev #Frontend #CSS

~7 years ago I started curating a list of Design Tokens resources on GitHub… today I launch something better.

An updated, tagged collection of 292+ articles on design tokens.

www.alwaystwisted.com/projects/dtm...

more links/resources coming soon.

🙏🖤

#DesignTokens #DesignSystems #WebDev

What’s new in the Design Tokens spec: From static to living design data - zeroheight The Design Tokens spec reaches its first stable version, introducing modern color spaces, groups/aliases, and token resolvers to make design systems scalable and cross-platform.

#DesignTokens finally got a spec, here is what changed buff.ly/YyLttp2 by @zeroheight.com

- stable json format
- mode / theming support
- modern color formats (like oklch & display p3)
- separate alpha value for tokens
- referencing of tokens

Sadly still no way to change alpha for a ref

Design tokens with confidence Why the W3C design token standard is your new foundation.

The adoption of the W3C Design Token Standard marks a shift from proprietary, high-maintenance pipelines to a stable, universal ecosystem.

uxdesign.cc/design-token...

#DesignSystems #DesignTokens

Design Tokens With Confidence, by @lukasoppermann@mastodon.social (@uxdesigncc@me.dm):

https://archive.ph/EcCfq

#designtokens #json #css

Understanding $extensions in the Design Tokens Specification How the $extensions property lets teams innovate with design tokens without waiting for spec updates

The Design Tokens spec includes an $extensions property for tool-specific metadata and more.

Learn what it is and how to use it here.

Understanding $extensions in the Design Tokens Specification

www.alwaystwisted.com/articles/und...

#DesignTokens #DesignSystems #FrontEnd #WebDev #WebDesign

🙏🖤

5 accessibility checks to run on every component - zeroheight Hidde de Vries explains how to test components for accessibility, from keyboard support to screen readers and zoom.

5 Accessibility Checks to Run on Every Component, by @hdv@front-end.social (@zeroheight@mastodon.social):

zeroheight.com/blog/5-accessibility-che...

#accessibility #components #testing #keyboardnavigation #designtokens

5 accessibility checks to run on every component - zeroheight Hidde de Vries explains how to test components for accessibility, from keyboard support to screen readers and zoom.

#Development #Techniques
Design system accessibility checks · Five key tests to run on every component ilo.im/169mxi by Hidde de Vries

_____
#Accessibility #WCAG #ScreenReader #Keyboard #Zoom #DesignSystem #DesignTokens #Development #WebDev #Frontend

GitHub - lukasoppermann/style-dictionary-utils: A package of transforms, formats, filters, etc. to use in your style dictionary config to transform your design tokens A package of transforms, formats, filters, etc. to use in your style dictionary config to transform your design tokens - lukasoppermann/style-dictionary-utils

My #styleDictionary utils package now fully supports #w3c #designTokens allowing you to easily transform your w3c tokens with styleDictionary:

Check it out: buff.ly/554KaMM

And let me know how it is working for you.

Design Tokens aren’t enough. Architecture Decisions need a place in your Design System. TL;DR: I’m sharing a simple Architecture Decision template for documenting the why behind your design system decisions.

Design Tokens Aren’t Enough—Architecture Decisions Need a Place in Your Design System, by @samiamdesigns.bsky.social:

samiamdesigns.substack.com/p/design-tokens-arent-en...

#designsystems #designtokens #architecture #documentation

Engramma by @trysound.io is a web-based editor and converter to manage design tokens, visualize them in a tree structure, and export them as CSS variables or JSON format.

app.engramma.dev

The write-up is here: trysound.io/building-des...

#designtokens

What’s new in the Design Tokens spec: From static to living design data - zeroheight The Design Tokens spec reaches its first stable version, introducing modern color spaces, groups/aliases, and token resolvers to make design systems scalable and cross-platform.

What’s New in the Design Tokens Spec: From Static to Living Design Data, by @resource11@front-end.social (@zeroheight@mastodon.social):

zeroheight.com/blog/whats-new-in-the-de...

#designtokens #designsystems

Design Tokens Color Module 2025.10 This document describes the technical specification for design token color values and opacity.

The long awaited first stable version of the #designTokens spec has been published recently: buff.ly/Utcx1jl

This is a very important step for the community as it means tools can now work against a standard. I expect a lot of the existing tools to be updated soon.

Voici un carrousel qui vous donne un bon aperçu du plugin.

Découvrez et adopter Token Forge ici :
www.figma.com/community/pl...

#DesignSystem #DesignTokens #Figma #Frontend #Tokens #Plugin

From tokens to touchpoints: Powering a successful rebrand with your design system - zeroheight

From Tokens to Touchpoints: Powering a Successful Rebrand With Your Design System, by @zeroheight@mastodon.social:

zeroheight.com/blog/from-tokens-to-touc...

#designsystems #designtokens #collaboration

Generating Utility Classes from Design Tokens using Style Dictionary Generate Utility Class CSS from design tokens using Style Dictionary for seamless design-to-development workflows and collaboration and snowflakes.

🎉 Just published: a new Design Tokens article 🎉

Create consistent utility classes directly from design tokens for both flexibility _and_ consistency.

Generating Utility Classes from Design Tokens using Style Dictionary

www.alwaystwisted.com/articles/a-d...

🙏🖤

#DesignSystems #DesignTokens #CSS

Today we are thrilled to release the first Talk video from UXLx 2025 🤩: Brad Frost's "Themeable Design Systems with Design Tokens" 👏

Check out the full video at www.ux-lx.com/videos/

#ux #design #conference #lisbon #portugal #designops #designtokens

Your Tokens Have Become Infrastructure, by @murphytrueman.bsky.social:

https://archive.ph/3nnSA

#designtokens #designsystems

The Design Tokens spec just went stable 🎉

A huge step for design systems:
• real theming support
• modern color spaces (Display P3, OKLCH)
• cross-tool + cross-platform format

Feels like the “CSS moment” for tokens.

👉 www.w3.org/community/de...

#DesignTokens #DesignSystems #WebDev #UXEngineering

Now that the @designtokens.org format specification has reached its first, *stable* version, I decided to have a look back at my own journey of getting involved in the DTCG and contributing to that spec...
cirrus.twiddles.com/blog/2025/10...

#DesignTokens #DesignSystems #standards

Now that the @designtokens format specification has reached its first, *stable* version, I decided to have a look back at my own journey of getting involved in the DTCG and contributing to that spec...
cirrus.twiddles.com/blog/2025/10/31/my-dtcg-...

#DesignTokens #DesignSystems […]

Design Tokens specification reaches first stable version | Design Tokens Community Group What’s new in 2025.10

#Development #Releases
Design tokens spec reaches stable · “A milestone for design systems teams and tool makers.” ilo.im/167zp1 by Kaelig Deloumeau-Prigent

_____
#W3C #Specification #DesignSystems #DesignTokens #DesignTools #Design #UiDesign #WebDesign #WebDev #Frontend

Kaelig giving the announcement on stage

I’m excited to announce the first stable version of the #designtokens spec is live! v2025.10 was just announced at #schema. Learn more at designtokens.org.

When Design Tokens Become Technical Debt, by @murphytrueman.bsky.social (@zeroheight@mastodon.social):

zeroheight.com/blog/when-design-tokens-...

#designsystems #designtokens #technicaldebt

Text Styles section within Figma's sidebar Design panel. The styles are grouped into 'Mobile' and 'Desktop', each containing a typographic scale from '3XS' to '3XL' with corresponding font size and line height values.

For those of you who implement Figma designs, do you know of any reliable plugins for exporting and converting Figma text styles into code, such as JSON or CSS? I see tons of plugins, but I'd like to know which ones are the most recommended by developers.
#figma #webdev #css #designtokens