Welcome Screen & Store Colour
Colour Setup
Store Primary Colour
- Based on the store’s logo or provided branding documents, select the colour that best represents the store. This will be the primary colour used for the Kiosk experience.
- Run an accessibility check on the chosen Primary colour to determine whether Cinchio_black (
#1A1A1A) or Cinchio_white (#FFFFFF) will be the Primary Font Colour used alongside the Primary Colour.
Primary Colour Palette
- Once the Primary Colour for a store is chosen and handed off to development, Dev passes all the values from the server to the app. All of the shades and associated font colours for each shade are passed through.
Accessibility
- We are aiming for a contrast ratio that meets the AA level of WCAG.
- WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text in contrast to the background.
Kiosk Assets
The following assets are required regardless of Welcome Screen config.
Header Logo (SVG)
- Asset size: 704 x 424px (< 300 KB)
- Ensure the logos take up the entire width or height of the bounds, depending on the orientation of the logo.
- Consider accessibility and legibility as the Header logo sits on a white surface.
Header Background (PNG)
- Horizontal asset size: 1920 x 112px (< 400 KB)
- Vertical asset size: 1080 x 112px (< 200 KB)
- Please use textures or patterns from the store branding/marketing materials that complement the experience.
- If a texture or pattern cannot be provided for the header, fall back to using the Primary Colour chosen for the store as a solid fill.
- Do not include any text-based graphics or branding in this area.
Asset Specs • Component Welcome Screen
Displays on the Kiosk during idle time before guest interaction.
Welcome Screen Logo (SVG)
- Asset size: 704 x 424px (< 300 KB)
- Ensure the logos take up the entire width or height of the bounds, depending on the orientation of the logo.
- Welcome Screen logo can differ from the Header Logo, but does not always have to be a separate treatment.
- Consider accessibility and legibility as the Welcome Screen logo sits on top of a Primary Colour gradient.
Welcome Screen Carousel Image(s) (PNG)
- Horizontal asset size: 1920 x 1080px (< 300 KB)
- Vertical asset size: 1080 x 1920px (< 300 KB)
- Provide 1–3 images of the food offered at the store based on their current menu.
- Place the subject in the right 2/3 of the view for horizontal & the bottom half for vertical.
Template
- All artboards are set up at the proper size — no size adjustments should be needed.
- Assets should be exported @1x and are labelled with their required file type.
Asset Specs • Single Image Welcome Screen
Displays on the Kiosk during idle time before guest interaction.
Carousel Image(s) (PNG)
- Horizontal asset size: 1920 x 1080px (< 300 KB)
- Vertical asset size: 1080 x 1920px (< 300 KB)
- Provide 1–3 images.
Type (minimum font size in flattened image)
- Bold weight: 14pts minimum
- Regular weight: 18pts minimum
Action Based Copy
Suggestions:
- “Tap to start”
- “Tap to order”
- “Order here — tap to begin!”
Colour Contrast Ratio
- To meet WCAG AA requirements, the contrast ratio of text over an image/background on the Kiosk must be at least 3:1.
Experience Examples
Single image welcome screen
| Horizontal | Vertical |
|---|---|
Component welcome screen
| Horizontal | Vertical |
|---|---|
Menu
| Horizontal | Vertical |
|---|---|