Setting Up a Style Guide with Squarespace

I came across a tutorial by a Squarespace designer recently that inspired me to start doing something new at the beginning of each Squarespace build. And that is to set up a 'Style Guide.' What do I mean?

Setting-up-a-styleguide-with-squarespace.png

Each site has its own combination of design elements that make it unique. Individual elements like colours, fonts, social media icons, buttons, headings and how they are combined together make up a significant part of the way the site ends up looking. I found that without a plan, I can spend way too long adjusting all of these elements and wasting time in the process. Now I've come up with a few ways to combat the endless tweaking by starting each site build with three simple steps: 

  1. Decide on a colour palette at the start of the project,
  2. Use an online font pairing tool, and
  3. Set up a style guide within the Squarespace site itself. 

I deal with the colour palette process in this post, and the font pairing in a post still to come. Today, however, I'm focusing on setting up a Style Guide. This is how I go about it.

1 | Create a new page and start editing it

In your Pages section of your site, add a new page, call it 'Style Guide' and make sure you place it in the 'Not Linked' section of your website so that it doesn't show up in any of your navigation bars.

 
new-page-in-squarespace
 

2 | Add unstyled text elements

Now add unstyled text elements by typing out the following (or just cut and paste my example below). We'll format these in the next step.

  • Heading 1
  • Heading 2
  • Heading 3
  • Body Font
  • Link

Something for you to cut and paste:

Heading 1

Heading 2

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more


3 | Define your headings & other text

Now that you've added the basic unstyled text for your headings 1, 2, 3, body text and links you need to make sure they're defined as their names suggest. 

1. Select the relevant text.

 
Select-Text

2. Assign it a format from the menu bar.

Apply-heading

3. Save it.

Save

Repeat this process for each of your headings, as well as the body font. 

4 | Add other Squarespace design elements

In step 2 you simply typed in the text-based elements. For the design elements you'll have to insert each item from Squarespace's content block option. Add these items:

  • Social icons
  • Button 1
  • Button 2
  • Quote
  • Line

Here's an example of what my Style Guide looks like with: social fonts top left, large button centre, small button top right. This is followed by a line, and then a quote block.

 An example of design elements from my own style guide for my site.

An example of design elements from my own style guide for my site.

5 | Upload your colour palette

You may have already decided on your colour palette, and if so you can upload that as an image to your Style Guide. If you don't have a colour palette yet, and want some guidance on putting one together, you can read this blog post to help you. Here's what mine looks like. 

 Here's my colour palette with the corresponding Hex numbers.

Here's my colour palette with the corresponding Hex numbers.

Okay, we've added as much as we need for now.

I forgot to mention, sometimes I like to add a few images to be able to play with the styling of the captions, or just to have some references on hand to continually keep the theme and mood of the site in the front of my mind by having everything in the same place.

Step 6 | Go to the Style Editor to begin styling

You now need to navigate out of your Pages section in Squarespace and go to the Style Editor. You can find this under the main panel on the left hand side of Squarespace when you're logged in. Go to Design, then Style Editor and you're in.

 Left hand panel, select 'Design'

Left hand panel, select 'Design'

 Select 'Style Editor'

Select 'Style Editor'

 Now you're in the Style Editor

Now you're in the Style Editor

By now you'll have your Style Editor open in the left hand panel, and the page you just created - your Style Guide - open on the right hand side of your screen. You'll find that when you hover over a section of the page, the corresponding sections are highlighted on the left hand side. If you click on a section (like a heading, a link, or a button), the Style Editor isolates that one item for you to work on. Here are some examples of what I mean. 

Example 1: When you hover over your heading on the page on the right, the main content fonts and colours show up on the left hand side. 

style-edit-heading-Squarespace

Example 2: When you hover over the link you've set up, the Page Link Color shows up for you to edit on the left hand side. 

Style-edit-link-Squarespace

Example 3: When you hover over the button, the corresponding Button Block styling shows up on the left hand side. 

Style-edit-button

Go through each of these items in turn, styling your headings, body font, quote font, button sizing and colours, social media colours and styles, and your links. Follow a few basic guidelines like keeping your Heading 1 the biggest and boldest of all the fonts, Heading 2 and 3 smaller and less bold. Try not to use more than 3 types of fonts (I prefer just 2 fonts) to keep the style of your site from getting a little crazy! 

Add some of the colours from your colour palette to elements like buttons, lines and links. Play around a little until you're happy with how things look. 

7 | Use all of your options

 Your options when adjusting fonts

Your options when adjusting fonts

Don't forget to use all the options available to you when working with formatting your fonts and other elements. When it comes to each heading, you can select the type of font, the weight of the font, the style, size, letter spacing, line height and whether the text transforms to all caps, some caps or no caps. 

Each of these aspects gives a different overall look and feel to your site. Bold, dark, heavy fonts with very little spacing give your site a very different feel to lightweight, widely spaced and smaller fonts. Here are two examples from sites I recently launched.

Example 1: The big bold fonts on this site's banner suit the down-to-earth nature of this food-delivery site for Guyall's Kitchen.

bold-fat-font

Example 2: This light, widely-spaced font pairing of Bodoni Book Regular and Oxygen create an open, minimal feel on the 'About' page for Courtney Clegg's wedding photography site. 

light-airy-text

8 | Stand back and evaluate your Style Guide

Once you've gone through all of these steps, stop making adjustments for a moment, step back and ask yourself a few questions:

  • Am I using consistent colours in my styling?
  • Am I using too many or too few font choices?
  • Does the way I've styled my fonts and design elements work together to create a unified whole?
  • Does the choice of fonts, colours and elements reflect the nature of the site or is it incongruous?
  • Is there too much 'sameness'?
  • Is there too much difference?

If you're unhappy with the way things look, spend some more time styling your page. If you're pleased with the final result, save your changes and refer to this guide as you continue building your site. It will prove invaluable!

A last note: Set a timer when you are working on your Style Guide. I try to spend about 45 minutes on this and no more!


I really hope this Style Guide tutorial helps you plan, design and execute the building of your Squarespace site. It's always good to have a plan, even when it comes to something as intuitive and creative as the look and feel of your website. Without a plan, I waste time and energy that could be better spent elsewhere. I also struggle to know when to stop. Hopefully, armed with this information, you don't have to make the same mistakes I've been making!

Lastly, here are some tools that may come in handy when working on your Style Guide. 

  1. Canva - for your colour palette
  2. Lorum Ipsum generator - to generate text filler
  3. Color Picker - to select colours from an image with hex numbers

If you've found this post helpful, you might want to have a look at some of my other Squarespace related blog post.