Branding & apps

Branding and themes

Set your logo, colours and brand brief, then design the look of your customer screens in the Library — by hand, or from a sentence describing your brand.

Where branding lives

Go to Settings → Branding. Everything customers see — kiosks, QR ordering, receipts, emails — picks up your branding from here, so you set it once and every surface follows. The page is organised into tabs: Basics, Brand brief, Communications, and Custom CSS. The looks your customer screens wear — colours, layout, wording, pictures — are designed under Apps → Library (see the Library below).

Your branding shapes what your customers see. The admin you are working in right now always uses the Mavos look, whatever colours you choose below — so a dark or unusual palette never makes your own back office hard to read.

Basics: logo, images, and colors

On the Basics tab:

Upload your Logo — it appears on ordering screens, receipts, and emails.
Add a Hero image and Page background if you want richer ordering screens.
Set your Colour palette — primary, background, and accent colors that drive buttons, highlights, and headers on every customer screen.
Choose your Font family and Default radius under Typography & shape — rounder for friendly, squarer for sharp.

Images come from your media library; anything you upload here is stored there too (see Settings → Media library).

Dark mode

Flick Enable dark mode on the Basics tab and define a separate Dark palette. Surfaces that run in low-light settings — kiosks in a dim venue, late-night ordering — can then present your brand without searing anyone's eyes.

The brand brief

On the Brand brief tab, write a short description of your business — who you are, your vibe, your audience, colour likes and dislikes, a few tone keywords and the key messages you always want to land. The design assistant reads the brief in every session, so each look it proposes starts from your identity instead of a blank slate, and your website can inherit the same brief. Update it whenever your brand evolves. Prefer to talk it through? Refine with AI walks you through the questions in a chat.

The Library

Go to Apps → Library. Owners, admins and managers can use it. It has two tabs: Looks and Blocks (the blocks you reuse across apps — see Building apps).

One look, many screens. A look is something you name, preview and reuse across your ordering screens — kiosks, QR ordering, menu boards, the attract loop and the customer screen — so you design once and every screen follows. Each look's card shows it on one of your own apps, which screens it serves and how many apps wear it. Defaults per screen at the bottom chooses the look an app gets when it has none of its own.
Getting started. Click Add look and pick a ready-made look from the gallery — each one is drawn on one of your own apps when you have one of that kind — or choose Describe your look and write a sentence, "warm timber, big photos, a darker evening menu", and the assistant builds a first draft from it.
Editing a look. Open a look to edit it: the screen on the left, the style settings on the right, and Ask under the preview. The tabs above the preview switch between the screens the look covers, the device list shows it on a phone, a tablet, a kiosk in portrait or landscape, or a TV, and where a screen has more than one moment — the menu, an item, the cart, checkout, payment — the state buttons let you check each one. Choose one of your apps to preview with your real products, or leave it on Sample data.
Changes show straight away. Colours, fonts, corners, spacing and the size of things change on the preview as you choose them. They save as a draft as you go.
Nothing is live until you publish. Publish shows you exactly which screens will change — the ones this look is assigned to, and the ones following it as their default — and warns you first about anything that may render empty or that your look's own stylesheet overrides.
Assigning. Assign makes the look the default for every screen of a kind — every kiosk, say — or picks one screen in particular. Screens follow the published version, so an assignment shows once you publish.
History. Every change is kept. History lists every version, marks which is the current draft and which is live, lets you compare any version with what you are looking at, and restores an older one as a new draft. Nothing is ever deleted, and a restore changes nothing on screen until you publish it.
The register is styled separately. Your POS register's tiles and layout live in that app's own settings, under POS behaviour → Register look — not here.

A kiosk or menu board that is already on screen shows a newly published look after its next refresh; reload one you want to check straight away.

The style settings

The panel beside the preview lists everything about a look in the order you would decide it. The same panel is in the app builder's Design mode.

