“Designing Imaginative Style Guides‘ for this year‘s 24 ways

  • Words: Andy Clarke

On a change from the usual date–for the past eight years I’ve been published on 23rd December—I’m back on 24 ways again this year with a new article about Designing Imaginative Style Guides.

“Front-end code guidelines or component/pattern libraries all offer something different but more often than not they have something in common. They look ugly enough to have been designed by someone who enjoys configuring a router.”

I know that sounds mean, but I’m as frustrated with lazy and predictable style guide design as I am with the general state of design on the web. I could write a short book on style guide design—it’s something that I’ve been thinking about—so for this 24 ways article I just cover colour. I set a few ways that people can make their style guides more imaginative, without compromising any functionality.


I’m also taking this opportunity to soft-launch something that I’ve been working on for the past few weeks, Purposeful style guide templates.

“Purposeful are packs of HTML and CSS style guides templates designed to help you develop creative style guides and pattern libraries for your business or clients. Each pack includes twenty pages covering all common style guide components including colour, typography, buttons, form elements, and tables, plus popular pattern library components.”

You get a peek at some of my designs in the article and Purposeful style guides will be available to buy online in January.

Contact us


Let’s design something fabulous together

Call 01745 851848, tweet or email us.

Answer these questions if you’d prefer to send us a little information about your project before you call.

Our projects start at £5,000 plus VAT with an average project costing between £10,000 and £20,000 plus VAT.

We’ll keep your information private and we won’t share it with anyone else.

Registered office

Eversleigh, Lon Capel, Gwaenysgor, Flintshire, North Wales, LL18 6EJ

(Here’s a map showing how to find our studio.)