Branding

Your booking page, patient emails and kiosk screens use your practice's logo, colours, type and shape. This guide explains what each setting changes, so you can get a close match to your website without guessing.

Everything here is under Setup → Branding in the admin dashboard. Each panel has an Edit button and a live Preview beside it — change a colour and you see the result immediately, before saving.

Logo

Upload a logo and it appears in the booking page header, on the kiosk welcome screen, and at the top of patient emails.

Practice name beside the logo — Show or Hide. Hide it if your logo already includes your practice name, so patients don't read it twice. This affects the booking page header only: patient emails always show the name, because an email client that blocks images would otherwise leave nothing identifying the sender. The setting is ignored while you have no logo, so it can't leave you with an empty header.

Colours

Six colours, each doing a specific job. Blank is a valid answer for two of them — the page falls back to your primary colour.

Setting	What it changes
Primary colour	Your main brand colour: links, headings, and selected states (the appointment type you've chosen, the day you've picked).
Secondary button colour	The fill for secondary actions — Back, Book for someone else. Leave blank for a neutral grey.
Accent colour	Hover and highlight states: the calendar day under your cursor, menu options as you move over them.
Background colour	The page canvas behind the panels.
Header colour	The header band on emails and on the kiosk/booking page. Blank uses your primary colour.
Button colour	Primary buttons and calls to action. Blank uses your primary colour.

Picking colours that work

• Start with primary. Take it from your website or logo. Most practices need nothing else — header and button both fall back to it, and the result is consistent by default.
• Text contrast is handled for you. Where a colour sits behind text — headers, buttons — Your Booking picks black or white text automatically based on how dark your colour is. You don't need a separate text colour, and you can't accidentally produce white on yellow.
• Background wants to stay close to white. It's the canvas behind everything else. A strong colour there fights every panel on top of it; a very light tint of your brand colour reads as "designed" where a saturated one reads as "broken".
• Accent is for movement, not emphasis. It only shows under a cursor or on a highlighted option, so a colour too close to your primary makes hover invisible, and one wildly different makes the page feel like two brands.
• Secondary is deliberately quiet. Its job is to be less attractive than the primary button, so a patient's eye lands on Continue rather than Back. Blank — plain grey — is usually the right choice.

Dark mode

Auto follows the patient's own device setting: a phone set to dark mode sees your dark palette, everything else sees the light one. Always light ignores the device and shows the light palette to everyone.

If you choose Auto, set the six dark colours as well. They're the same six jobs, chosen for a dark canvas — usually a lighter, less saturated version of each brand colour, because a colour that reads well on white can glare on black.

Typography

Setting	What it changes
Body font	Everything that isn't a heading.
Heading font	Headings only. Tick Same as body if you'd rather one typeface throughout.
Heading weight	How bold headings are.
Button weight	How bold button labels are.
Uppercase headings	Renders headings in capitals.

Fonts come from Google Fonts, so anything you can name there you can use. Matching your website's typeface is the single change that does most to make the booking page feel like part of your site.

Shape

Setting	Options	What it changes
Control corners	Sharp / Rounded / Pill	Buttons and input fields.
Panel corners	Sharp / Rounded	Cards and panels.

Match whatever your website does. Pill controls with sharp panels is a deliberate look; mixing them by accident is the thing to avoid.

Multi-branch: one brand across every branch

If your branches share a single brand, don't set them up one at a time. In Branding, the Shared branding card offers Use another branch's branding — pick the branch to follow and its logo, colours, type and shape apply straight away, and re-apply whenever that branch changes them.

While it's on, the branding panels at the following branch are read-only and the logo uploader is hidden, since anything saved there would be replaced by the source branch's next change.

Turning it off undoes it. The branch goes back to the logo, colours, type and shape it had before it started following, and editing is handed back. Switch it on by mistake and switching it off puts everything back as it was.

See the Multi-Branch Setup Guide for the rest of the per-branch setup.

Where your branding appears

• Booking page — header, colours, type, shape.
• Patient emails — logo, header colour, button colour. The practice name always appears, whatever the header setting.
• Kiosk screen — logo above the practice name, same palette.
• Manage-appointment pages — the confirm, reschedule and cancel pages patients reach from a reminder.

Your Booking's admin dashboard and the staff dashboard are not branded — they're your tools, not patient-facing.

Troubleshooting

The preview looks right but the booking page doesn't

Your browser may be holding an older copy — reload the booking page.

A colour looks different on a patient's phone

Check whether you're on Auto dark mode and they're viewing in dark. The dark palette is a separate set of six colours.

Branding panels are greyed out and there's no logo uploader

This branch is following another branch's branding. Turn off Use another branch's branding in the Shared branding card to edit it directly.

Text is hard to read on a button

The text colour is chosen automatically from your button colour, so a mid-tone can sit awkwardly between black and white text. Go a shade darker or lighter.