Does Each Squarespace Template Have Its Own Site Styles Options?

7.0 vs 7.1 Site Styles: Side-by-Side Comparison

The table below shows what each version actually includes in its Site Styles panel. Use this as a reference before you start customizing.

Site Styles on Squarespace 7.0

Template-Specific Options

On Squarespace 7.0, each named template (Brine, Bedford, York, Farro, Skye, etc.) has its own unique Site Styles panel. The Brine template family exposes extensive design controls: dozens of font, color, spacing, and layout options. The Bedford template has a different set of options. Some templates offer more granular control than others.

What Varies Between 7.0 Templates

• Font options: Some templates let you set different fonts for headings, body, navigation, and buttons individually. Others offer only one or two font selectors.
• Color options: The number of configurable color fields ranges from 3-4 (limited templates) to 10+ (Brine family).
• Spacing controls: Padding and margin sliders for sections, headers, and content areas exist in Brine but are absent in many other templates.
• Layout options: Header layout choices, sidebar visibility, and gallery display settings are template-specific.

Implications

When choosing a 7.0 template, the Site Styles panel is a significant factor. A template with limited Site Styles options means you need Custom CSS for design changes that other templates handle natively. Before committing to a 7.0 template, open Site Styles and evaluate whether it exposes the controls you need. For template selection, our guide to choosing a Squarespace template covers evaluation criteria.

Which Squarespace 7.0 Templates Have the Most (and Least) Site Styles?

This is the question most guides skip. Here is a practical breakdown based on the actual Site Styles panels of common 7.0 templates:

Most extensive Site Styles (7.0):

• Brine family (Brine, Aria, Aurora, Basho, Blend, Cacao, Clay, Duke, Forte, Galapagos, Habitat, Hatch, Hudson, Impact, Juke, Karma, Launch, Loggia, Mentor, Mojave, Monument, Motto, Naomi, Native, Nur, Om, Organiq, Pacific, Pavilion, Peak, Promotion, Rally, Shift, Stand, Tremont, Tudor, Union, Utopia, Vow, Wells, Wexley): The Brine family has the largest Site Styles panel in 7.0, with font controls per element type, extensive color settings, and layout options for the header and footer.
• Pacific family (Pacific, Devon, Hayden): Strong typography and color controls, more limited than Brine but above average.

More limited Site Styles (7.0):

• Bedford family: Fewer color and layout options compared to Brine. Custom CSS is often needed for common design changes that Brine handles natively.
• Adirondack, Avenue, Fulton, Marquee, Montauk, Riviera, Skye: These older templates have more limited Site Styles panels. If you need granular typography control, plan for Custom CSS.

If you are on a 7.0 template and find yourself unable to change something you expect to control, compare your template's Site Styles panel with the Brine family. The missing option likely exists in Brine but not in your current template.

Site Styles on Squarespace 7.1

Consistent Options Across All Templates

On Squarespace 7.1, every site has the same Site Styles panel regardless of which starting design you chose. The options include: heading fonts (H1 through H4), body font, navigation font, button font, color palette configuration, button styles (primary, secondary, tertiary), section padding defaults, and animation settings. Your starting design only affects the initial layout and default values, not which settings you can access.

Why This Matters

On 7.1, your template choice does not limit your design options. Every starting design can be customized to look like any other through the consistent Site Styles panel and the Fluid Engine for layout. This removes the 7.0 problem of being stuck with a template that offers limited controls.

The 7.1 Color Theme System Explained

The color system in 7.1 is one of the most misunderstood parts of Site Styles. Instead of setting a single global color, you define six color themes and apply them section by section across your site.

How the Six Themes Work

Each of the six themes has five color slots: background, heading, body text, link, and button fill. You fill in each slot for each theme to build your full color palette. The six themes typically represent variations from light to dark.

• Themes 1-3: Usually light-background variations.
• Themes 4-6: Usually dark-background or high-contrast variations.
• Each theme is self-contained: the heading and body colors you set in theme 1 are independent of theme 4.

How Section Themes Work

When editing a page, each section has a color theme selector (a small swatch icon). Clicking it lets you apply any of your six themes to that section. The entire section's background, text, and button colors update to match that theme. A single page can show three or four different color palettes without any CSS, just by assigning different themes to different sections.

What People Get Confused About

• Changing one section changes others: If you edit a theme's colors in Site Styles, every section using that theme updates automatically. People often expect to change one section's color without affecting the rest, but that is not how themes work.
• You cannot set a per-section custom color: You cannot give a single section a one-off background color in Site Styles. You must assign it to one of the six themes. If that theme is used elsewhere, those sections change too.
• Heading color is tied to the theme: You cannot set H2 to red only in section 3 via Site Styles. The heading color is a property of the theme. For per-section heading color overrides, Custom CSS is required.
• Button colors follow the theme: Button fill in each theme applies to all buttons in sections using that theme. You cannot give one button a different color without CSS.

