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 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.
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 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 and footer note 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. |
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).
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.
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. |