Site Styles

What Exactly are the Site Styles?

Now that you know how to move around your site and what everything in the main menu means, let’s talk about Site Styles — aka the design settings that control the aesthetics of how your entire site looks and feels.

Site styles are where you control:

• Fonts and text sizes

• Colors

• Buttons

• Image shapes (like rounded corners)

• Spacing between sections

• And more…

Instead of editing each page one by one, site styles let you update everything globally — meaning, across your whole website, so you stay consistent and don’t waste time.

brush How to Access Site Styles:

1. Option 1: Click the paintbrush icon in the top right hand corner of your screen.

2. Option 2:

   1. Go to your Home Menu

   2. Select Site Styles (it might say "Edit Site Styles") to open the visual editor.

3. Now you’re in! Click on anything on the page — text, buttons, background — and the style panel will pop up for it.

4. Make your edits, then click Done → Save in the top left when you're finished.

colors What Can You Customize in Site Styles?

When you open Site Styles, you'll see categories like:

• Fonts – Choose how to style your headings, paragraph, button, and miscellaneous fonts throughout the entire site. Click assign styles to edit specific text on pages to override the built in settings.

• Colors – This is where you assign the 5 colors in your site palette. Squarespace gives you options to play around with these by giving you presets, uploading an image to help you choose a palette, and even helps you choose a palette based on one color.

• Buttons – Set the designs for the primary, secondary, and tertiary buttons here by choosing options like shape, outline, padding, etc.. When you change it here, every button across your site changes too.

• Forms - Customize the look of your form fields, buttons, and spacing so they match the rest of your site.

• Miscellaneous:

  • Animations – Control how things fade in or move as people scroll.

  • Spacing – Adjust how much padding is between sections and content so your site doesn't feel crowded or awkward.

  • Image Blocks – Decide if your images have square or rounded corners.

You don’t have to touch every setting, but this is where you give your site its unique look.