Branding
Preface demos can be fully branded to match your company's visual identity. Branding settings are found in Settings → Branding.
A screenshot of the Branding settings tab will go here.
Logo
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.
Side-by-side screenshots showing the same demo with default branding versus custom branding will go here.
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.
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.