Welcome Module: First Steps & Setup
One of the best things about Squarespace is that you don't have to manually change the color of every single button, background, or text box one by one. Instead, we use a Global Color Palette.
By updating just five main colors in your settings, your entire website will automatically transform to match your unique brand!
Here is how to set up your colors:
Step 1: Open the Site Styles Menu
Go to your main Squarespace dashboard.
In the top right corner of the screen, click the Paintbrush Icon (this is the Site Styles menu).
Click on Colors.
Step 2: Edit Your Palette
At the top of the Colors menu, you will see a row of five colored circles. This is your template’s current palette.
Click the Edit Palette button.
Step 3: Add Your Brand Colors
You have a few options for adding your colors here:
If you know your exact brand colors (The Pro Way): Click on each circle and type or paste your specific HEX code (a 6-digit code like #FFFFFF for white). You’ll see the website update instantly in the background!
If you want to experiment (The Fun Way): Click a circle and use the visual color picker to drag around until you find a shade you love.
If you want Squarespace to choose (The Easy Way): Scroll down and select From Image to upload an inspiration photo, or From Color to let Squarespace generate a matching palette based on one main color.
💡 HOW THE 5 CIRCLES WORK (From Left to Right):
To get the best results, it helps to understand what each circle usually controls:
Lightest (Far Left): Usually used for your main website background. (White or a very soft, light tint works best).
Light: Used for secondary background sections to break up the page.
Bright / Accent (Middle): This is your "Pop" color! It's typically used for buttons, links, or important highlights.
Dark: Used for dark mode sections or secondary text.
Darkest (Far Right): Usually used for your main paragraph text or footer backgrounds. (A very dark grey is often softer on the eyes than pure #000000 black).
Step 4: Save Your Changes
Once your five circles look perfect, click anywhere outside the color menu to close it, and click SAVE in the top left corner of your screen.
What about specific sections?
Sometimes, you might want a specific section to use a different color from your palette (like a dark background with light text). We call these Color Themes in Squarespace. Don't worry about changing those right now! We will cover how to easily switch the color theme of individual sections in Module 3 (Working with Sections).
By updating just five main colors in your settings, your entire website will automatically transform to match your unique brand!
Here is how to set up your colors:
Step 1: Open the Site Styles Menu
Go to your main Squarespace dashboard.
In the top right corner of the screen, click the Paintbrush Icon (this is the Site Styles menu).
Click on Colors.
Step 2: Edit Your Palette
At the top of the Colors menu, you will see a row of five colored circles. This is your template’s current palette.
Click the Edit Palette button.
Step 3: Add Your Brand Colors
You have a few options for adding your colors here:
If you know your exact brand colors (The Pro Way): Click on each circle and type or paste your specific HEX code (a 6-digit code like #FFFFFF for white). You’ll see the website update instantly in the background!
If you want to experiment (The Fun Way): Click a circle and use the visual color picker to drag around until you find a shade you love.
If you want Squarespace to choose (The Easy Way): Scroll down and select From Image to upload an inspiration photo, or From Color to let Squarespace generate a matching palette based on one main color.
💡 HOW THE 5 CIRCLES WORK (From Left to Right):
To get the best results, it helps to understand what each circle usually controls:
Lightest (Far Left): Usually used for your main website background. (White or a very soft, light tint works best).
Light: Used for secondary background sections to break up the page.
Bright / Accent (Middle): This is your "Pop" color! It's typically used for buttons, links, or important highlights.
Dark: Used for dark mode sections or secondary text.
Darkest (Far Right): Usually used for your main paragraph text or footer backgrounds. (A very dark grey is often softer on the eyes than pure #000000 black).
Step 4: Save Your Changes
Once your five circles look perfect, click anywhere outside the color menu to close it, and click SAVE in the top left corner of your screen.
What about specific sections?
Sometimes, you might want a specific section to use a different color from your palette (like a dark background with light text). We call these Color Themes in Squarespace. Don't worry about changing those right now! We will cover how to easily switch the color theme of individual sections in Module 3 (Working with Sections).
5. Updating Your Color Palette
Just like your colors, Squarespace uses global settings for your typography. This means you set your fonts once, and they automatically update everywhere, ensuring your website looks cohesive and professionally designed.
Squarespace includes hundreds of gorgeous Google Fonts and Adobe Fonts completely free. Here is how to customize them to fit your brand:
Step 1: Open the Fonts Menu
Click the Paintbrush Icon in the top right corner to open Site Styles.
Click on Fonts.
Step 2: Choose Your Path (Font Packs vs. Custom Fonts)
Once you are in the Fonts menu, you have two ways to update your typography:
Option A: Font Packs (The Quick Way)
If you aren't sure which fonts look good together, Squarespace has done the hard work for you!
Click on Font Pack.
Scroll through the curated pairings (Sans-Serif, Serif, and Mixed). Click any pack to see your entire website update instantly.
Option B: Global Text Styles (The Custom Way)
If you already know your brand fonts, or want more control, you can customize your text block by block. Below the Font Pack option, you will see categories for Headings, Paragraphs, Buttons, and Miscellaneous.
Here is how to edit them:
Click into Headings (this controls all the large titles on your site).
Click on Family and click "Browse All Fonts" to search for your specific brand font.
Under the Family option, you can fine-tune the details:
Weight: Make the font thicker (bold) or thinner (light).
Line Height: Adjust the breathing room between lines of text.
Letter Spacing: Add a little extra space between letters for a highly stylized, modern look.
Repeat this process for your Paragraphs (your main body text).
💡 DESIGNER SECRETS FOR BEAUTIFUL TYPOGRAPHY:
To keep your site looking high-end and easy to read, keep these golden rules in mind:
The Rule of Two: Try to stick to a maximum of 2 fonts for your entire website. Use one bold, personality-driven font for your Headings, and one clean, simple font for your Paragraphs.
Prioritize Readability: Fancy, cursive script fonts can look beautiful, but they are very hard to read in long paragraphs. Save the script fonts for short accents or massive titles, and use clean fonts (like sans-serifs) for your main reading text.
Don't touch the Base Size: Squarespace automatically scales your fonts for mobile screens beautifully. It’s best to leave the "Base Size" slider right where it is!
Loving your new fonts? Great! Make sure to click SAVE in the top left corner. In the next lesson, "Lesson 7: Styling Buttons & Forms," we will tie your colors and fonts together to create clickable, high-converting buttons!
Squarespace includes hundreds of gorgeous Google Fonts and Adobe Fonts completely free. Here is how to customize them to fit your brand:
Step 1: Open the Fonts Menu
Click the Paintbrush Icon in the top right corner to open Site Styles.
Click on Fonts.
Step 2: Choose Your Path (Font Packs vs. Custom Fonts)
Once you are in the Fonts menu, you have two ways to update your typography:
Option A: Font Packs (The Quick Way)
If you aren't sure which fonts look good together, Squarespace has done the hard work for you!
Click on Font Pack.
Scroll through the curated pairings (Sans-Serif, Serif, and Mixed). Click any pack to see your entire website update instantly.
Option B: Global Text Styles (The Custom Way)
If you already know your brand fonts, or want more control, you can customize your text block by block. Below the Font Pack option, you will see categories for Headings, Paragraphs, Buttons, and Miscellaneous.
Here is how to edit them:
Click into Headings (this controls all the large titles on your site).
Click on Family and click "Browse All Fonts" to search for your specific brand font.
Under the Family option, you can fine-tune the details:
Weight: Make the font thicker (bold) or thinner (light).
Line Height: Adjust the breathing room between lines of text.
Letter Spacing: Add a little extra space between letters for a highly stylized, modern look.
Repeat this process for your Paragraphs (your main body text).
💡 DESIGNER SECRETS FOR BEAUTIFUL TYPOGRAPHY:
To keep your site looking high-end and easy to read, keep these golden rules in mind:
The Rule of Two: Try to stick to a maximum of 2 fonts for your entire website. Use one bold, personality-driven font for your Headings, and one clean, simple font for your Paragraphs.
Prioritize Readability: Fancy, cursive script fonts can look beautiful, but they are very hard to read in long paragraphs. Save the script fonts for short accents or massive titles, and use clean fonts (like sans-serifs) for your main reading text.
Don't touch the Base Size: Squarespace automatically scales your fonts for mobile screens beautifully. It’s best to leave the "Base Size" slider right where it is!
Loving your new fonts? Great! Make sure to click SAVE in the top left corner. In the next lesson, "Lesson 7: Styling Buttons & Forms," we will tie your colors and fonts together to create clickable, high-converting buttons!
6. Changing Fonts & Typography
Your colors and fonts look amazing. Now, let’s talk about your "Call to Action" (CTA) buttons and forms!
Whether you want your buttons to look sharp and modern (squares), soft and friendly (rounded), or elegant and minimal (outlined), you can control the exact look of every button on your site from one simple menu.
Step 1: Open the Buttons Menu
Click the Paintbrush Icon in the top right to open Site Styles.
Click on Buttons.
Step 2: Styling Your Primary, Secondary & Tertiary Buttons
Squarespace gives you three different "levels" of buttons. This is incredibly helpful because you might want your main "Buy Now" button (Primary) to be a solid block of color, but a less important "Read More" button (Secondary) to be a simple outline.
Click into Primary first to style your main buttons:
Shape: Click this to choose between a sharp Square, a slightly Rounded rectangle, or a fully rounded Pill shape.
Outline vs. Solid: You can choose a solid color fill, or an "Outline" style (which looks like a transparent button with a colored border).
Padding: This controls how "fat" or "skinny" your button is. You can add more space above and below the text for a larger, more clickable area.
(Repeat this process for your Secondary and Tertiary buttons if you want them to look slightly different!)
Step 3: Styling Your Forms
If your template includes a Contact Form or a Newsletter Signup, you can style the input boxes here too!
Go back to the main Site Styles menu and click on Forms.
Here, you can decide how the fields look where people type their name and email.
You can choose a solid background, a clean outline, or just a minimal underline.
💡 DESIGNER SECRETS FOR HIGH-CONVERTING BUTTONS:
Give them breathing room: Don't make your buttons too small! A little extra padding makes them look much more professional and makes them easier to tap on mobile phones.
Consistency is key: If you chose a "Pill" shape for your Primary buttons, it usually looks best to keep your Secondary and Tertiary buttons as Pill shapes too, even if you change them to an outline style.
Color check: Wondering how to change the color of the button? Remember, that is controlled in the Colors menu we used in Lesson 5!
You did it! Make sure to hit SAVE in the top left corner.
Congratulations, you have officially completed Module 1: Global Brand Styling! Your template should now be fully dressed in your brand's unique colors and fonts.
Take a quick break, and when you are ready, let's dive into Module 2: Header, Footer & Navigation, where we will add your logo and set up your main menu!
Whether you want your buttons to look sharp and modern (squares), soft and friendly (rounded), or elegant and minimal (outlined), you can control the exact look of every button on your site from one simple menu.
Step 1: Open the Buttons Menu
Click the Paintbrush Icon in the top right to open Site Styles.
Click on Buttons.
Step 2: Styling Your Primary, Secondary & Tertiary Buttons
Squarespace gives you three different "levels" of buttons. This is incredibly helpful because you might want your main "Buy Now" button (Primary) to be a solid block of color, but a less important "Read More" button (Secondary) to be a simple outline.
Click into Primary first to style your main buttons:
Shape: Click this to choose between a sharp Square, a slightly Rounded rectangle, or a fully rounded Pill shape.
Outline vs. Solid: You can choose a solid color fill, or an "Outline" style (which looks like a transparent button with a colored border).
Padding: This controls how "fat" or "skinny" your button is. You can add more space above and below the text for a larger, more clickable area.
(Repeat this process for your Secondary and Tertiary buttons if you want them to look slightly different!)
Step 3: Styling Your Forms
If your template includes a Contact Form or a Newsletter Signup, you can style the input boxes here too!
Go back to the main Site Styles menu and click on Forms.
Here, you can decide how the fields look where people type their name and email.
You can choose a solid background, a clean outline, or just a minimal underline.
💡 DESIGNER SECRETS FOR HIGH-CONVERTING BUTTONS:
Give them breathing room: Don't make your buttons too small! A little extra padding makes them look much more professional and makes them easier to tap on mobile phones.
Consistency is key: If you chose a "Pill" shape for your Primary buttons, it usually looks best to keep your Secondary and Tertiary buttons as Pill shapes too, even if you change them to an outline style.
Color check: Wondering how to change the color of the button? Remember, that is controlled in the Colors menu we used in Lesson 5!
You did it! Make sure to hit SAVE in the top left corner.
Congratulations, you have officially completed Module 1: Global Brand Styling! Your template should now be fully dressed in your brand's unique colors and fonts.
Take a quick break, and when you are ready, let's dive into Module 2: Header, Footer & Navigation, where we will add your logo and set up your main menu!
7. Styling Buttons & Forms
