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

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

Noto

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

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

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

Raleway

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

Source

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

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, and 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 Guides 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.

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