Secondary Color Palette Support (Page/Section Level)

Hi Will,

I’m currently building a Squarespace site where this limitation is becoming very clear.

The main site (main-site.com) uses a primary brand palette defined in Site Styles.

Within that, I’m also building what is essentially a second brand experience at:
/secondary-site/ (with pages like /about, /rentals, /events, etc.)

This sub-brand has its own distinct color palette, but it still lives inside the same Squarespace site.

CURRENT WORKAROUND

body { --white: #ffffff; --lightAccent: #fcecd5; --accent: #b24b1b; --darkAccent: #474f45; --black: #000000; } 

From there, I have to manually apply these across sections using selectors.

THE CHALLENGE

Site Styles works great for the primary palette, but there’s no native way to apply a secondary palette to:

• A group of pages (e.g. everything under /secondary-site/)

• Specific sections within a page

To achieve this currently, I have to:

• Define a second set of CSS variables

• Target sections/pages via IDs or collection IDs

• Override styles for backgrounds, text, buttons, links, etc.

• Maintain a growing list of selectors like .section-background, .sqs-button-element--primary, etc.

It works, but it’s not scalable or easy to maintain.

WHAT WOULD HELP

A way to define and apply a secondary color palette alongside Site Styles:

• Create “Palette B” (mirroring Site Styles structure)

• Apply it at:

  • Page level (ideal for /secondary-site/*)

  • Section level (for mixed-brand layouts)

• Automatically style all native elements within that scope:

  • Backgrounds

  • Headings & body text

  • Buttons (all types)

  • Links

  • Borders / strokes

IDEAL UX

• Page setting: Color Palette → Default / Palette B

• Section-level dropdown for palette selection

• Or a class-based approach (e.g. .palette-b)

WHY THIS MATTERS

This pattern comes up often in real builds:

• Sub-brands within one domain

• Program-specific landing pages

• Multi-offer businesses

• Even just needing additional accent color systems

Right now, it requires a lot of custom CSS and manual consistency management.

A built-in or plugin-based solution using scoped variables would make multi-brand builds much easier and more maintainable.

I would absolutely pay for something like this.

Thanks for considering this ✌️