Crafting Powerful Designs with SASS

Every design system I have inherited had the same problem: the tokens were right and the plumbing was wrong. Colours lived in three files, spacing was invented at the component, and nobody could answer what happens if the brand changes its blue.

The structure I use now is boring on purpose. One `_tokens.scss` holds nothing but values. One `_functions.scss` reads them. Components are forbidden from writing a literal. If a value is not in the token file, it does not exist yet.

That single rule does most of the work. A rebrand becomes a pull request against one file, a dark mode becomes a second token map, and a junior developer cannot accidentally introduce a fifteenth grey.

The second rule is that a mixin has to earn its place. A mixin that saves three lines but hides which properties are being set costs more than it saves. I keep four: media queries, focus rings, truncation and visually-hidden text. Everything else is a utility class or a plain declaration.

The last thing I do on every project is delete. At handover I run the stylesheet through a coverage report and remove anything the site never uses. On the last three builds that removed between 18 and 34 per cent of the compiled CSS, and nobody noticed anything except that the pages got faster.