Colors

Instant does not have a background colour setting on each section. It has colour schemes: complete sets of background, text, heading, border and button colours that work together. Each section picks the scheme it uses. Change a scheme under Theme settings → Colors, and every section using it changes with it.

What a scheme holds

Each scheme sets its own backgrounds, text, borders and the colours for the three button roles: primary, secondary and tertiary. Buttons everywhere in the theme are one of those three, so a scheme decides how every button on a section looks. Each button role also has a hover colour; leave it empty and the theme darkens the button slightly on its own.

Scheme 1 is the page itself: the body, the header and most sections start on it. Keep it your lightest, plainest scheme. Use a dark scheme for banners with light text over photos, and a tinted one for sections you want set apart.

Caution

Keep text and background far enough apart to read easily. A scheme with faint text is faint on every section that uses it.

Status colours

These apply on every scheme. Success and Error colour messages and form feedback. Sale highlight colours sale badges and discounted prices. Review stars colours ratings.

Free shipping bar

Progress fill, Bar background and Goal reached colour the free shipping bar in the cart on every scheme.

Where schemes are chosen

Every section has a Color scheme setting. Banners call it Text and button colors, because the picture is the background there and the scheme only paints the words and buttons over it. The cart drawer and cart page can give their totals a different scheme from the rest of the panel, to set the Checkout area apart.