If your design system is more than a handful of components, a single token file will become unwieldy. You're going to end up with colour, spacing, and typography for buttons, cards, modals, and everything else all in one place, which will turn into an absolute scrolling car crash that teams have to wade through to find what they actually need. Splitting tokens by component solves this practically.…
Getting CSS @layer ordering right in a design system is a problem that only gets harder as it scales, every new component risks fighting for specificity or stacking priority. I was reading Chris Coyier's post on horizontal thinking in CSS @layer a couple of weeks back, and it offered a neat little way out of that mess. The basic point is pretty simple, instead of worrying about the vertical…
I’ve been tinkering with this idea for a while, mostly because the (seemed like it took forever) redesign of this site kept pushing me in that direction. When color-mix() showed up in nightly builds, I started using it for simpler stuff like tint and shade variants that allowed a bit of monochromatic theming. Over time I added more CSS like light-dark() and recently color-contrast() in places.…
Adding testing and linting to an established design token system can sound straightforward until that first run returns pages and pages of warnings and errors. Teams will often swing between the pendulum of two extremes. Block everything and slow delivery to an absolute crawl, or keep everything as warnings and never improve quality. Sometimes they'l decide to skip linting altogether because the…
It's 12 o' clock (and it's a wonderful day). Lars from the mobile team just noticed something. Their progress bars don't match the ones in the web app. They dig in. Turns out their team built their own version three months ago because the original component was taking too long to ship. Nobody told them it was coming. By the time it shipped, they'd already invested in their own solution. This is…
Some websites that offer theming conflate two separate ideas. The mode (light or dark) and the theme (the accent colour or visual identity). They're not the same thing . A user might want a dark interface with a blue accent, or a light interface with an orange one, and if you cram both into a single attribute, you end up with a mess of dark-blue , light-blue , dark-orange , and so on. Keeping them…
Back in 2022, while building out the start of this website's redesign (it took a while), I wanted to use this new fangled CSS color-mix() function to generate an analogous colour palette, one that would be easy to switch between and work in both light and dark modes. But I needed to think about how I'd approach it. I couldn't handle "themes" and "modes" as a single system. They needed separate,…
Understanding what a good workflow looks like and actually building one are totally different things. You know your proposals need a clear place to go. You know decisions need a framework. You know that the documentation should be mandatory. But how do you make all of that happen? What do people actually show up to? What do you document? What tools do you use? In this article we're going to walk…
Colour can drive branding, visual hierarchy, theming, and accessibility in any design system. It's also where workflows tend to break down: colour shows up as hex in Figma, as RGB in one tool, as HSL in another. Every tool has its own representation, and nothing speaks the same language. The DTCG spec fixes that. Instead of treating colour as loose strings, the spec structures it as typed tokens…
The Cost of Chaos It's 10:47 AM on a Tuesday. Courtney, a product designer, has just finished a beautiful new progress bar component for the onboarding flow. They post it in Slack: "New progress bar variant ready - where should this go?" Silence. Meanwhile, three channels over, Eddie from engineering has already built their own version of the same progress bar. It's in production. Nobody told…
In earlier articles of this series, we've explored how to structure, transform, and layer design tokens. One practical challenge that emerges when building design systems is ensuring accessible colour combinations at scale. Manually checking contrast ratios for dozens of colour tokens quickly becomes impractical, and accessibility issues typically surface during audits or, worse, when users report…
After more than a decade consulting in other people's codebases, I've seen it all: jQuery from 2009, dependencies untouched since the Obama administration, and CSS full of browser hacks no one dares to touch. Here's what I've learned: legacy code isn't something to be embarrassed about. It's a record of the decisions, constraints, and compromises that got your product this far. That's the thinking…
A couple of months ago now I released a little tool I've been working on over the years for some specific client work. ReliCSS was focused on finding browser hacks, old techniques and fossils in old stylesheets. But over the years I have also found myself needing other tool to help dig into codebases as part of a front-end archaeology process. Legacy CSS problems are rarely just one thing. You…
In a previous article , I covered "what" could lint and "why" this all matters for design tokens. This article covers the "where" in your workflow those checks should live, and "when" each one pays off. The short answer is that you should lint as early as possible, and (if possible) at multiple points. But where "as early as possible" actually is could be quite different depending on your workflow…
Design tokens are code: the single source of truth for design decisions — colour, typography, spacing, shadows — across your design system. When they're right, they keep products consistent. When they're wrong, the impact spreads quickly. Consider a few common failures: A designer adds a new brand colour in Figma and syncs it to the repo, not realising that color.brand.primary now references…
If you have ever stared at a long token list and wondered whether a name should be button-primary-bg , primary-button-background , or color-button-primary , you are not alone. Naming design tokens can look and feel simple right up until you have to do it for real. Choose a weak pattern and things get inconsistent fast. Choose a clear pattern and you get a shared language that helps both design and…
Twelve years ago in Colour me Sass-y , I walked through a bunch of Sass colour helpers that made day-to-day styling feel quick and effortless. Back then, Sass was the easiest route. In 2026, modern CSS gives us far more native colour power than we had in 2014. So this fourth Un-Sass'ing article is a refresh of that original post. Same goals, newer tools, no preprocessor required. TL;DR The Short…
As I've recently started writing about relatively new CSS and web platform features again, I wanted to show 'at a glance' browser support that's available and/or whether something is "safe" to use or not. A browser support table copied from somewhere else can go very stale very quickly. A screenshot would be even worse. What I wanted was a 'living' component. Something that does what I needed and…
One of the features I would miss most when moving away from Sass would be nesting. There's something wonderfully clean about grouping related selectors together, keeping your code organised and reducing repetition. For years, this was the realm of preprocessors like Sass, Less, and PostCSS, but now, CSS nesting has landed in the browser, and it's time to revisit it as a core part of how we write…
Back in 2019 I spotted a post from a Mozilla social media account announcing that backdrop-filter was implemented behind a flag in their Firefox Nightly build. I quickly threw together a rough demo and then a basic playground to explore what was possible. Time passed and this last 6 months or so, with broader browser support and real-world usage in client projects, I've finally updated that…
When we talk about design tokens, we usually mean colours, spacing, typography, and other visual properties. But there's another layer of design that's critical and rarely managed systematically: microcopy. Microcopy is the small pieces of text scattered throughout your interface: button labels, form hints, error messages, empty states, confirmation dialogs. While we version control colour…
In the last article, I showed how to use explicit :heading(N) level mapping with pow() to create mathematical typographic scales. This article extends that approach to fluid scaling with clamp() , so your heading sizes adapt smoothly to the viewport instead of jumping at breakpoints. The Fluid Typography Formula Fluid typography scales smoothly with the viewport instead of jumping at breakpoints.…
In my previous article , I introduced the :heading pseudo-class and showed how it can simplify styling all headings in groups, or all at once. Today, I want to take that much further and show how combining :heading() with two other CSS features— sibling-index() and pow() lets us build flexible, maintainable typographic scales with just a few lines of code. Important limitation: sibling-index()…
The :heading pseudo-class lets us target all heading elements ( h1 through h6 ) with a single CSS rule, rather than writing out a verbose selector group every time we need to. It's a small change, but it represents a shift toward better, more intentional and 'semantic' CSS. The Current Approach Before :heading , whenever we wanted to apply the same styles to some or all headings, we had to list…
Design tokens are great for developers, but what about everyone else on your team? The designers, product managers, and stakeholders who need to contribute without touching code? JSON files work well for machines, but they're not exactly inviting for non-technical folks. That's where Notion comes in. It's the perfect bridge between your design system and the rest of your organisation. In this…
Every time I need to style link underlines beyond the default browser styling, I find myself searching MDN for the same properties. I always think "surely I know this by now?" but then it slips my mind and off I go searching again. So, I've decided to write this down as my personal reference guide. Hopefully, it'll save you the same trip to the documentation! For years, styling underlines on links…
If you work with design tokens, you might find yourself needing to add an $extensions object for some specific use case. Then, down the line, other tools that consume your design tokens data might add their own extensions too. Before you know it, you're scrolling through nested metadata trying to figure out what extensions you actually have, who's using them, and whether you can clean anything up.…
One of the smart things in the W3C Design Tokens Community Group (DRCG) Design Tokens spec is how it acknowledges something simple, no standard can anticipate every use case. Instead of trying to force everything into the specification, they created $extensions . Essentially it's a deliberate, scoped escape hatch. You can add extra data to your tokens without breaking them or polluting the…
For years, I've been preprocessing Sass in my build pipeline without really thinking about how I was doing it. Every project would follow the same pattern: set up Sass, write a build script, and leave it alone. It worked. It was fast enough. I never questioned it. That changed recently when I saw a deprecation warning in my build logs. It transpires, I've been using an API that's been obsolete for…
As a contracting front-end developer and Design Systems consultant, I don't always get to work on new things. Sometimes I work within codebases. Sometimes alongside them. Sometimes these codebases are years and years old. When you dive into these projects, you're not just reading code, you're excavating years of decisions, technological limitations, and creative workarounds from days gone by. Over…
This article shows a practical pattern for generating utility classes in CSS I’ve used in one form or another since 2016. Utility classes can give us a fast, consistent way to apply design system values in markup, without sprinkling hard‑coded styles across your project. As I discussed in my article on Creating Design System Friendly Snowflakes with Utility Classes , utility classes can really…
I started creating a few bookmarklets (small JavaScript snippets saved as browser bookmarks) when working with a client which involved some 'front-end archeology' looking at a codebase that was 15 years mature and has been worked on since. These tools helped me quickly understand the structure, dependencies, and technical debt without having to dive deep into the codebase first. The bookmarklets…
Back in 2017, while working at Monotype on their Design System, I was tasked with coding a new design for a set of logos. This design featured either a vertical line separator at larger viewports or a horizontal one at smaller screens, with the logos stacking as needed. Eager to implement the latest technology, I opted for CSS Grid. However, the challenge was that, at the time, there was no…
Whilst I was working on my last article about the new inherit() CSS function I looked at how we could use this to help simplify the border radius of child elements based on what the parent element had. But, I’d completely forgot about it when I started to write that article so, as a ‘bonus’, I thought I’d quickly write it up here. The Design Problem Rounded corners can be a small design detail,…
Spotted on social media an ‘intent to ship’ post from the Blink team for a new inherit() CSS function. A quick read of what is within the Chrome Platform Status post , and what was in the W3C specification had my mind buzzing on how this can help us to build better, more ‘context aware’ components for our Design Systems moving forward. So, with some coffee and the ideas popping I thought I’d write…
I was quite excited and intrigued last Friday when I spotted a post from Jake about an experiment Firefox were conducting to garner information about what web developers wanted to see be included in Interop 2026. A group effort by major browser makers: Apple, Bocoup, Google, Igalia, Microsoft and Mozilla, the Interop Project (essentially) attempts to make the web work the same in every browser.…
As mentioned in my last article , my current client work sees me at the start of a much larger Design System project where the deliverables will be as close to vanilla HTML, CSS, and JavaScript as possible. This means we’re not using Sass, and for the first time (in a long time) I’m able to explore more of what modern CSS can do (whilst relying on browser support) instead of reaching for Sass as I…
If you’ve been following me for a while, you’ll know that I’m a big fan of Sass. Whether it's writing articles, running workshops, curating the Sass News email newsletter, or serving as the tech editor for SitePoint, commissioning two fresh Sass articles each week, it’s safe to say I’ve been an enthusiastic supporter of Sass for the last fourteen years. However I’m currently assisting a client…
For a recent client project, I’ve been helping them transform and update parts of their web presence, and one of the key updates was a brand-new home page. With initial designs to work from, I realised that one particular container could serve as a reusable component across various sections of the project. This component is relatively simple in appearance—a background image with some text…
In the last article, I delved into Penpot's new Design Tokens feature , a promising development that (being a very early implementation) had its share of limitations. Today, in this Design Tokens Workflow tutorial, I am going to walk through creating a build script in Style Dictionary that will generate a Penpot-ready JSON file with all our design tokens. In Penpot's implementation, design tokens…
At the end of last week I found myself spending the day at my partners antiques centre whilst they were away. It was quiet, not so many PPPs (pick up, put down, p*ss off) but a few SSSs (small significant sales). I found myself sat on an old upholstered chair with my laptop and thought I’d have a go at creating a ‘design tokens starter’ for Penpot . After working out how to create circles and…
Whilst writing my recent article on where and when I choose to use Sass variables or CSS Custom Properties in a project I thought to myself “you could automate this bit using style dictionary” . As that article is published I’ve quickly opened up a new markdown file to write this. In this tutorial we will look at how we can use our design tokens to not only generate Sass variables, but generate…
In recent articles I’ve demonstrated how we can use Design Tokens to assist with theming, be it for a multi-brand Design System or a single property that has multiple themes . If you noticed, for the multi-brand configuration we were also generating Sass variables, but it in the second article on creating multiple themes for a single site we weren’t. I have reasons for that, as part of a strategy…
In this tutorial series on design tokens and Style Dictionary, we have recently looked at power of multi-brand theming . Now, let's delve into creating multiple themes for a single brand. Imagine having a personal website or brand that shines differently with each season, featuring special editions, or festive themes. The ability to seamlessly switch between these adds a layer of personalisation…
Businesses often juggle multiple brand identities to connect with a variety of audiences. This approach can translate into distinct visual elements (colors, typography, and other styles) that uniquely represent a brand. A robust design system is essential to juggle these brands styles while ensuring a seamless experience across all platforms. In the last couple of tutorials in this series, we…
In the last article in this series we looked at how we could convert our design tokens into CSS for light and dark modes using Style Dictionary . We created some new formats to generate CSS that used prefers-color-scheme and also generate separate CSS files for both light and dark mode or a single CSS file that would incorporate both. In this tutorial, we will explore two additional methods for…
In this tutorial, we will explore how to implement light and dark modes in your design system using design tokens with Style Dictionary. We've previously covered formats, value conversion, extending the design tokens format, and design token layers in earlier tutorials. Today, we will build upon those concepts to effectively manage design tokens for both modes and generate the necessary CSS to…
I’m thrilled to announce that the Design Systems Newsletter is now open for sponsorship! With over 3,700 subscribers and an impressive average open rate of 54% and click-through rate of 16% , this newsletter reaches a highly engaged audience that values quality content. Why Sponsorship? As the newsletter continues to grow, sponsorship will help cover costs and support the time dedicated to…
Since I've had a rejuvenation in writing again after I finally pushed this sites redesign live I have had a link component at the bottom of every article stating that I have availabilty for new client work. Fast forward ~9 weeks from the website going live and 15 articles later I thought it would be neat to have a beter 'call out' at the bottom of my articles. A "question and answer" that could…
In previous tutorials, we explored how to create and generate design tokens using Style Dictionary. Now, we'll build upon that foundation by setting up token layers in Style Dictionary, showing how to reference tokens across layers and generate outputs for better usability. A brief explanation of Design Tokens layers Design Token layers can be essential for creating a scalable and maintainable…