Skip to main content

Branding

Preface demos can be fully branded to match your company's visual identity. Branding settings are found in Settings → Branding.

Screenshot placeholder

A screenshot of the Branding settings tab will go here.

Upload your company logo to display it in the demo player. The logo appears in the top-left corner of the header bar throughout the demo.

Click Upload logo and select an image file. PNG or SVG files with a transparent background work best.

To remove the logo, click Remove logo.

Colours​

Preface lets you control three distinct colour areas:

Primary colour​

The primary colour is used for interactive elements throughout the demo — the progress bar fill, active hotspots, and default CTA button styles. Set it to your brand's main colour.

Background colour​

The background colour is the fill colour behind the step screenshot. It's most visible on steps where the screenshot doesn't fill the full viewport (e.g. if your screenshots are portrait-oriented on a wide screen). The default is a near-black (#030712).

Header / footer colour​

The header/footer colour controls the colour of the top bar (containing the logo and progress bar) and the bottom navigation bar. This defaults to a dark near-black, but you can match it to your brand's primary colour or any other tone.

Screenshot placeholder

Side-by-side screenshots showing the same demo with default branding versus custom branding will go here.

tip

For a polished branded experience, set your primary colour, header/footer colour, and logo together. A common approach is to use a dark shade of your brand colour for the header/footer, and a brighter shade as the primary accent.

Font​

Enter a font name to change the typeface used in the demo player. This accepts any Google Fonts family name (e.g. Inter, Roboto, DM Sans). The font is loaded automatically from Google Fonts at runtime.

Leave this field blank to use the default system font.

Branding is per-demo​

Each demo has its own branding settings. This means you can create differently branded demos for different products, markets, or customers — all from the same workspace.