What this page is for
Branding makes the system look like your own product. Everything you set here is used on every screen your staff see, on the sign-in page, in every email, and on receipts, statements and other PDFs. Guests and owners see the same brand on the pages made for them.
You don't need a designer: pick a theme, or a ready palette, or let the system take the colour from your logo, then fine-tune if you like. A live preview on the right shows the result before you save.
Themes set the whole look in one go: colours, fonts, corners, shadows and, for the booking website, the layout. The staff app and the booking website each have their own theme.
Who can use it
People with the Change the branding permission (by default Admin) and the account owner.
How to set up your brand
- Under Name, type your product name, for example "Seaside Stays". Leave it empty to keep the default.
- Under Logos and pictures, upload your logo. SVG or PNG with a transparent background works best.
- Under Colours, either:
- select one of the Ready palettes, or
- select Use colours from my logo (after uploading a logo), or
- choose each colour yourself with the colour pickers.
- Check the Contrast check under the colours. Fix anything it lists.
- Choose your fonts, corners and table spacing under Fonts and shape.
- Select Save. The whole app changes straight away.
How to choose a theme
- At the top of the page, under Themes, select a picture under Staff app theme. Each picture is drawn in that theme.
- Select a picture under Booking website theme.
- To see the website in the ticked theme before saving, select Preview the website. It opens in a new tab with your real listings.
- Select Save themes. The new look is live straight away.
The themes are:
| Theme | Staff app | Booking website |
|---|---|---|
| Classic | The original look: your brand colours, a dark menu, clear borders | Search first, bordered cards, a plain header |
| Apple style | Like a macOS or iCloud web app: a light grey see-through menu, a frosted top bar, Inter font (very close to Apple's own), 10 to 12 pixel corners, soft shadows | Like apple.com: white and soft grey (#f5f5f7) bands with black feature bands, big bold tight headlines, a thin frosted top bar, blue pill buttons with "more" links, borderless rounded cards, sections that fade in as you scroll |
| Sereno | A navy menu with round, pill-shaped items and soft borderless cards | A warm, modern living site: a tall white header with your phone number, a rounded photo hero with the search bar on it, places as round buttons, sky-blue pill buttons with navy text, soft rounded cards, a navy footer, a round contact button and a bottom menu bar on phones |
| Dark luxe | A near-black menu, a gold accent, elegant serif headings, small capital buttons | Charcoal and ivory with gold, elegant serif headings, square buttons, a full-screen photo under a see-through header |
| Coastal | A deep sea-green menu, sand page, friendly serif headings | Sand and white, sea teal with a coral accent, a hero with the search beside a photo |
To keep your own colours or fonts with a theme, tick Keep my own colours or Keep my own fonts. The theme's corners, shadows and layout still apply. Without the tick the theme's colours and fonts are used and the Colours section below only affects areas the theme doesn't cover (emails and documents).
How to fine-tune the website layout
Open Fine-tune the website layout under the website themes:
| Field | Choices |
|---|---|
| Top bar | Plain bar; Thin frosted bar (Apple style); Tall white bar; See-through over the hero photo |
| Listing cards | Thin border; Soft shadow; Grey tiles, no border; Photo and text only |
| Buttons | Same corners as the theme; Pill; Square with spaced capitals |
| Space between sections | Compact, Normal or Generous |
| Footer | Light with a line; Soft grey; Dark |
| Fade sections in as visitors scroll | On or off. Visitors who ask their device for less motion never see it. |
| Show a bottom menu bar on phones | Home, Explore and Call us at the bottom of the screen on phones |
| Show a round contact button in the corner | Opens WhatsApp, or calls, or emails you, whichever is set up |
Choosing another website theme puts these back to that theme's choices.
To change the sections of the website pages (the hero, featured listings, gallery and so on), select Build the website pages. See Website builder.
How to preview your colours
The Preview panel on the right repaints as soon as you change a colour, before you save. Use the Light and Dark buttons above it to check both modes. Fonts, logos and the rest of the app change when you save.
How to check how documents look
- Set the paper size, logo, footer note and your company details under Documents (PDF).
- Select Save.
- Select Preview a sample PDF. A sample document opens in a new tab.
How to go back to the defaults
- Select Back to defaults at the bottom of the form.
- Tick Also remove the uploaded logos and pictures if you want those gone too.
- Confirm. Name, colours, fonts and layout return to the defaults.
Fields and columns
Name
| Field | Meaning | Rules |
|---|---|---|
| Product name | Shown in the browser tab, the menu, emails and the app icon | Up to 120 characters. Empty means the default. |
| Short name | Used where space is tight, such as under the app icon on phones | Up to 40 characters. Empty means the product name. |
| Tagline | A short line on the sign-in page and in emails | Up to 190 characters. Optional. |
Logos and pictures
| Field | Where it appears | Notes |
|---|---|---|
| Logo for light backgrounds | Menu (when the menu is light), sign-in page, emails, documents | PNG, JPG, WebP or SVG, up to 2 MB. |
| Logo for dark backgrounds | Dark menu and dark mode | Falls back to the light logo when empty. |
| Square mark | Collapsed menu and app icon | Falls back to the light logo when empty. |
| Browser tab icon (favicon) | The browser tab | ICO, PNG or SVG, at least 32 by 32 pixels. |
| Sign-in page picture | Beside the sign-in form | Used only with the Split screen sign-in layout. |
Tick Remove under a picture and save to delete it. Photos are cleaned of hidden location data when uploaded.
Colours
Each colour has a value for light mode and one for dark mode.
| Colour | Used for |
|---|---|
| Primary | Buttons, links, the active menu item, focus outlines |
| Text on primary | Text and icons on primary-coloured buttons |
| Secondary | Secondary details; also muted text on documents |
| Accent | Menu icons on public pages |
| Success, Warning, Danger, Information | Status badges, messages and alerts |
| Sidebar background and Sidebar text | The menu on the left |
| Page background | Behind everything |
| Cards and panels | The boxes content sits in |
Ready palettes set primary, sidebar and accent together and adjust text colours so they stay readable. Use colours from my logo finds the main colour of your logo (greys, white and black are ignored) and darkens or lightens it if needed for readability.
Contrast check
The check lists colour pairs that may be hard to read, with their contrast ratio. Text should have at least 4.5 to 1 against its background (the WCAG AA standard). Primary-coloured links and icons on cards need at least 3 to 1. You can still save with warnings, but some people may struggle to read the text.
Fonts and shape
| Field | Meaning |
|---|---|
| Heading font | Page titles and section headings |
| Body font | All other text |
| Corners | Sharp, Small, Medium or Rounded corners on buttons, cards and fields |
| Table spacing | Comfortable, or Compact to fit more rows on screen |
| Default appearance | Light, Dark or Device, for people who haven't chosen their own |
| Sign-in page layout | Centred card, or Split screen with your picture |
| Show "Powered by" | A small line at the foot of the sign-in page |
All fonts are stored on your own server. No visitor information goes to a font service. Noto Sans also covers Bengali, Arabic and Devanagari letters.
Documents (PDF)
| Field | Meaning |
|---|---|
| Paper size | A4 or US Letter |
| Show the logo on documents | Puts your light logo at the top of every PDF |
| Footer note | A line at the foot of every PDF, for example your address and phone number. Up to 300 characters. |
| Line under your name | A short line under your name at the top of booking confirmations and receipts, for example "Property management and guest services". |
| Company address | Your address, shown on confirmations, receipts and at the top of PDFs. Each line you type stays on its own line. |
| Company phone | Shown with the address, and in the closing note of a confirmation so guests know whom to call. |
| Company email | Shown with the address and in the closing note of a confirmation. |
The legal name and tax number at the top of documents come from Settings.
Statuses and automation
- Every save is recorded in the Change history.
- Each save gives your stylesheet and pictures a new address, so browsers load the new look straight away instead of a stored copy.
- Long dashes typed into the name or tagline are replaced with a hyphen or a comma (house style).
- Every theme's fonts are stored on your own server and use open font licences. No font service is contacted.
- Back to defaults also puts both themes back to Classic.
Settings that change this page
- The legal name and tax number on documents come from Settings.
- Wording on this page can be changed under Site text.
FAQs
Can each person choose light or dark mode? Yes. Default appearance only applies until someone picks their own in their user menu.
Will my brand show on the sign-in page? Yes, the logo, tagline, colours and layout are all used there.
Can I use my own font file? Not yet. Choose from the bundled fonts for now.
Can my website look like another company's website? Pick the theme closest to it and arrange the sections in the Website builder. Use your own words, logo and photos.
Does the staff theme change what guests see? No. The staff app theme and the booking website theme are separate.
Do emails use my colours? Yes: the colour band, buttons and logo in every email come from this page.
Troubleshooting
| Problem | What to do |
|---|---|
| "Use colours from my logo" is greyed out | Upload a logo for light backgrounds or a square mark first, and save. |
| "No clear brand colour was found in the logo" | The logo is mostly grey, black or white. Pick a palette or choose the colour yourself. |
| The upload is rejected | Use PNG, JPG, WebP, SVG or ICO, up to 2 MB. |
| The logo looks blurred | Upload an SVG, or a PNG at least 400 pixels wide. |
| Text is hard to read after saving | Look at the Contrast check and change the colours it lists, or pick a ready palette. |
| The old look still shows | Reload the page. If it persists, clear the browser cache. |
| My colours don't show after choosing a theme | The theme's colours are used. Tick Keep my own colours and save the themes. |
| The website preview button is missing | It needs the booking website module and the Build the booking website pages permission. |