Colors

In Maison, you don't pick a color per element: you define color schemes, and each section picks one. Open Theme settingsColors to edit them.

Bundled schemes

The theme comes with three monochrome schemes, because in a fashion house the color comes from the photography:

By default, most sections use scheme 1; the statement, newsletter, and video use scheme 2; the hero and collection header use scheme 3.

The six colors in a scheme

Color	Used for
Background	The section background.
Foreground	Text, icons, the outline of secondary buttons, and the focus ring.
Muted text	Secondary information: prices in grids, dates, counts.
Border	Decorative rules between elements.
Accent	The background of the primary button (add to cart, checkout…).
Accent text	The text of the primary button.

Everything else is calculated from these six colors: the outline of fields and options, the background behind product photos, the overlay behind drawers, hover colors, and placeholder illustrations.

Create or edit a scheme

Keep text readable

The bundled schemes meet WCAG AA contrast thresholds. If you edit a scheme, make sure you keep:

• a contrast of at least 4.5:1 between foreground and background, between muted text and background, and between accent text and accent;
• a contrast of at least 3:1 between foreground and background so field outlines stay visible (the theme calculates them from those two colors).

The border is decorative: it can stay very light.

Schemes and images

Several sections place text over a photograph (hero, image behind text, collection header, "Full bleed" product cards, transparent header). Their overlay is mixed from the chosen scheme's background: a dark scheme darkens the image, a light scheme lightens it. For these sections, choose a scheme whose background contrasts with the text you want to read, such as scheme 3 (dark background, light text).