The history of design systems at Clearleft

Danielle has posted a brief update on Fractal:

We decided to ask the Fractal community for help, and the response has been overwhelming. We’ve received so many offers of support in all forms that we can safely say that development will be starting up again shortly.

It’s so gratifying to see that other people are finding Fractal to be as useful to them as it is to us. We very much appreciate all their support!

Although Fractal itself is barely two years old, it’s part of a much longer legacy at Clearleft

It all started with Natalie. She gave a presentation back in 2009 called Practical Maintainable CSS . She talks about something called a pattern porfolio—a deliverable that expresses every component and documents how the markup and CSS should be used.

When Anna was interning at Clearleft, she was paired up with Natalie so she was being exposed to these ideas. She then expanded on them, talking about Front-end Style Guides. She literally wrote the book on the topic, and starting curating the fantastic collection of examples at

When Paul joined Clearleft, it was a perfect fit. He was already obsessed with style guides (like the BBC’s Global Experience Language) and started writing and talking about styleguides for the web:

At Clearleft, rather than deliver an inflexible set of static pages, we present our code as a series of modular components (a ‘pattern portfolio’) that can be assembled into different configurations and page layouts as required.

Such systematic thinking was instigated by Natalie, yet this is something we continually iterate upon.

To see the evolution of Paul’s thinking, you can read his three part series from last year on designing systems:

  1. Theory, Practice, and the Unfortunate In-between,
  2. Layers of Longevity, and
  3. Components and Composition

Later, Charlotte joined Clearleft as a junior developer, and up until that point, hadn’t been exposed to the idea of pattern libraries or design systems. But it soon became clear that she had found her calling. She wrote a brilliant article for A List Apart called From Pages to Patterns: An Exercise for Everyone and she started speaking about design systems at conferences like Beyond Tellerrand. Here, she acknowledges the changing terminology over the years:

Pattern portfolio is a term used by Natalie Downe when she started using the technique at Clearleft back in 2009.

Front-end style guides is another term I’ve heard a lot.

Personally, I don’t think it matters what you call your system as long as it’s appropriate to the project and everyone uses it. Today I’m going to use the term “pattern library”.

(Mark was always a fan of the term “component library”.)

Now Charlotte is a product manager at Ansarada in Sydney and the product she manages is …the design system!

Thinking back to my work on starting design systems, I didn’t realise straight away that I was working on a product. Yet, the questions we ask are similar to those we ask of any product when we start out. We make decisions on things like: design, architecture, tooling, user experience, code, releases, consumption, communication, and more.

It’s been fascinating to watch the evolution of design systems at Clearleft, accompanied by an evolution in language: pattern portfolios; front-end style guides; pattern libraries; design systems.

There’s been a corresponding evolution in prioritisation. Where Natalie was using pattern portfolios as a deliverable for handover, Danielle is now involved in the integration of design systems within a client’s team. The focus on efficiency and consistency that Natalie began is now expressed in terms of design ops—creating living systems that everyone is involved in.

When I step back and look at the history of design systems on the web, there are some obvious names that have really driven their evolution and adoption, like Jina Anne, Brad Frost, and Alla Kholmatova. But I’m amazed at the amount of people who have been through Clearleft’s doors that have contributed so, so much to this field:

Natalie Downe, Anna Debenham, Paul Lloyd, Mark Perkins, Charlotte Jackson, and Danielle Huntrods …thank you all!

Have you published a response to this? :


Atheek Ahamath

RT lottejackson: A lovely trip down memory lane. I’m grateful that clearleft⁩ & ⁦adactio⁩ supported me in finding a passion and making a (small) contribution to the community. Also to work with so many people⁩ who influenced the evolution of design s…


This is so lovely! Thanks @adactio 🥰 (I don’t normally retweet praise coz I’m British 😜 - but I haven’t done much web stuff recently so I’m gonna)

# Posted by Natbat on Sunday, April 21st, 2019 at 1:30am


# Shared by Ethan Marcotte on Sunday, April 21st, 2019 at 12:11am

# Shared by cincylee on Sunday, April 21st, 2019 at 4:14am

# Shared by Andy Budd on Sunday, April 21st, 2019 at 8:29am


# Liked by Dan Rubin on Saturday, April 20th, 2019 at 9:06pm

# Liked by Simon Willison on Saturday, April 20th, 2019 at 9:06pm

# Liked by Ethan Marcotte on Saturday, April 20th, 2019 at 9:06pm

# Liked by Natbat on Saturday, April 20th, 2019 at 10:42pm

# Liked by jesús vera on Sunday, April 21st, 2019 at 12:17am

# Liked by Olivier Lacan on Sunday, April 21st, 2019 at 12:52am

# Liked by Adrian D. Alvarez on Sunday, April 21st, 2019 at 12:52am

# Liked by Shaun Bent 🇺🇸 on Sunday, April 21st, 2019 at 4:30am

# Liked by cincylee on Sunday, April 21st, 2019 at 4:30am

# Liked by Ms. Jen on Sunday, April 21st, 2019 at 5:28am

# Liked by Miriam Suzanne on Sunday, April 21st, 2019 at 5:28am

# Liked by Matthias Ott on Sunday, April 21st, 2019 at 8:46am

# Liked by Craig McPheat on Sunday, April 21st, 2019 at 9:39am

# Liked by on Sunday, April 21st, 2019 at 6:48pm

# Liked by Krystal Higgins on Sunday, April 21st, 2019 at 10:51pm

# Liked by Rukayasell on Monday, April 29th, 2019 at 7:52pm

Previously on this day

3 years ago I wrote Animating

A few examples of animation on the web.

3 years ago I wrote Class teacher

When abstraction becomes obfuscation.

7 years ago I wrote How do I convince…?

All of this has happened before. All of this will happen again.

14 years ago I wrote Geekend in the country

I spent the weekend in Oxfordshire in the company of my fellow geeks and Brit packers. A photo pool has been set up on Flickr so you can see exactly who was there and what merry japes we got up to.

16 years ago I wrote Beach Guardian

Here’s the Guardian article about writing Guardian articles from the beach in Brighton.

17 years ago I wrote Band photos

There’s a local "what’s on?" type magazine here in Brighton called The Source. The next issue of The Source is going to run a feature with a passing mention of my band. Fame at last!