Skip to main content
Account & Settings

Theme

Customize the look of your customer-facing emails and checkouts: fonts, corner style, button style, and a brand colour palette generated automatically from your brand colour.

Written By Tobias Lønnerød Madsen

The theme controls how your customer-facing emails and checkouts look. The same theme applies to both, so anything you change here updates every email Moonbase sends on your behalf and every checkout your customers see. You find it under Account settings > Storefront > Theme. The storefront widget on your own website is themed separately, in its setup options.

The Theme section with Montserrat and Inter fonts, soft corners, light buttons, normal labels, a blue brand colour, a button preview and the generated colour shades.

Fonts

Pick a heading font and a body font. Headings can be a more decorative font (Poppins, PT Serif, EB Garamond, etc.); body should be something that reads well at small sizes (Inter and Roboto are safe defaults). Both fonts are loaded from Google Fonts so they render in any email client that supports webfonts and fall back gracefully where they don't.

Corner style

Three options control how rounded the corners of buttons, cards, and pills are throughout the theme:

  • Sharp: no corner radius. Most architectural feel.

  • Soft: small radius. Modern but restrained.

  • Round: fully rounded pills. Friendlier and more playful.

Button style

Your main buttons (such as Buy now) are always filled with your brand colour. Button style decides the second button beside them (such as Learn more):

  • Light fills it with a pale tint of your brand colour, with brand-coloured text.

  • Outlined makes it white with a grey border and dark text.

Button labels

Pick Normal, or Uppercase for bold, spaced capitals.

Colours

You only set two colours; the rest of the palette is generated.

  • Brand colour: your main brand identity colour. Used on buttons, headings, and accents. Pick the same colour you use elsewhere on your site.

  • Contrast colour: used for text on top of your brand colour (typically black or white). Moonbase shows the contrast ratio next to this field; aim for at least 4.5 (WCAG AA). Anything below shows a red warning. If you change the brand colour, we automatically pick a contrast colour that hits the threshold, but you can override it. Buttons use your brand colour when the contrast colour reads on it (4.5:1) and the brand stands out on white (3:1). Otherwise they use a darker shade of it, labelled in black or white, whichever reads. The preview under the colours shows a main and a second button as they will look.

The eleven-shade palette below the colours preview is auto-generated from your brand colour and is what every UI component actually uses (lighter shades for backgrounds, darker for text and borders). You don't pick these directly.

An amber brand colour with black contrast colour, the button preview drawn in a darker amber shade, and the eleven generated shades.

Logo

Your logo and wordmark are set under Account settings > Account > Branding. Checkout, the customer portal, emails and PDFs draw the logo on your brand colour (or on a darker shade of it when the brand is too pale to show on white), so a logo with a transparent background shows that colour through it.

Previewing changes

Preview opens your current settings, saved or not, in three tabs: Email, Hosted Checkout and Overlay Checkout. Use it before saving to check text legibility, button styles and colour combinations together.