Do this first when building a new Squarespace website (my #1 design tip)

Pre-S: Just getting started with Squarespace, or starting over? Use my Squarespace affiliate link & apply the code BEJ10 at checkout to get 10% off and support my smoothie fund!

If you’ve ever tried building a Squarespace 7.1 site from scratch, I’m sure you’ve experienced how quickly your design settings can get scrambled. Typically I see clients going about it like this (which I DON’T recommend):

1. You pick a template you like

2. You start adding your own content to one of the template’s existing pages

3. You start replacing colors one section at a time, based on what you see on the current page, not realizing that the changes will apply to the whole site

4. You select new font faces and sizes and therefore the layout starts to look wonky and needs readjusting all over again

5. You finally get one page the way you like it, then move on to the next page and tweak THOSE colors the way you want them

6. Now your color themes are totally scrambled and it’s a bit overwhelming to keep track of as you start designing each new page

And this is exactly how I approached it when Squarespace 7.1 first came out! But after creating dozens of these sites, I finally figured out the optimal method to get started and stay organized (and basically just make your life easier).

Step 1: Choose a website template that inspires you the most

Heads up here: I am not referring to designer website templates that you can purchase from a third-party. I’m only talking about the built-in Squarespace templates that come with your subscription (since you have to choose one to start building your new site). 

And I’m gonna tell you now, it doesn’t really matter which template you choose! They all have the same design capabilities, and you can change one template to look exactly like another. So whichever free SQSP template you are drawn to for whatever reason is totally fine! Whether that’s because of the color scheme, the fonts, the layouts, the design elements, or the pages it comes with.

Once you’ve selected your template, don’t add any content to the site yet; don’t build any pages. All you’re going to do is tell Squarespace the name of your site and then move on to step 2.

Step 2: Build your Style Page

Ignore everything else on the site right now; it’s not important because a lot of it will change. Just create a page titled ‘Style Page’. You can leave this page in the Not Linked section of your Pages panel, and disable the page in the settings so that it’s not public.

Add a blank section to this page and start filling it with all the blocks you’ll need to style. That includes all fonts, buttons, and line blocks. It should look something like this:

Go ahead and duplicate the section you just created 9 times, so that there are 10 identical sections in total. 

Now you’ll go through and change the color theme of each section from top to bottom. You’ll do this by clicking on the pencil icon in the top right corner of each section and going to the “Colors” tab. If you haven’t noticed yet, each SQSP 7.1 site comes with 10 color themes (which we will edit in a bit). You should have one section per each of the 10 color themes represented on the page, like so:

Save the page and head to the Home menu > Design > Site Styles. Now that you have your Style Page built, it’s time to customize your site’s design scheme!

Step 3: Set up the Core Color Palette

I think colors have more of an obvious impact than fonts, so I like to see the general colors I’ll be working with first. 

Under the Site Styles head to the Colors tab and you’ll see the 10 color themes available. Each color theme can be tweaked to your heart’s content, but right now we need to set the foundation by choosing just 5 main colors. (Keep reading to see which colors to use.) So click on ‘EDIT PALETTE’.

From here, your options are to choose one of the built-in color presets and maybe make some adjustments to it, or input your own colors.

Tip: If you’ve already made a lot of customizations to individual color themes on your site, those edits won’t go away when you change your core color palette. You may need to reset each color theme if you want to start from scratch.

The most common mistake I see people make when setting up their Squarespace design scheme is inputting their colors in a random order, and it can throw the whole website out of whack. You see, even though they don’t outright tell you this, Squarespace has a certain system with the 5 main colors. The order in which you put them makes a HUGE difference on how they are used throughout the site. It took me lots of trial and error to realize the pattern that Squarespace wants you to follow. So let me decode this for you.

To make it easier to have a consistent design scheme across the whole site, input your colors into Squarespace from left to right as follows:

1. The lightest color that will be used for the lightest text and/or backgrounds (oftentimes this is white)

2. The second lightest color that you want to use for some backgrounds

3. The “accent” that will automatically be used for most links, buttons, & headings (remember you can change this later)

4. Typically a darker background color, or it can be used as another accent

5. The darkest color that will be used as the darkest text and/or backgrounds (oftentimes this is black)

Here are some great examples:

Trust the process and worry about making tweaks to these color themes later. Putting your colors in this order will save you TONS of headache later on as you start building your pages. It helps you work with Squarespace’s built-in settings instead of fighting against them. :)

Go ahead and save your color settings, and then we can move on to the fonts.

Step 4: Choose Your Fonts

Go to Site Styles > Fonts and you’ll see that there is a pre-selected font pack in your template. If you want to change your fonts as a whole, the simplest way is to select a different font pack by clicking the blue ‘SWITCH’ link. 

Once you have a font pack you’re generally happy with, you can go in and update the font styles individually under the “Global Text Styles” section. Click on Headings, Paragraphs, Miscellaneous, or Assign Styles to see the individual settings for those. I wouldn’t edit the Button fonts here because you can have more control over them in the next step. 

Now save your font changes and then reopen the Site Styles to work on the buttons :)

Step 5: Create Your Button Styles

Under Site Styles, click on the new “Buttons” tab. Here you can edit all three button styles independently! 

You can set a unique font, shape, border thickness, width and height for the Primary, Secondary, & Tertiary button styles.

Once that’s done, hit save and then you can work on fine-tuning all the details!

Step 6: Fine-Tune the Details

Now that you can view all your design elements on one page and see how they work together; this is when I would recommend fine-tuning each color theme (as needed).

Look through all the sections in your style page and decide what colors need to be changed, if any. I often like changing the color of the line blocks, some headings, and some buttons. 

These 10 color themes will be the same ones you use as you build your site, so make sure you’re creating color themes that you will actually want to use. That may mean that you’re not even bothering to touch up 5 of the color themes because maybe you’ve decided that your website will only have light background colors. It’s totally fine to leave the other color themes alone if you’re not going to use them!

This is also a good time to set a site-wide animation default setting under the ‘Animations’ tab. Do you want everything to fade in slowly as a visitor scrolls down the page? Do you want to not have any animation effect? Here is the place to set your site-wide default.

Now you have all your building blocks in place, so as you go through and create each page of your website, the only thing you have to worry about is arranging your content on the page! No more making constant tweaks to the design settings as you build. Trust me, this will save you SO MUCH TIME and confusion!

Don’t forget to start your website through my Squarespace affiliate link to support this blogger (thank ya kindly)! After your 2-week free trial is up, you can also apply the code BEJ10 at checkout to get 10% off.

What other questions do you have about designing in Squarespace? Leave a comment below and maybe I can make a future blog post diving into your topic!

Check out these other Squarespace tutorials!