Skip to main content
Web Design: Colors
Jeiah Isles avatar
Written by Jeiah Isles
Updated over a year ago

Colors

All Colors must be inputted as a hex code, a six-digit code used to represent a specific color in digital design (eg. White - #FFFFFF)

*All fields are required


Table of Contents

How to Change Colors

  1. Click on Design

Click on Design
  1. Click on Web

Click on Web
  1. Click on Colors

Click on Colors
  1. Input 6 digit hex code

Paste input
  1. Click on Save

Click on Save

You have now successfully updated Primary Color!

Primary Color

  • Primary Color is the main color used throughout your online ordering site by the following elements. note: the below elements cannot 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

Examples of Primary Color Elements (ex. Pink - #FF69B4)

Primary Text Color

Primary Text Color is the main color used throughout text and is present in the following throughout your online ordering site by the following elements. note: the below elements cannot be changed individually:

  • Global:

    • CTA Text

    • Toggle Text

    • Service Type Header

Examples of Primary Text Elements (ex. Yellow - #FEEE00)

Background Color

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

Passive Color

Passive Color is 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. note: the below elements cannot be changed individually:

  • Global:

    • Loading Animation

  • Locations:

    • Phone Number

    • Pickup Time: Est

    • Location Address (map view)

  • Menu

    • Category Name (unselected state)

  • 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

Examples of Passive Color Elements (ex. Gray - #efefef)

(coming soon)

Gray Color

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. note: the below elements cannot be changed individually:

  • Global:

    • Toggle Background

    • Hover States

  • Cart:

    • Promos and Rewards Background

Examples of Gray Color Elements (ex. Gray - #efefef)

Green Color

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

Example of Green Color Elements (ex. Green - #17873e)

Did this answer your question?