3.2 How to Apply Secondary Colour Schemes

This feature applies only when using the Pixflow framework.
If you are using framework mapping (ACSS, Advanced Themer, Core Framework, or Raw CSS), this document does not apply.

Secondary colour schemes allow you to introduce clear visual context without creating a second brand or breaking hierarchy.

This document explains when to use secondary schemes and how to apply them correctly in Bricks Builder.

What Secondary Schemes Do

Secondary schemes create contained colour environments within a page.

They are designed to:

• Visually separate sections
• Create rhythm on long pages
• Support different content densities
• Maintain brand consistency

They are not alternate palettes or decorative overrides.

When to Use a Secondary Scheme

Secondary schemes work best when applied to:

• Full-width sections
• Major content blocks
• Primary layout containers

They are especially effective for:

• Feature sections
• Editorial blocks
• Footers and closing sections
• Highlighted content areas

Avoid using them on individual buttons or small, isolated elements.

How Secondary Schemes Are Applied

Secondary schemes are applied using CSS classes.

Pixflow provides two options:

• color-scheme-2
• color-scheme-3

Each class switches the colour environment for everything inside that container.

Applying a Secondary Scheme in Bricks Builder

Step 1: Add Your Section or Container

Add the section, div, or main wrapper that should have a different colour environment.

Best practice is to apply secondary schemes at the highest logical container level.

Step 2: Add the Scheme Class

With the section or container selected:

1. Open the Classes field
2. Add one of the following:

color-scheme-2

or

color-scheme-3

That’s it.

No additional configuration is required.

What Happens When You Apply the Class

When a secondary scheme class is applied:

• Background, foreground, text, borders, and accents shift together
• Contrast and accessibility remain protected
• All child elements inherit the new scheme automatically
• The global brand accent hierarchy is preserved

This ensures the section feels distinct without feeling disconnected.

Important Rules to Follow

• Apply secondary schemes to containers, not individual elements
• Use one scheme per section
• Do not nest color-scheme-2 inside color-scheme-3
• Do not mix roles from different schemes in the same container

If a section needs a different environment, it should be a different section.

Common Mistakes to Avoid

• Using secondary schemes to “add colour”
• Applying them to buttons or small components
• Nesting multiple scheme classes
• Using them to fix contrast or readability issues

Secondary schemes are structural tools, not visual effects.

A Simple Guideline

If removing the secondary scheme would make the page harder to read or understand, it is being used correctly.

If removing it would only make the page “less colourful,” it probably was not needed.

Summary

• Secondary schemes create contextual colour environments
• Apply them using color-scheme-2 or color-scheme-3
• Best used on full sections or main containers
• No configuration or overrides required
• Accessibility and hierarchy are preserved automatically

Used correctly, secondary schemes give you structure and clarity—without adding complexity.