Brand Theming for Online Ordering

Your online ordering view is an extension of your brand. With Vendion's brand theming you can match colors, fonts, logo, and light/dark mode so the guest experience feels like your restaurant – not a generic ordering app.

Where is the brand theme used?

Your settings apply to:

• Ordering page – the guest's chat view for QR ordering
• Widget embedding – iframes on your own website
• Express kiosk – self-service device at the restaurant
• Digital receipts – the receipt link the guest receives

Note: Brand theming only applies to guest surfaces. Admin pages and POS use Vendion's standard theme – it's a deliberate design rule.

Settings that can be customized

1. Primary color

• Used for buttons, active states, and accents
• Choose from your preset palette or enter hex value
• Should have good contrast against both light and dark backgrounds

2. Theme (light/dark)

• Light – white background, dark text (best for café, bakery, healthy food)
• Dark – dark gray background, white text (best for fine dining, bar, nightclub)

3. Font

Choose among supported fonts:

• System – uses device default font (fastest loading)
• Inter – modern sans-serif (neutral, readable)
• DM Sans – geometric sans-serif (modern, trendy)
• Playfair – classic serif with contrast (elegant, fine dining)
• Cormorant – Italian-inspired serif (sophisticated)

4. Logo

• Upload as PNG or SVG
• Transparent background recommended
• Shown in chat header, cart, and receipt
• Optimal size: 512×512 px

How to configure

1. Go to Admin → Settings → Brand
2. Under the section Online Order / Guest page:
   • Click Choose primary color and pick or enter hex
   • Choose Theme: Light or Dark
   • Choose Font from dropdown
   • Click Upload logo to change image
3. Click Save
4. Open your ordering link in a new tab to test

Changes take effect immediately – no restart required.

Best practices

Color choice

• Test contrast – use a WCAG checker to ensure readability
• One accent color beats three – too much color confuses the guest
• Match the menu – if your physical menu is dark blue, use dark blue primary color

Light vs dark

• Light theme works best for:
  • Café, bakery, lunch
  • Restaurants that want to feel fresh and open
• Dark theme works best for:
  • Fine dining, cocktail bars
  • Evening restaurants, nightclubs
  • Restaurants with ambient lighting

Font

• Serifs (Playfair, Cormorant) signal elegance and quality
• Sans-serifs (Inter, DM Sans) signal modernity and efficiency
• System font loads fastest but can feel impersonal

Logo

• Horizontal logo works best for chat header
• Always use transparent background to match the theme
• Avoid text-heavy logos – they become hard to read in small size

Widget embedding and brand

When you embed Online Order via widget iframe on your own website, it inherits your brand settings automatically. No extra configuration needed.

Future additions

On the roadmap:

• Custom Google fonts beyond the four supported
• Animation settings (on/off for motion-sensitive users)
• Welcome image (hero image at chat start)
• Custom CTA texts on buttons