# Applying the brand

Use the same recognisable identity across the website, venue management screens, help articles and emails. Adapt the layout to the task while keeping the symbol, naming, colours and voice consistent.

## Across the product

| Where | Brand guidance |
| --- | --- |
| Website header and footer | Use the burger symbol and RoundTab wordmark with clear space and a readable size |
| Website pages | Use warm paper backgrounds, dark readable text, gold emphasis and clear headings |
| Venue management screens | Keep information easy to scan and actions easy to distinguish in both light and dark appearances |
| Browser tabs and phone shortcuts | Use the symbol on its own, with enough contrast to remain recognisable at small sizes |
| Buttons, menus and forms | Use short, specific labels and clear selected, unavailable, loading and error states |
| Help articles | Give precise steps, use the labels people see on screen and make the next action clear |
| Emails | Use consistent naming, readable layouts and a clear reason for the message |

## Adapt to the task

A marketing page, an order screen and an email serve different purposes. Use generous imagery and expressive headings in marketing. Keep working screens compact, legible and focused on the task. Keep emails simple enough to read on a phone.

Use darker gold where small text or controls need stronger contrast. Pair bright gold backgrounds with dark text. Preserve distinct error, warning and success colours; brand styling must not obscure their meaning.

## Clear interactions

- Make buttons large enough to press comfortably on a phone.
- Give each action a specific label, such as “Save changes” rather than “Submit”.
- Keep keyboard selection visible.
- Explain errors in text and show how to correct them.
- Show when an action is loading or unavailable.
- Keep order and payment status labels precise and consistent.
- Check readability in light and dark appearances and on small screens.

## Buttons and actions

| Type of action | Treatment | Example |
| --- | --- | --- |
| Main action | A filled button with a clear, specific label | Save changes |
| Secondary action | An outlined button that does not compete with the main action | Cancel or Back |
| Small supporting action | A simple icon or low-emphasis control with an accessible name | Edit a row |
| Destructive action | A distinct warning treatment and clear confirmation where needed | Delete an item |

Group related actions together. Keep the main action easy to find on long forms without covering the content below it.

## Forms and settings

Keep a visible label beside every field. Use placeholder text for a format hint, never as the only label. Put an error beside the affected field and explain how to correct it.

Use a switch for a simple on/off setting and give it a clear description. Use a selection list when someone must choose between several options. Labels should describe the choice rather than its technical implementation.

## Lists, cards and empty screens

Use a clear page heading, with the main action near it. Put filters before the results they affect. Keep table headings descriptive, related row actions together and long text readable on a phone.

Group related information in cards with a heading, a short explanation when useful and a clear content area. Use small status labels for concise state information, with words as well as colour.

When there is nothing to show, say so plainly and offer a useful next step. For example: “No products yet. Add your first product to start building your menu.” Avoid making an empty screen look like an error.

## Icons

Use simple, consistent line icons for navigation and actions. Pair unfamiliar icons with visible words. Every icon-only action needs an accessible name that describes its purpose. Decorative icons should not repeat information to a screen reader.

Use the burger symbol for brand identity, not as a substitute for every interface icon. Keep a consistent stroke weight and visual size within a group.

## Light and dark appearance

Use comfortable backgrounds, readable text and clearly separated controls in both appearances. Gold may be darker in light mode and lighter in dark mode to preserve contrast. Let people follow their device setting or choose their preferred appearance.

## Motion

Use brief, restrained movement to acknowledge an action or introduce an illustration. Hover effects should be subtle and should not move nearby content. Keep decorative movement finite rather than constantly looping. Respect reduced-motion preferences and keep all essential information available without animation.

## Error and recovery messages

Explain the problem in plain language and offer a useful route back. For example: “Page not found” with “Back to Home” and “Get Help”. A small hospitality reference can add warmth, but it must not obscure the error or make a serious problem feel dismissive.

Use the same calm, helpful approach across website, venue management and staff screens. Preserve any important payment or order warning rather than replacing it with a generic brand message.

## Typography across channels

Use Inter for new brand materials. Keep the supplied logo lettering as artwork. Existing website system fonts and email fallbacks can remain until their own updates are planned; they do not change the typeface used in brand templates.