STORE SET-UP
This section outlines the baseline asset and styling requirements which are needed to transform the default Vita Mojo ordering platform into your company’s brand.
STORE SET-UP
LOGOS
The logo is used to place your brand in the menu header, browser tab favicon and all customer emails.

Requirements
- Image formats: .PNG or .JPG
- Vector formats such as .SVG, .EPS and .AI can also be supplied
- Image dimensions: 300px by 300px minimum
- Logos can be any ratio such as a square or rectangle
- Favicon can only be a square
- Trim all of the empty space so the image only contains the logo
Colours
The primary brand colour is used to highlight call-to-action buttons and selection states. Your brand palette can also be provided to help with colour accents across the website.

Requirements
Sandwich Sandwich brand web colours:
- DARK GREEN: #0633244
- MID GREEN: #043F2C
- MID GREEN: #00573C
- YELLOW: #FFC535
- CREAM: #FFFAE5
- GOLD: #bb9847
- BLACK: #231F20
- GREY: #7F7F7F4
Backgrounds
Backgrounds are used to enhance your brand presence throughout the ordering journey.

Backgrounds
The backgrounds can either be:
- Solid colour
- Colour formats: HEX (#FFFFFF) or RGB (255, 255, 255)
- Image
- Image format: .PNG or .JPG
- Image dimensions: 2880px by 1620px
- Image size: 1MB maximum
Some background dimensions are channel-specific and require different dimensions depending on the devices. Refer to Mobile OPAT or Kiosk Splash Screen if channels are enabled.
Category Images
The category page is what customers will land on to see an overview of all of the menu categories. There is an option to control what size tile each category is and it is recommended to have full rows. Images here have all of the freedom to brand as long as the category name is still visible.

Requirements
- Image formats: .PNG or .JPG
- Image dimensions
- Single tile: 916px by 916px
- Double tile: 1932px by 916px
- Image size: 1MB maximum
- Name to reflect the corresponding category in management panels
Menu Images
Your menu is a visual-first experience which helps customers to make decisions on what to eat, so it’s advised to supply high-quality and consistent images for each menu item. Ensure that the food is in the centre of the image area for best practice. Below is a visual guide on how different aggregators will crop the images provided.

Requirements
- Image formats: .PNG or .JPG
- Image dimensions: 1920px by 1080px
- Image size: 1MB recommended (they may be slightly larger than this size but will slow down loading for customers)
- Name to reflect the corresponding meal in Management Panels
Padding on Vita Mojo 1:1 Tiles
- Ensure there is about 420px width padding on the left and right of the image contents so that it appears correct on square menu tiles.
- The middle of the image is positioned in the middle (left to right) of the menu tile
- Then the image will always scale to fit/fill the 1080px height of the square menu tile
- Width scales proportionally

Delivery Aggregator Requirements
Some platforms cannot support certain types of image compression or formatting. If images appear on the Vita Mojo platform, but are not appearing on a delivery platform, please see the following steps.
- Save the image with no chroma subsampling. This option will be dependent on the software package used to export images.
- Photoshop doesn’t display subsampling ratio but for jpeg should be 90 – 100 quality
- GIMP advanced options should be set to 4:4:4 subsampling
Convert to WEBP
- You can convert to WEBP format, which offers better compression and smaller file sizes.
Convert to PNG
- PNG avoids subsampling issues but can result in larger files.
Resize the Image
- If file size or dimensions exceed the limit, resize the image.
- Maintain the aspect ratio and adjust resolution to meet size and dimension constraints.
Typography
We use the 2 following fonts:
Requirements
- Font formats: .TTF and .WOFF
- Font weights: Light, Regular, Medium, Bold
- Optional: We can also add secondary fonts which will be used on all headers and titles