Design and typography

Once you're on the custom builder, two panels on the editor's icon rail control how the page looks: Design for colours, and Typography for fonts and type scale.

Colours

The Design panel has seven colour slots. Each has a native colour picker and a hex input, so you can type a value directly or use the picker.

• Primary: main brand colour, used for buttons and key actions.
• Secondary: supporting colour.
• Accent: highlight colour for interactive or standout elements.
• Text: body text colour.
• Background: page background.
• Header bg: navigation bar background.
• Header text: text and icon colour in the navigation bar.

A new custom site starts on Mercleo's default palette: a dark warm grey for Primary, Text, and Header bg, a deep mocha Secondary, a spicy orange Accent, and a white Background.

Fonts and type scale

The Typography panel has separate selectors for heading and body fonts, grouped into Sans-serif, Serif, and Display, plus a preview above the controls that updates as you choose. The catalogue:

• Sans-serif: Inter (default), Sora, Space Grotesk, Work Sans, DM Sans, Manrope, Plus Jakarta Sans, Figtree.
• Serif: Playfair Display, Lora, Fraunces, Source Serif 4, Bitter.
• Display: Archivo, Bricolage Grotesque, Outfit, Epilogue, Bebas Neue.

Pairing a Display or Serif font for headings with a neutral Sans-serif body font is a common combination. Fonts load from Google Fonts when attendees visit the page.

Below the font pickers, Type scale sets the overall size and weight of every heading and body block on the page. Four presets:

• Compact: tighter and smaller.
• Default: balanced.
• Editorial: large and airy.
• Bold: heavy headings.

Logos

Each event supports three logo variants, one for each surface where a logo might appear:

• Color: the default full-colour version.
• White: used on dark surfaces such as a dark nav bar.
• Dark: used on light surfaces.

Header logo selection

In the custom builder's Settings panel, a three-card picker lets you choose which logo variant appears in the nav bar: color, white, or dark. Click the active card again to deselect it and return to automatic selection.

Automatic selection picks the logo in this order:

1. White variant (reads best on most nav bars)
2. Color variant
3. A hero-section logo override, if one is set (a legacy option)
4. Your organization logo

If none of these are set, the nav renders without a logo.

Saving and publishing

Colour, font, and type-scale changes work like every other edit in the custom builder: they land in a draft, and Save draft keeps them without changing the live page. Attendees only see your new design once you click Publish.