Look — which look this is, and in the builder, how the app reaches it: Just this app, Shared with other apps, or the Venue default for that kind of screen.
Colours — start from a palette made from your branding (as it is, light, tinted or dark), or press Read my logo under Match my logo to get palettes from the colours in your logo. Then fine-tune the five colours people notice: Background, Text, Brand, Buttons and Highlights. Picking a button or highlight colour also picks a readable colour for the words on it. All colours lists every colour with what it is used for. A colour marked From branding follows Settings → Branding; one you change here is Overridden, and Revert puts it back.
Fonts — eight pairings of a headings font and a body font, each shown in its own letters. Choose each font sets the two separately.
Corners and depth — Square, Soft or Round corners, and Flat or Raised tiles.
Spacing — Compact, Comfortable or Roomy, and how tightly the menu is packed.
Photos — whether products show photos, their shape (Square, Landscape, Round) and whether they sit Above or Beside the name.
Layout — a grid or a list, how big each item is, and how many columns on wide, medium and narrow screens.
Bars — which bars show: Header, Search, Section menu, Footer, and on a kiosk the Sidebar. On QR ordering and menu boards the header and footer take simple choices — your logo, your business name, a picture and a line of text — or Edit as HTML. A header or footer written by hand, or by the assistant, opens as HTML so nothing you wrote is lost. Pictures chooses the logo, header picture and background picture this look uses.
Words on screen — every fixed label customers see, such as the Add to order button or the Search box hint. Search for it, type the new wording, and leave it empty to go back to the standard words.
Advanced — tile, section and pop-up templates (below), and the look's own stylesheet, if the assistant has written one.

Click to style

