All About Site Styles in Squarespace

If you use Squarespace, you have probably heard the term Site Styles. This simply refers to the part of the editor in Squarespace where you can work with the typography, colors, and buttons of your website. You can also customize your forms and the overall theme of your site here, as well. To access it, click the paintbrush icon in the upper right corner of the editor. 

Themes

Let’s start from the top with ‘Themes’. These are essentially pre-made templates of different variations using color, fonts, and buttons. If you already have your fonts and color palette set, you do not need to worry about this section. However, if you want to start with a little inspiration and tweak as you go, these pre-sets can be a great way to start without feeling design fatigue before even starting.

Fonts

Next are the fonts. Again, there are font packs you can choose from as a sort of template option if you are not into starting from scratch with your own font pairings (yes, it can definitely be intimidating, we feel ya! But do check out our blog post on font pairings). In Squarespace 7.1, you will notice there is an arrow next to your fonts. If you click on the left box, you will have the option to choose a font pack. Whereas, if you click the arrow on the right, you can customize the settings for your chosen fonts. When you choose to customize your fonts, you can select the size and weight of each font, as well as assign fonts to specific types of typography. For instance, if you want your site title to use your paragraph font instead of your header font, you can specify that under ‘Assign Styles’.

See which fonts are currently selected for your website.

From this screen you can also ‘Assign Styles’, which allows you to choose between your specific fonts for different areas of your website.

Colors

Selecting your color palette does not have to be daunting. Squarespace has some pre-set palettes if you want to go that route, or you can build your own. There are excellent resources available, such as Coolors, where you can click through an infinite number of color combos, or utilize Canva, where you can upload an image, and the program will extract the palette right from it. Check out our blog post on the energetics of color for some inspiration!

Some cool features of the Colors section in Squarespace, besides building your own custom palette, are the option to customize different color themes throughout your website.

Color Themes

You can customize what colors appear where with each color theme. The main color is what will appear on a section background. From there, if you click on the pencil icon, you can assign different colors from your palette, for everywhere color appears, from text labels, to buttons and everything in between, as seen below.

Editing color themes couldn’t be easier!

Buttons

Buttons are such an important element of any website, as they provide the CTA’s (Calls to Action) that users should take to complete important actions, like booking a call with you. Luckily, with Squarespace it is easy to not only customize, but streamline them so they appear consistent throughout your pages. Go to the Buttons section of Site Styles, and click the arrow on the right (unless you want pre-set button packs, as we have seen with the other elements).

As with the fonts and colors, you can really customize your buttons. You can change the shape, padding, and more.

Choose from premade buttons packs, or customize all your buttons from Primary to Tertiary.

Customizations

You can change the shape with corner adjustments, corner rounding, or adding/removing fill color. The fonts are also able to be changed from header or paragraph styles.

Forms

You may need to use forms on your website in order to capture potential client information. These become super important and useful when trying to get inquiries. They do not have to be reserved only for your contact page either. They can go really well at the end of other pages, too, so it is easy for users to ask questions regardless of where they land on your website.

Again. there are premade options for Forms, with the Forms Packs that you can access by clicking on the above box. By clicking on the arrow to the right, we are able to apply customizations.

Form Customizations

Change the shape of each form field, background color of both form itself and the fields, as well as padding and border.

We hope these tips on Site Styles were helpful, and as always, let us know what you think and if you have any questions :)