Posts Tagged ‘design tokens’

One of the most-asked questions I get is “What would you change about Atomic Design?” My answer is: I would probably talk about design tokens! In the world of UI, design tokens are subatomic particles. The design token color-brand-blue is a critical ingredient […]

We’ve been absolutely rocking and rolling over here and are proud to announce that Chapters 5 and 6 of our Subatomic Design Tokens Course are now live! With only 2 chapters left to go, there’s only 2 weeks left to […]

I had the extraordinary honor to appear on the Design Better podcast and talk with my friends Aarron Walter and Elijah Woolery. We talked about why we’re still passionate about design systems after 12 years, the human side of design […]

I’m messing with my MailChimp account and really love their Brand Kit feature. You have the ability to upload logos, define color palettes, typography, personality, button styles, and more. I especially like the experience around managing logos. They provide a […]

We’re so freaking excited to announce that we’ve reached a big milestone in our Subatomic design tokens course: we released our battle-tested design token architecture for both Figma and code! We put together a video tour of what’s included: We’ve […]

We’re cooking with gas on our Subatomic design tokens course and are gearing up for a really big milestone! We’re about to launch Chapter 4, which details the nuts and bolts of building out a token system in Figma and […]

OH HELL YEAH: designtokens.fyi by Donnie D’Amato is a mega-helpful glossary of design tokens terms.

Do you love having to name things? Of course you don’t! That’s why we’re so excited to announce that Chapter 3 of our Subatomic Design Tokens Course is now live! We have a FULL HOUR AND A HALF of video […]

We’re thrilled to announce that Chapter 2 of our Subatomic Design Tokens Course is now live! This chapter provides 74-minutes of video diving deep into design token architecture and foundations. We cover a ton of ground, including: The three-tiered token system consists of three tiers: […]

Hey there! Big news: Chapter 1 of our Subatomic Design Tokens Course is live! Chapter 1 covers important core concepts about design tokens. What problems do design tokens solve? We introduce the concept of the “Multi-All-The-Things” organization; your organization needs […]

2024 was a giant Kamehameha blast of self actualization. Through triumphant highs and addressing challenging situations head-on, I feel like I’ve grown so much, I’ve gotten so much closer to my true self, and I’m so incredibly excited to embark […]

Like everyone else, the tragic wildfires ravaging Los Angeles area make our hearts ache. We feel for all of our friends, industry pals, and everyone who has been impacted by the fires. LA-based design systems extraordinaire Elyse Holladay has been […]

In addition to stuffing our faces with cookies, Ian and I were hard at work over the holidays creating our design tokens course. I’m freaking thrilled that we published 2 hours of preorder-exclusive video content, shared several dozen links, and included […]

BIG NEWS! We’re hard at work making an online course called Subatomic: The Complete Guide To Design Tokens. Over the past decade, Ian Frost and I have created design token systems for dozens of organizations — including some of the […]

I recently had the pleasure of doing a Q&A session with Molly Helmuth’s Design System Bootcamp cohort. The questions were great and varied, so I asked Molly if she’d be alright if I shared my answers with you all. Thankfully, […]

text-decoration-offset is a good use case for em units. Most of the time we favor rems over ems, but in this case we want the text underline offset to proportionally scale with the `font-size` property. Here’s a quick demo: See […]

You Want border-color: transparent, Not border: none by Dave is a great reminder to not remove borders from components for accessibility reasons, especially to better support high contrast mode. border-color: transparent comes in handy for other use cases as well. […]

Here’s my pal and frequent collaborator TJ Pitre with The Value of Design Tokens in Modern Web Development. TJ’s post is a good overview of design tokens and the various aspects of working with them in a web development workflow.

What does a mature, end-to-end design system look like in a big, complex organization? What are all the moving pieces, and how do they hang together as a well-considered architecture? What’s required and what’s optional? Hold onto your butts, because […]

This is a pretty great guide to naming design tokens and follows pretty closely how we structure our tokens.

This is a good deep dive into setting up design token architecture. It largely maps to how we tend to structure things, with some slight language and architectural differences: They use “Option design tokens”; we call them “Tier 1” or […]

Source: The context dilemma: design tokens and components | Frontside

I’m working on a couple themeable design systems right now, and we’re architecting components to offer a white list of themeable CSS properties, so each brand can define their design language using design tokens and then pipe those through into […]