Simple Style Guide Template to reference palette and typography

Hello everyone

Does anyone know what could be used to store background and text colours (palette) and H1 to H6 typography for a website ?

I would like to have something handy to keep track of what I will be using before starting the actual design process.

I was thinking just using a Word or Page document (which I could later share with clients) but probably something else exists already.

I know there are tools such as Frontify however quite expensive for my taste.

Thank you all in advance.

D.

Anyone with a smart idea ?

How do you keep track yourself of colours and fonts ?

Thank you.

D

Take a look here:

It’s true you will use project settings for individual projects, but I use an app called Sip to maintain palette information across various projects and there are a couple alternatives. https://sipapp.io

1 Like

Thank you both @Bootsie and @Flashman

Indeed, I also use Sip for the palettes. However, what I am trying to look for is something either a template or tool where I can store each project details that in turn could be printed out or emailed (pdf for instance) to a client for either review or as a reference document - a shortened version of a Style Guide.

Probably I may have to create for example a Pages template. If so I’ll gladly share if I create something worth.

Thanks.

D.

I only use a small percentage of the features in Sip, but I gather it allows you to export palettes with values and a text description of your choice in PDF form like this:

2 Likes

Same here hadn’t explored that fuction. Great that will help for the palette part. Thanks

Hi,

i use this little helper: https://colorsnapper.com.

Greets

Thank you @mr_xing I’ll have a look.

Still trying to find something to keep track of typography for H1-H6 and body. If anyone else has an idea ?

I am trying to put something together as like what is done with a Brand board, but as a Style board for client website.

D.

Can’t you go to Font Book, then preview your chosen fonts and print them? They can be saved as PDF files.

screenshot_852

Thankx @Flashman Of course FontBook could be used but not exactly what I am looking for.

I want to be able to show at the same time on a one-page format typography used for all the site (somthing visual and with dimensions px and line size) as well as the color palette for background and elements (with CMYK, RGB and names) as reference to be kept for the client and myself.

A little bit like this style guide picture (although not as complete as I could wish).

Perhaps none exist in a simple format. I know there are Sketch and PSD templates for instance but there are either too complex or too simple.

D.

If you export the PDF from Sip with colour information I guess the best option at present would be to edit the file and paste the font details in the available space. It’s not perfect, but it does what you need. I always build a full list of project colours in Sip and name them as required, so that part is simple enough.

Yep but not perfect. Thanks anyway

Another example here:

I think I’ll just have to create it myself. Not an issue, though it would have been cool to find an existing usable template to save some time. Still hesitating which soft I’ll use but it I get something running and nice. I will share it if it can be of use by someone else.

D.

1 Like

Surely this is something where you can create a template once and then edit as required. Dare I say it, why not create a web page with all your elements inside Blocs and then export as an image? Alternatively you could preview it in a web browser and export as PDF.

1 Like

I love that idea that is actually brilliant. Wonder why I did not think about it before ? LOL

Many thanks !!

D.

I don’t know know why I didn’t think of it either. It just came to me when I opened a draft project I had created that lists the text sizes, font choices and colours as a means of setting up projects settings quickly on new sites. I use it visually to apply new project settings, then save it as the new project.

Well I am really happy and thankful you thought of it. It actually makes so much sense.

I can even just import the Sip image/PDF.

Great great Thanks again.

D.

@Flashman Played around last night and came up with the following draft made in Blocs. Save as image and then exported as PDF (although here cannot load the pdf).

For anyone who wants to use or build upon here is the page template:

Style Guide Template.bex (37.8 KB)

2 Likes

That does the job. It’s basically a prettier version of the draft setup I use when starting a new project, since you also include the colour samples below that I have left in Sip up to now.

To make it more useful and truly informative you should set the sizes for different breakpoints. You could either include this on the single page or create fresh pages for each breakpoint size.

Good idea - will modify later on. Thanks