The editor
Colour variables
Set your page's brand colours once and have every section follow them.
Every section on a PageStax page is built on seven page-wide colour variables. Change a variable and every section that uses it updates at once, so a whole page can be rebranded in a minute.
| Variable | What it is for |
|---|---|
| Primary | Main buttons and key accents |
| Secondary | Supporting accents |
| Accent | Highlights, badges |
| Background | The page background |
| Surface | Cards and panels on top of the background |
| Text | Body text |
| Muted | Secondary text and subtle lines |
Change your colours#
- Open Color variables on the left rail (or, with nothing selected, press Edit color variables in the inspector).
- Click a colour to open the colour picker, or read its hex code next to it.
- To start from a ready-made set, pick one of the palettes under Start from a theme palette. This replaces all seven colours at once — you can undo it.
The colours belong to the page, so each page can have its own palette.
Colour an element with a variable#
When you set a colour on an element in Style → Appearance, you can choose how it is chosen:
- Default — whatever the section's design uses;
- Theme color — one of your seven variables, so it follows future palette changes;
- Brand hue only — takes the hue of a variable but keeps this section's own lightness and saturation, adjustable with the S and L sliders. Useful when a light section needs a pale tint of your brand colour rather than the full-strength one;
- Custom — any colour you like, which won't follow the palette.
Every mode except Default also has an Opacity slider.