Skip to main content

Web Design: Colors

Written by Joyce D.

Overview

The color settings in the Admin dashboard enable easy customization of color types (basic and other), as well as setting the dark mode for the website. Let's dive in to understand what each of these color options does and how to set them up.

Configure color customization

IMPORTANT NOTE: All colors must be entered as a hex code, a six-digit code used to represent a specific color in digital design (e.g., White - #FFFFFF). All color fields are mandatory and must be set before the launch.

To set up the customizable color palette for the ordering website, we must be logged in to the Admin dashboard. Follow the steps below to set the available options:

Step 1: Select Design> Web from the left sidebar and then select Colors. Ensure you are viewing the Basic colors tab

Step 2: Enter the hex codes for

  • Primary color: the main color used throughout your online ordering site by the following elements, which can't be changed individually:

Global:

  • CTAs

  • Toggles

  • Back Button Text

  • Radio Buttons (selected state)

  • Text Fields Outline (selected state)

Locations:

  • View Hours

Menu:

  • Date/Time Drop Down (selected state)

  • Service Type Header

  • Category Names (selected state)

Item Details Drawer

  • Required/Optional text

  • Modifier Selection (selected state)

  • Footer

Empty Cart

  • Icon

Cart

  • Edit/Remove text

Profile

  • Category Names (selected & hover state)

  • Log Out

  • Change Password

  • Delete Account

  • Add New Address

  • Delete

  • Add New Payment Method

  • Order History Details (CTA outline)

Post Checkout

  • Header

  • Order Tracker Progress Bar

  • Receipt Download Text

  • Primary Text color: the main color used throughout text on the online ordering site, and is present on any element where the background is 'Primary Color.' It can not be changed individually, and it refers to the global objects:

    • CTA Text

    • Toggle Text

    • Service Type Header

  • Background Color: the color that fills the entire screen behind all other elements and content on the website. The Background Color cannot be changed for individual pages.

  • Passive Color: the color used for non-interactive elements of the site and is present in the following throughout your online ordering site by the following elements. The following elements cannot be changed individually:

Global:

  • Loading Animation

Menu

  • Category Name (unselected state)

Locations:

  • Phone Number

  • Pickup Time: Est

  • Location Address (map view)

Item Details Drawer:

  • Quantity Requirement

  • Modifier Price

  • Order Note Character Count

Empty Cart:

  • Text: “There are no items in your cart right now. Add items to get started.”

Cart:

  • Location Address

  • Modifiers List

  • Gray Color is the color of elements layered underneath Primary Color elements and on top of Background Color, and is present in the following throughout your online ordering site by the following elements. The following elements cannot be changed individually:

    • Global:

      • Toggle Background

      • Hover States

    • Cart:

      • Promos and Rewards field background

  • Green Color is the color that is used to denote that a Location is Open. Green Color is present only on the Locations screen for the text “Open Now”.

  • Enable Dark Mode (BETA) is the toggle that enables the application of the dark theme to the ordering website. It requires setting the background color to a dark color, updating the logo and icons to make this feature work, and the website is ADA-compliant.

Step 3: Select the Save button

Others tab

Within this section of the Colors option, we can set the color palette for the Rewards page section of the ordering website.

Step 1: Select Design> Web from the left sidebar and then select Colors. Ensure you are viewing the Others colors tab

Step 2: Here, we can set colors for:

  • Success Surface Color - the color of the "Applied" pill

  • Success Text Color - the color of description text; applied only if ADA compliant.

  • Success Border Color - the color of the border around the applied reward

  • Additionally, we can activate the Apply to Mobile toggle to apply the same setting to the mobile app reward section.

Step 3: To save our settings, select the Save button

Related Articles
Mobile App Design: Colors
Web Design: Display Options
Web Design: Empty Cart
Web Design: Fonts
Web Design: Rewards Page
Did this answer your question?