Mobile App Design: Colors
Updated over a week ago

Colors allow for customization of the colors of various elements throughout the app. All values can be live updated.

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

Color Type

Lunchbox is able to support 2 different modes of colors:

  • Basic: If the restaurant does not require any complex branding, use Basic mode so that way you can set 3 colors, and the app will automatically decide how to apply those colors for you.

  • Advanced: When the restaurant wants to get more customized with their branding, they can set all the text and background colors for each type of "surface" (explained more below).


  • Accent Color: This color is used for when text needs a brand color, except on the selected tab bar icon / text. However, if the contrast is not high enough between the Primary Color and the bottom nav background color, then Accent Color will be used for the select tab icon / text.

  • Primary Color: This is the color used for various interactive elements throughout the app that need a brand color. In addition, it is used on the selected tab bar icons / text (unless the contrast is not high enough, then Accent Color will be used).

  • Background Color: Is the background color used throughout the application. Default is white, which should work for most clients. This is the background color that is used for the top and bottom navs, as well as all the main content on screen. In addition, when setting the Background Color this also controls the "card" background color (seen below), which will be set to automatically be 15% darker or lighter than the background color (depending on contrast, if the background color is a dark or light color.


If the restaurant you are working with is looking for more advanced branding, then Advanced is the way to go. We have a screenshot below that shows example of each type of surface all in 1 page. Here below is also a description for each type of surface:

  • Default: This is the the surface that roughly 75% of the application uses. This is the surface where all the main content of the app is displayed.

  • Top Navigation: The navigation located at the top of the page, containing typically the restaurant's logo, sometimes a title for the page, and if applicable some call to actions (ie. "Log In").

  • Bottom Navigation: The navigation located on the bottom of the page, containing the tabs that are used to switch the guest back and forth between Home, Account, Order, etc.

  • Card: This is appropriately named card, because it is the surface that looks like a card and is typically always displayed laying on top of the Default surface.

  • Brand: Used for any time content is being displayed using the restaurant's brand color as the background color.

  • Footer:

Inside each surface, you will find the following values:

  • Background Color: The color which be used on the background of the surface.

  • Text Color: The main text color used on the surface.

  • Text Subdued Color: The text color used if there is a need to a description, subtitle, etc. Helps distinguish from the main Text Color.

  • Accent Color: Used if there is a need to have the brand's color in text on a surface. This color is most used for "hyperlink" looking text used throughout the app (ie. Forgot Password, Log Out, etc).

  • Separator Color: Used for when there are borders around the surface (ie. For the card surface), or if there are dividing lines on or surrounding the surface.

The screenshot below gives examples for where you would see each Surface, and the most used colors for each of the surfaces.

Did this answer your question?