Common Mistakes When Customizing Site Styles

1. Trying to Set a Specific Heading Color Without Understanding Themes (7.1)

Many users set a heading color in one theme expecting it to apply globally, then find that sections using other themes still show the old heading color. Heading colors are per-theme on 7.1. You need to set the heading color in every theme where you want it applied.

2. Expecting Site Styles to Override Custom CSS

If you change a Site Styles setting and nothing changes on your site, there is likely a Custom CSS rule overriding it. CSS rules with equal or higher specificity take priority over Site Styles values. Check Design > Custom CSS for rules targeting the same element. Our guide to Squarespace Site Styles not working covers diagnosis and fixes.

3. Looking for Settings That Do Not Exist on Your 7.0 Template

Users switching from Brine to Bedford or Skye are often surprised to find that font size sliders and spacing controls disappear. Those settings existed in Brine's Site Styles panel, not in all 7.0 templates. Before switching templates on 7.0, compare both panels to see what you will lose.

4. Not Checking Version Before Following a Tutorial

Site Styles tutorials that work on 7.1 often reference panels and settings that do not exist on 7.0 (and vice versa). Always confirm your version before following any customization guide. Our guide to checking your Squarespace version covers four methods.

5. Changing the Font in Site Styles but Not Updating Saved Blocks

Saved content blocks store their own font overrides. Changing the global font in Site Styles does not update text inside saved blocks that have inline font styles applied. You need to open each saved block and clear the inline styles manually.

CSS Fallbacks for Settings Site Styles Does Not Expose

When Site Styles does not have the control you need, Custom CSS is the answer. Here are the most common scenarios with working code examples.

Navigation Link Color (Independent of Body Text)

On many 7.0 templates and even on 7.1, you cannot set navigation link color independently from body text color in Site Styles. This CSS targets the nav links directly:

/* Navigation link color */ header nav a {   color: #333333 !important; }  /* Navigation link hover color */ header nav a:hover {   color: #0066cc !important; }

Per-Section Heading Color Override (7.1)

To give H2 headings a different color in one specific section without changing that heading color across all sections using the same theme:

/* Target headings inside a specific section by its data-section-id */  h2 {   color: #e63946 !important; }

Find the section ID by right-clicking the section in your browser and inspecting the element. Look for the data-section-id attribute on the outermost section wrapper.

H1 Font Size When No Slider Exists (7.0)

On templates without a font size slider in Site Styles, set H1 size directly:

h1 {   font-size: 3rem !important; }  @media (max-width: 767px) {   h1 {     font-size: 2rem !important;   } }

Button Color for a Single Button (7.1)

When you need one button in a section to be a different color from the theme's button fill, target it with the section ID:

 .sqs-block-button-element {   background-color: #ff6b35 !important;   border-color: #ff6b35 !important;   color: #ffffff !important; }

For a full library of selectors, our Squarespace CSS cheat sheet covers the most common targets. For broader CSS techniques, our guide to Squarespace custom CSS covers selectors, properties, and responsive rules.

What Site Styles Controls on Every Version

Typography

Font family, size, weight, letter spacing, line height, and text transform (uppercase, lowercase, capitalize) for headings and body text. On 7.0, the granularity depends on the template. On 7.1, consistent controls for every text element. For font selection, our guide to best Squarespace fonts covers pairing recommendations.

Colors

Background colors, text colors, link colors, button colors, and accent colors. On 7.1, you define colors through the six-theme system and apply each theme per section. On 7.0, individual color settings vary by template.

Buttons

Button background color, text color, border radius, border width, and hover state styling. On 7.1, separate controls for primary, secondary, and tertiary button styles. On 7.0, button options depend on the template. For button customization, our guide to changing button colors in Squarespace covers both Site Styles and CSS approaches.

Spacing

Section padding defaults, content width, and element spacing. These controls affect the overall breathing room on your pages. On 7.1, consistent spacing controls. On 7.0, availability depends on the template.

How to Check Which Version You Are On

Open the page editor. If you see the Fluid Engine grid with freeform block placement, you are on 7.1 with consistent Site Styles. If blocks snap to fixed column positions with no visible grid, you are on 7.0 with template-specific Site Styles. For version identification, our guide to checking your Squarespace version covers four methods. For design strategies, our Squarespace design tips guide covers visual customization principles for both versions. For broader customization, our guide to customizing your Squarespace website covers the full design workflow.

Know Your Version, Know Your Options

On 7.0, your template determines your Site Styles options. Some templates give you extensive control; others are limited and require Custom CSS for basic design changes. On 7.1, every site has the same panel, making template choice a matter of starting layout rather than feature access. The CSS examples above cover the gaps that Site Styles does not.

Check your version, explore your Site Styles panel, and use CSS for anything the panel does not cover.