The Task

Designing, documenting and building a design system

After watching Sareh Heidari’s talk on Scaffolding CSS at Scale at Patterns Day 2017, I was inspired to learn more about how I could create a scaleable solution for the upcoming Madgex website redesign.

The Task

The Task

Madgex was undergoing a rebrand. The website did not reflect the style or offer a way to display the full product and SaaS offerings of the business. To top it off the internal design/dev process was unpredictable and limited, due to constraints on resources.

I wanted to approach this by designing a modular system that could be built in whole or in part by a variety of developers.

Principles by Tachyons

Principles by Tachyons

While researching approaches for the design system and toolkit, I came across Tachyons. Their Principles were exactly what I wanted to work towards - so I had the first part of the system.

Evolution not revolution

Evolution not revolution

Whilst the rebrand meant changes, we didn’t want to alienate our existing client base. I proposed that we keep the existing typeface, Myriad Pro, but change the way we use the fonts alongside the overall brand recommendations that were made by The Clearing.

BBC GEL Guidelines

BBC GEL Guidelines

I decided to use the open-source design typography specs to base our hierarchy on. It meant that we had a basis to provide the marketing team to construct their content delivery around.

Fractal

Fractal

With the Front-End development team, we decided that we would store our Pattern Library within Fractal.

Screen Shot 2018-09-04 at 17.23.43.png
IMG_7801.JPG
Pasted Content.png