Choosing good colours is only half the work.
Using them consistently is what makes a site feel intentional, readable, and calm.
This document explains where colours belong in a Pixflow site, based on roles and purpose rather than preference. The goal is to help you apply schemes correctly across real layouts—without visual noise or future problems.
Think in Roles, Not Locations
In Pixflow, colours are defined by what they do, not where they appear.
Avoid thinking in terms of:
- “This section should be grey”
- “That card needs a darker colour”
- “Let’s add colour here for interest”
Instead, think in terms of roles:
- Is this a surface or content?
- Is this structural or interactive?
- Should this draw attention or stay quiet?
When roles are used consistently, layouts remain coherent even as designs change.
Background: The Primary Environment
Background defines the main visual environment.
Use it for:
- Page sections
- Large layout areas
- The dominant reading surface
Backgrounds should feel stable and calm.
They are not a place for emphasis.
If a background draws attention to itself, everything placed on it has to work harder to be readable.
Foreground: Supporting Surfaces
Foreground is for surfaces that sit on top of the background.
Common uses include:
- Cards
- Panels
- Content containers
- Grouped UI elements
Foreground creates separation and structure, not emphasis.
It helps users understand grouping without distracting from content.
Foreground should never compete with the accent.
Heading and Text: Content Comes First
Text colours exist for one purpose: reading.
- Heading establishes hierarchy within content
- Text supports long-form reading and clarity
These colours should feel dependable and predictable.
If text colours are frequently adjusted to “look nicer,” it usually means the surrounding surfaces are doing too much.
Good systems protect text first and foremost.
Border: Quiet Structure
Borders exist to support layout, not decorate it.
They are best used for:
- Subtle separation
- Input outlines
- Structural boundaries
Borders should be restrained and low-contrast relative to content.
When borders become visually dominant, they fragment the interface rather than organise it.
Accent: Reserved for Meaning
The accent is the strongest signal in the system.
Use it only when you want to say:
“This matters.”
Typical uses include:
- Primary actions
- Key interactive elements
- Critical highlights
Accent should not be used for:
- Decorative backgrounds
- Large surfaces
- Repeated structural elements
Restraint is what gives the accent its power.
If it appears everywhere, it stops communicating anything.
Buttons: Actions, Not Decoration
Buttons represent actions, not decoration.
For this reason, Pixflow treats button colour as an interaction signal, not a contextual styling choice.
Primary buttons
Primary actions always use the Main scheme accent, regardless of where they appear.
This ensures that:
- Actions remain recognisable across the site
- Brand intent is expressed consistently
- Visual hierarchy is preserved across sections and schemes
Buttons do not adopt secondary scheme accents.
Secondary schemes shape environments; they do not redefine interaction.
Secondary and tertiary buttons
Buttons that are not primary actions should use neutral treatments that respect the surrounding context without introducing new emphasis.
Typical approaches include:
- Foreground-colour buttons
- Outline or minimal buttons
- Subtle surface-based treatments for low-priority actions
These options maintain clarity without competing with primary calls to action.
Buttons on foreground surfaces
Foreground surfaces (such as cards or panels) already carry emphasis.
Buttons placed within them should usually be quieter than page-level calls to action, relying on structure and contrast rather than accent colour.
Accent buttons should be used inside foreground surfaces only when that action is the primary focus of the entire page.
What to avoid
- Using secondary scheme accents for buttons
- Creating different button colours per section
- Treating buttons as decorative elements
- Repeating accent usage until emphasis is diluted
Restraint is what keeps interaction clear and hierarchy intact.
Using Secondary Schemes in Layouts
Secondary schemes are best applied to:
- Entire sections
- Distinct content blocks
- Contextual environments (such as feature areas or footers)
They work because all roles shift together, preserving internal balance.
They should not be applied:
- To individual components in isolation
- As a quick fix for contrast or emphasis
- To introduce alternate brand personalities
If a component needs a different colour environment, it usually belongs in a different section—not a different palette.
Consistency Beats Creativity at Scale
It’s tempting to “improve” layouts by adding colour variety.
In practice, the opposite is true:
- Consistent role usage improves clarity
- Predictable colour behaviour builds trust
- Calm layouts scale better over time
Creativity should come from structure, spacing, and content—not constant colour variation.
A Simple Check Before You Add Colour
Before adding or changing a colour, ask:
- What role is this serving?
- Does this add meaning or just variation?
- Will this still make sense if the layout changes?
If the answer is unclear, the colour probably does not belong there.
What’s Next
You now know how colour roles map to real interfaces.
The next step is understanding how secondary schemes work in more detail—and how to use them without breaking hierarchy.
In the next document, Using Secondary Colour Schemes (Scheme 2 & 3), we’ll explain what they are, what they are not, and how to apply them confidently in real projects.