The Guardian Design system

But — does it spark joy?

Skills used

Taking a Marie Kondo approach to my job; I tasked myself with not only improving the user experience of the website, but the designer and developer experience too.

The bane of my life: a humble button

When I joined the Guardian design team every button on the website was a snowflake. Each with its own subtle differences: colour, font-size, line-height, hover state and tap target. The fingerprints of designers and developers, present and past, from teams across the globe could be found on each one.

And that was just the buttons…

Simple, maybe. But oh so useful: a click to copy colour cheat sheet

I fast gained the reputation as design consistency's #1 fan and managed to stick to my own rules most, if not all of the time. Whenever I could find the time I worked hard to standardise colours, and create and implement type scales. First conducting audits and then creating records of our design language to share across teams.

Documentation of design elements and micro interactions
It's a dirty job but someone's got to do it”—Me

Informed by data, user feedback and sometimes just common sense. I removed tens of thousands of lines of CSS from our codebase, enjoying getting rid of features nearly as much as I did introducing them. I also added a crap load — for balance

Spot the difference! Reducing the cognitive load (and the page load) of articles

Having found around 40 different font sizes being used across our codebase I listened to some calming music, had a cup of coffee and sat down to re-work the scale to 9 sizes. Given the editorial nature of the Guardian's content there were tight constraints based on the word count of headlines and the comfortable reading size of our body copy, that I worked into the scale.

A numerically confusing type scale

With the business pooling its resources to break even, the budget for a team solely focusing on a design system couldn't be granted. Despite this, balancing the work alongside my day to day tasks, I have made steps towards creating a little more order amidst a hell of a lot of chaos.

🎉 We broke even! 🎉 And finally the budget for a dedicated design system team was granted. Meaning we were granted the budget for me to work alongside a dedicated team, as lead designer on design systems.