Digital Order Management
Branding Information
Colours, image sizes and templates for branding your mobile and kiosk ordering.
Can't find what you need? Contact Cinchio:
Good branding makes digital ordering feel like part of your store. Use these specs when preparing your store's colour, logos and images, so they look sharp and are easy to read on every screen.
Uploading your assets
Once they're ready, add them in Location Setup, under Branding & Assets.
Mobile
Mobile ordering uses your store's primary colour and a header image.
Colour setup
1
Choose the primary colour
Based on the store's logo or branding documents, choose the colour that best represents the store. This is the main colour used across the ordering experience.
2
Check the font colour
Run the primary colour through a WCAG contrast checker to decide whether Cinchio black (#1A1A1A) or Cinchio white (#FFFFFF) is used as the font colour on top of it.
Once the primary colour is handed over, every shade of it, and the font colour for each shade, is set up for you.
Accessibility
Aim for a contrast ratio that meets WCAG 2.0 level AA: at least 4.5:1 for normal text, and 3:1 for large text, against the background.
Header image
The same image is used in both places it appears.
JPEG
1800 x 1200px, under 2.2 MB
Use the store's logo, not the site's, and show one store at a time.
Make the logo fill the full width or height of the area, depending on its shape.
The image sits on a white background, so check it's easy to read.
Template
Download the mobile header template
Example
Kiosk
The kiosk uses your store's primary colour, a header, and a welcome screen shown while the kiosk is idle.
Colour setup
1
Choose the primary colour
Based on the store's logo or branding documents, choose the colour that best represents the store. This is the main colour used across the ordering experience.
2
Check the font colour
Run the primary colour through a WCAG contrast checker to decide whether Cinchio black (#1A1A1A) or Cinchio white (#FFFFFF) is used as the font colour on top of it.
Once the primary colour is handed over, every shade of it, and the font colour for each shade, is set up for you.
Accessibility
Aim for a contrast ratio that meets WCAG 2.0 level AA: at least 4.5:1 for normal text, and 3:1 for large text, against the background.
Header assets
Needed whichever welcome screen you use.
Header logo (SVG)
704 x 424px, under 300 KB. Make the logo fill the full width or height of the area. It sits on white, so check it's easy to read.
Header background (PNG)
Horizontal 1920 x 112px (under 400 KB), vertical 1080 x 112px (under 200 KB). Use a texture or pattern from the store's branding, or a solid fill of the primary colour. No text or logos.
Welcome screen
Choose a welcome screen type in Location Setup, then supply the assets it needs.
Which welcome screen type?
Component
Shows your logo and up to three images on the welcome screen.
Welcome screen logo (SVG)
704 x 424px, under 300 KB
Make the logo fill the full width or height of the area, depending on its shape.
It can be different from the header logo, but doesn't have to be.
The logo sits on a gradient of your primary colour, so check it's easy to read.
Carousel images (PNG)
1920 x 1080px, under 300 KB
1080 x 1920px, under 300 KB
1 to 3 images of food from the store's current menu.
Put the subject in the right two thirds of a horizontal image, or the bottom half of a vertical one.
Template
Single image
Shows up to three full-screen images, with any text built into them.
Carousel images (PNG)
1920 x 1080px, under 300 KB
1080 x 1920px, under 300 KB
1 to 3 images.
Text in the image
At least 14pt.
At least 18pt.
Prompt text
Tell customers what to do. For example:
- Tap to start
- Tap to order
- Order here, tap to begin!
Examples
Which example?
Single image welcome screen
Horizontal
Vertical
Component welcome screen
Horizontal
Vertical
Menu
Horizontal
Vertical
Resources