How to Create a Quick Style Guide for Client Websites

The business of building WordPress websites is exploding, and most agencies and freelancers have more work than they can handle. Clients are attracted to WordPress because of how easy it is to manage content. In the old days, if you had a website built, you would still need to hire a developer to make updates to your content or design. WordPress makes it possible for anyone to create new posts, pages, products, etc., without any technical experience.

The flip side of this is that your design may be in danger when everything is so easy to edit. If you want to keep branding consistent across a website, you may need to include a style guide to breakdown the design you’ve created.

Having a style guide for reference is especially important if you are passing off a CMS to a client who will be using it to create content on a regular basis. Without a guide your client may go nuts with customization features that may be built into the theme. Before you know it, he will have used 10 different typefaces in various places and multiple header colors and sizes. The beautiful website you created can end up looking like digital goulash in the end, which is no good for your portfolio.

I’d like to introduce you to Stylify Me, a handy new tool that can automatically create a quick style guide for any website. Simply enter the site URL and the app will return its background colors, text colors, typography, and image dimensions.

Here are the colors you get when you input


It also returns the typography and image dimensions found on the homeapage.


The download for your style guide comes in the form of a PDF, a somewhat inconvenient file type that many clients seem to love for whatever reason. Obviously, this is just a quick start which you can further edit and fine tune. Some homepages may not lend themselves as well to demonstrating the site’s style. In that case you may want to select another content page from which the app can extract styles more representative of the site as a whole.

The Stylify Me app was built on NodeJS and PhantomJS. Its creators, Annabelle Yoon and Michael Mrowetz, wanted to provide a tool that would allow designers to research sites more efficiently, without having to inspect each element. The app is hosted on Heroku using the multi buildpack and is MIT-licensed. Check out the code on GitHub to see how it works.

Stylify Me gives you the ability to quickly generate a style guide that will help your clients keep their websites within the realm of the original design. Providing a style guide adds an extra touch, which demonstrates that you care and are invested in your client’s success.


12 responses to “How to Create a Quick Style Guide for Client Websites”

  1. Wow… really, REALLY nice site. How convenient to be able to send a client to one link for them to see what a hash they keep making with their original designs! This one’s on the bookmark list already and they are getting several “buy us a beer” clicks!

  2. Hi Sarah, It’s a cool feature but isn’t strictly speaking a “style guide” – since these are typically documents created by the design team as the website/collateral/kiosk/etc is in the process of being designed.

    This is useful for discerning details about an existing, already designed website but won’t be much good for a designer trying to impress a new client since he’s using their existing website. Unless, that is, he’s trying to sell them on keeping the old one and not hiring him!



Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: