Blog

Introducing Inspired Guides

Back in January I wrote about why I believe that style guides and component/pattern libraries should be beautiful as well as functional. That to be effective, they must cater for the different needs of creative and technical people by inspiring as well as informing.

Inspired Guides

I wanted to make it easier for designers to create living style guides using just meaningful HTML markup and modern, well-structured CSS stylesheets and without any complex technical tools. I wanted to make it easier for developers to make component and pattern libraries that are beautiful as well as functional. I wanted to make it cost effective for agencies and studios to create style guides they can sell to clients. And most of all, I wanted to prove that with a little creative thinking, we can all make inspiring style guides.

That’s why I created Inspired Guides, style guide, pattern and component library templates.

For the past few months, Inspired Guides have been a labour of love. I’ve spent countless hours working on their design and countless more researching how to balance the needs of creative and technical people, then poured over every line of code. Now they‘re ready for people to use.

Six original designs

Merriweather

Merriweather

A flexible style guide design that’s ideal for presenting a wide range of styles.

Noto

Noto

A playfully designed style guide that displays information about your colour and other styles in imaginative new ways.

Open Sans

Open Sans

A contemporary style guide that’s ideal for displaying elements in modern designs and is easily configurable with your own colours and fonts.

Playfair

Playfair

An ideal style guide for content heavy designs due to its emphasis on typography.

Raleway

Raleway

A practical style guide that requires only a basic knowledge of HTML and CSS and can be hosted anywhere.

Source

Source

A style guide with a bold design that’s perfect for inspiring designers and informing developers.

Each design contains a pair of perfectly matched Google fonts and a balanced colour palette that you can easily customise to match your own design.


Twenty pages to get you started

Each design contains pages for common elements including:

  • buttons
  • colours
  • components
  • forms
  • icons
  • logos
  • media
  • navigation
  • panels
  • principles
  • tables
  • tokens
  • typography
  • typography-headings
  • typography-lists
  • typography-numerals
  • typography-paragraphs
  • typography-quotations

How Inspired Guides work

Here are just a few headline features:

  • Beautifully organised stylesheets and markup
  • Compatible with common frameworks including Bootstrap
  • Use with Google Fonts, Typekit, and self-hosted fonts
  • Custom Properties (variables) make changing styles simple
  • Mustache templates for adding your own pages
  • No dependencies, frameworks or toolsets to get started
  • Can be hosted anywhere

What Inspired Guide cost to buy

From September each Inspired Guide will cost £199+tax, but until then you can buy each design individually for just £169+tax. You can also buy two sets of three Inspired Guides for only £339.00+ tax, that’s three designs for the price of two. All designs come with free updates and bug fixes forever.


Acknowledgements

My thanks go to the following people, without whose work, Inspired Guides wouldn’t have been possible:


Inspired Guides are available to buy now from our new website.


Contact us

x

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.)