Skip to content
Maison

Search the documentation

Type a setting, a section or a question.

Getting started

Theme styles

Maison, Couture, and Riviera: three complete brand voices, ready to use.

On this page

Not every luxury brand speaks in the same voice. Rather than having you assemble an identity setting by setting, Maison offers three theme styles: consistent combinations of fonts, letter case, and control shape.

StyleFeelAt a glance
Maison (default)Understated and contemporaryA single typeface family, sentence case, pill-shaped controls.
CoutureEditorial and refinedSerif headings, expressive scale, airy grids, softened corners.
RivieraGraphic and boldLetter-spaced capitals for headings and interface, square corners, outlined fields, boxed options.

What each style sets

The table below is read directly from the theme files. Values in bold are the ones that change from one style to another.

SettingMaisonCoutureRiviera
Heading fontJostCormorantMontserrat Medium
Body fontJostJostMontserrat
Heading weightRegularRegularMedium
Heading caseSentence caseSentence caseCapitals
Interface caseSentence caseSentence caseCapitals
Heading scaleRestrainedExpressiveRestrained
Product grid gutterTightAiryHairline
Control shapePillSoftSquare
Field styleUnderlineUnderlineOutline
Option styleTextTextBoxes

All three styles share the same color schemes, the same reading size (14px), the same page width (wide) and page margin (28px), the same density, the same control size, and the same cart type (drawer).

Change your style

Open theme settings

In the editor, click the gear icon. The style picker is at the top of Theme settings (Theme style).

Choose a style

Select Maison, Couture, or Riviera. The preview updates immediately.

Save

Click Save.

Customize a style

A style is only a starting point. After applying one, you can change any theme setting. A few rules that hold in every style keep your store consistent:

  • Capitals are always letter-spaced. As soon as you set headings or the interface in capitals, letter spacing is adjusted automatically, and headings are set slightly smaller so they take up the same room.
  • The heading font names things; the body font makes things work. Page titles, section titles, and product names use the heading font; buttons, fields, prices, navigation, and body copy use the body font.
  • Headings are never bold. Their weight is the one you choose in Heading weight.

To go further, see Typography and Buttons and fields.

Was this page helpful?

Maison 1.0.0