Palettes
A palette is a named set of colours — background, text, link and highlight, with the lighter and darker derivatives calculated from them — that can be applied to any part of the site. Editors pick palettes; Themers define what colours they contain.
See colour palettes on the demo site: https://govcms.convivial.io/demo/colour-palettes
The palettes
Standard — the default; the page background and body text.
Alternate — a second neutral, for banding sections without strong colour.
Primary, Secondary, Accent — the brand colours, in decreasing order of how much of the page they should cover.
Neutral — a grey, for footers and quiet areas.
Success, Warning, Error, Info — used by alerts and messages; not chosen by editors.
Every palette exists twice, as a light and a dark scheme, and the site switches between them when the visitor toggles the scheme in the header. You never pick light or dark — you pick a palette and both versions come with it.
Where a palette is applied
The banner of a page, from the Banner palette field in the page's Header group.
Any component, from the Palette field in its Presentation group. Applying a palette also gives the component padding, so it reads as a coloured block.
The site's regions — header, footer, menu bar and so on — from the Themer's Regions settings.
Components inside a coloured component inherit its palette unless given their own, so a Section set to Primary colours everything inside it. Contrast between text and background is guaranteed within a palette; it is not guaranteed between two palettes side by side, so avoid stacking a dark and a light palette in overlapping components — see Presentation.
The colours themselves, and how the derivatives are calculated, are described in Colours.
Last updated