Posts Tagged ‘design tokens’

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 […]