Viewing profile — kaelig

It goes beyond variables. At the minimum it's a name and a static or dynamic value, but it can also contain metadata, transforms, private/public attributes, formatting constraints.…

> But the dark primary button background color and light primary button background color are constants in a design system. They are not necessarily constants, and _could_ point to …

Thank you for sharing – and good luck, as this is a tough situation to be in. Some teams neglect to consider the entire lifecycle of a token and introduce too many, too early. They…

The "fun" part with HSL is that RGB->HSL->RGB conversion doesn't always land back on the initial value (and that's why I discourage using HSL altogether). In orgs without design to…

> Bootstrap and Sass already solve this problem for the web. In a vacuum, sure. But products aren't all built in a web-centric vacuum. > That's irrelevant, isn't it? I mean, do you…

They can be constants, but not always: a design token can mutate based on device, light/dark/high-contrast mode, viewport size, user preference, locale, brand, product, theme, etc.…

It's not too different, as the concept was heavily influenced by localization libraries. That said they're not always constants. A design token can mutate based on device, light/da…

Bootstrap and Sass are for the web. They don't solve the interop problem for Figma/Sketch/Framer/iOS/macOS/Windows/Android/TVs/Watches/Fridges/Cars and what have you. And that's no…

You can try automating search/replace on hex/hsl/rgb values across all your codebases, but targeting "primary button backgrounds on hover" is only possible with some more advanced …

> They sound like machine-generated nonsense. Fair! Perhaps I should have used an LLM to de-bullshitify my message... Let's walk through a common scenario: Design tool A has brand …

Joke aside, there are truly valid reasons why you'd want to change a single color across dozens of codebases, for what can amount to tens of thousands of occurrences. For example: …

It also helps small teams build faster. A shared language around color, spacing, typography makes design/engineering collaboration way smoother, and reduces rework. A good first st…

Colors can be expressed in many ways. For example in Android it's common to see hex codes as #AARRGGBB, but in CSS the alpha is at the end (#RRGGBBAA). With wider gamuts (lch, dcip…

A few members and myself have commented to explain in various ways what we're solving. This methodology is being used by most frontend and design teams at medium/large companies. T…

> processes focused on product release +10000 As I mentioned in a couple of my other messages, beware of people over-systematizing and over-centralizing, as it can come at the cost…

You're right in that the "centralized single source of truth" actually rarely is a thing at scale. It's common to adopt a mixed approach: some design tokens make sense to centraliz…

Thank you for sharing — sounds like we've had different experiences but I can absolutely see how poorly implemented devops is worse than well-implemented ops. I've written about op…

"it depends" When working on products that can last decades, you can't just throw away all styling and start from scratch. In this case, design tokens are essentially styling hooks…

It's certainly been a longer journey than I'd anticipated to get to a "V1", but the current snapshot of the spec does have good penetration, allowing us to see what works and what …

Say more

For context, this name was coined 10 years ago, before the crypto/blockchain craze.

Correct, I'm fact I've advised a few teams to only introduce layers of abstraction they needed and could actively document & support. It's very tempting to copy fortune 500 compani…

A few names, including "design variables", were considered in 2014 when Jina Anne and Jon Levine (Salesforce) coined the term. I wasn't in the room when they made the decision, but…