Skip to main content

Kiosk Color Code Guide

Isabella Scharff
Updated

How to Find Color Code Options

  1. Log in to the company (must be done on the company level)
  2. Select ‘Locations’ on the left sidebar menu
  3. Select ‘Locations’ from the dropdown list
    • Here you will see a list of locations with their corresponding logos, contact numbers, and login information
  4. Find the location you are looking for
  5. Select the 'Color Code' icon under the 'Action' column (dropper on an orange background)

Color Code Fields

The Color Code settings screen offers you a variety of fields that you can edit to make your kiosk align more closely with your brand. While there are lots of different ways the kiosk will incorporate these colors, here are a few of the most important: 

  • The Primary Color will affect your headers, checkout button, and highlighted items
  • The Secondary Color will affect the appearance of item names on the footer of your kiosk screen
  • The Accent Color will affect the color of Item Names on your menu
  • The Positive Button Color determines the color of buttons used for accepting/agreeing to options at the kiosk
  • The Negative Button color determines the color of buttons used for refusing/canceling options at the kiosk. 

Color Settings to Avoid

There are a number of color configurations that will not work on the kiosk as they will result in certain text or buttons being hidden.

  • None of the following colors can be set as white:
    • Primary Color
    • Secondary Color
    • Accent Color
    • Text Color
    • Positive Button Color
    • Negative Button Text Color
  • None of the following colors can be set as black:
    • Category Background Color
    • Footer Order Summary Background Color
  • The following sets of colors cannot be the same as each other:
    • Primary Color and Positive Button Color
    • Category Background Color and Accent Color
    • Category Background Color and Text Color
    • Footer Order Summary Background Color and Text Color
    • Footer Order Summary Background Color and Secondary Color
    • Positive Button Color and Positive Button Text Color
    • Negative Button Color and Negative Button Text Color

Settings Applied

The kiosk in this animation has been configured using the color code from the example above:

Related articles