Colours
Rouge's six colour schemes and where each one shows up.
Rouge uses colour schemes instead of one colour per setting. A scheme is a small set of colours that belong together: background, surface, text, accent and button. Each section picks a scheme, so changing a scheme changes every section that uses it.
The six schemes
| Scheme | Used for |
|---|---|
| Base | Most of the page: white background, grey surfaces |
| Soft | Light bands of colour behind statements and reviews |
| Rouge | The brand colour, for promo banners and the quiz |
| Ink | Dark sections, the footer and the announcement bar |
| Media | Text over photos and video |
| Drawer | Cart, search and the menu on phones |
Change a scheme
Open Theme settings › Colours, pick a scheme and change its colours. Every section using that scheme updates at once.
Contrast
Rouge checks text against its background in the editor. If the text on a scheme gets hard to read, a warning shows next to the scheme.
Shade swatches
Swatch colours come from the product's Shade option, not from the schemes. Add the colour to each shade in Settings › Custom data › Metaobjects › Shades and Rouge shows it on product cards, in the quiz and in the bundle builder.