With Click to style on (above the preview in the Library; always on in the builder's Design mode), point at any part of the screen to see its name, and click it. The panel shows that part at the top — Section headings, Prices, Add buttons — with the settings that change it everywhere, and This part only: colour, background, font, size, weight, letter case, corners and shadow for that part alone. If the look's stylesheet already styles the same thing, Publish tells you. Turn it off (Use the page) to tap through the screen as a customer would.

Custom tile templates

Most venues never need this: the standard tiles already follow your colours, fonts and layout. If you want to write the HTML of a tile yourself, open Advanced → Tile, section and pop-up templates at the bottom of the style settings.

Product tile replaces the inside of every product tile. The tile is still one button, so tapping it still adds the item.
Folder tile replaces the inside of every folder tile.
Section frame replaces the heading around each section's items, on QR ordering and menu boards. Put {{content}} exactly once, where the items go.
Item pop-up adds your own content to the pop-up that opens when a customer taps an item, under the item's description, on QR ordering and kiosks. If your pop-up had its own colours and fonts on the older Themes page, they now live here too and stay in place when you edit or empty this field.

Under each field, Values you can use lists what a template can show, such as {{item_name}}, {{item_price}} or {{item_image_img}} for the product picture. Type a value's name between double braces and the screen fills it in.

Click Save under a field to keep it in your draft; like every other change, customers see it only after you publish. If part of what you wrote cannot be used, the panel tells you what was removed and why, for example a picture that takes its address from a {{…}} value (use {{item_image_img}} instead), a link inside a tile, or a script. Use the standard tile (or Use the standard heading, or Use the standard pop-up) removes your template and brings back the standard design. For the item pop-up that includes any colours and fonts it carried.

If your screens use an HTML template from before the Library, it moves into these fields when your look is updated, and from then on this is where you change it. You can also ask the design assistant to write or change a template.

If you set up your look before the Library existed

Looks made the old way — from the setup wizard or the old template gallery — keep working exactly as they are until your screens are moved to the Library. That move is done for you: there is nothing you need to do, and nothing changes on screen when it happens.

Once your screens have moved:

Nothing looks different. Your kiosk, QR ordering and menu boards look the same as before. Their look now lives under Apps → Library, named after the template you started from or after the app it came from.
Restyle in the Library. Colours, fonts, spacing, tile and section styling, and headers and footers for those screens are changed in Apps → Library, or in the app builder's Design mode.
The older Themes page still has a job. It is no longer in the settings menu; the Edit → links beside an app's theme pickers still open it. It keeps your attract slides and their schedules, menu search and filters, what the item pop-up shows, card tags and any HTML templates — and it still styles the POS register.
Styling fields there are locked for customer screens. A notice at the top of the Themes page says what has moved, with an Open Library link. You can still open a theme and change anything on it, but styling changes for kiosk, QR ordering and menu boards are not saved — after saving, a message tells you how many fields were left alone. Everything else on the theme saves as usual, and a theme your register uses saves in full.
App settings follow suit. In a kiosk, QR ordering or menu app's Settings, the Theme selections tab becomes Behaviour themes: the pickers there now choose the app's attract loop, menu search and filters, item pop-up settings and HTML templates, not its colours. In the app builder, a product, section or page that your look styles says so, and its colour, text, spacing, border, picture and custom CSS settings are no longer shown there: change them in the app builder's Design mode or in Apps → Library. The settings it still keeps for itself, such as where the picture sits and its template, stay.

The lock applies only once your screens have moved to the Library. Until then — and if even one kiosk, QR ordering or menu app of yours is still on an old look — the Themes page saves everything, exactly as it always has, and none of the notices above appear.

New apps start with a look. When you create a kiosk, QR ordering, menu, attract or customer-screen app and you have no default look for that kind of screen yet, the app is given a ready-made, published look straight away. That look becomes the default for the kind only when doing so would not change a screen you already have; otherwise the new app alone gets it. Either way, creating an app never changes how your existing screens look. If you already have a default look for that kind, the new app simply follows it. Open Apps → Library to change the look, or try others on in the app builder's Design mode.

See Choosing a look with theme templates for the older themes and Building apps for Design mode.

The design assistant

Ask, the line under the preview, is an assistant that designs with you (⌘K or Ctrl+K jumps to it):

Describe what you want in plain words — "relaxed beachside cafe, sandy tones, a bit retro" — or ask for a change to what is on screen.
It edits colours, layout, wording and styling, takes a screenshot to check its own work, and can search your media library for pictures (it asks before generating a new one).
Ask for tweaks ("warmer", "more contrast", "less pink") until it's right.

Everything it does lands in the draft, so it is safe to experiment — nothing reaches a customer until you publish. After each request one line under the bar says what changed, with Undo to put the look back as it was before that request; the whole conversation is behind the button beside the bar. The assistant runs on your own OpenRouter account: until that is connected Ask says how to connect it and keeps what you typed, and everything else still works. It also tells you if the model you picked is a small one (design work goes faster on a stronger model) and pauses when your monthly AI spend cap is reached. If you ask the general assistant (Ask AI) to change how a screen looks, it doesn't restyle anything itself: it gives you a button that opens the right place to do it — that look in the Library, or the app's builder, whose Ask can change the app's content too. See Integrations.

Communications and custom CSS

On Communications, messages are grouped by purpose, with Email and SMS together. Search by name or use the channel and status filters. Edit opens the message editor: change the subject or body, insert variables at your cursor, and check the live preview. Switch between messages and channels at the top; unsaved edits are protected when you leave. Phone preview helps check narrow email layouts.

Send draft test sends the draft to the recipient you enter, without saving it. Save changes publishes the edited content for future messages. Turning auto-send on or off preserves your wording; resetting a message preserves its sending preference. Explicit sends from an order can still send a message when automatic sending is paused.

Communications — customise the wording and layout of every message customers get: receipts, order-ready alerts, scheduled-order reminders, gift cards, Payment request (sent when you send a customer a payment link) and Booking confirmation (sent once a booking is paid, or whenever you resend one from an order's page) — with an AI assistant on hand to help draft them. An Invoice template is there to style ahead of time too, ready for when invoicing goes live.
Custom CSS — for the pixel-perfectionists: add your own styling for customer surfaces. If you don't know what CSS is, you'll never need this tab.

Tips

Check contrast: light text on light backgrounds reads badly on sunlit kiosks. The preview pane is your friend.
Keep your logo file reasonably small and on a transparent background for the cleanest result.
After changing branding, glance at a live kiosk and a test receipt — see Kiosk setup. The Library's preview shows the whole screen, bars included, so what you see is what the queue sees.