Lunchbox

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)

___________________________________________________________

<a href="#WebDesign:Colors-Colors">Colors</a>

- <a href="#WebDesign:Colors-HowtoChangeColors">How to Change Colors</a>

- <a href="#WebDesign:Colors-Colors">Colors</a>
 
 - <a href="#WebDesign:Colors-HowtoChangeColors">How to Change Colors</a>

Go to <a href="https://dashboard.lunchbox.io/design/web" rel="nofollow noopener noreferrer" target="_blank">https://dashboard.lunchbox.io</a>

You have now successfully updated 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 &amp; 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 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 &amp; 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)

<a href="https://sharing.clickup.com/clip/p/t9010016731/e2390d19-1c1f-45e1-abe1-d1f5f3c5299a/Lunchbox%20-%20Online%20Order%20-%2015%20June%202023.mp4?open=true" rel="nofollow noopener noreferrer" target="_blank">https://sharing.clickup.com/clip/p/t9010016731/e2390d19-1c1f-45e1-abe1-d1f5f3c5299a/Lunchbox%20-%20Online%20Order%20-%2015%20June%202023.mp4?open=true</a>

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:

- CTA Text
- Toggle Text
- Service Type Header

- Global:
   
  - CTA Text
  - Toggle Text
  - Service Type Header

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

<a href="https://sharing.clickup.com/clip/p/t9010016731/613e938e-cea8-44b7-81fa-345496534edf/Lunchbox%20-%20Online%20Order%20-%2015%20June%202023%20(1).mp4?open=true" rel="nofollow noopener noreferrer" target="_blank">https://sharing.clickup.com/clip/p/t9010016731/613e938e-cea8-44b7-81fa-345496534edf/Lunchbox%20-%20Online%20Order%20-%2015%20June%202023%20(1).mp4?open=true</a>

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 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:

- Phone Number
- Pickup Time: Est
- Location Address (map view)

- Quantity Requirement
- Modifier Price
- Order Note Character Count

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

- 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)

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 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”.