Mobile: Colors

Context

The first step in the process of defining a visual style of a Mobile White Label Application is choosing the right colors.

Some colors are affect the look of the Mobile App more than others so we suggest you give it a thought.

Please note: All colors should be provided in hex color code format e.g (#ff6600)

Global colors

Primary color

The primary color is used to highlight an important part of the interface. Main brand color is most commonly used for that. This color should contrast enough with everything else, so that the text elements in that color can be easily readable. We are using this color for the following elements in the Mobile App:

1. Plus and minus buttons for adding items to the cart
2. Checkmarks
3. Active tabs
4. Filter pills
5. Active tab icons
6. Cursor
7. Links
8. Tags
9. Selected filters, etc…

Secondary color

The secondary color is used to highlight additional details of the interface. This color also should  contrast just enough with the rest of your app layout, so the white text placed on that color can be easily readable. You can use this color for creating gradients that represent the status of the current action:

1. The progress bar on the Loyalty card with a dark background
2. User location
3. Status screen background gradient in combination with Primary color
4. Status bar background gradient in combination with Primary color
5. Loader on buttons in combination with Primary color

Background color

The background color is used across the whole Mobile App. Background Back is the main background color and the Background Front color is used on elements that sit above the main plane - like modals and cards. On some screens, the entire background is made from the Background Front color:

1. Background Front
2. Background Back

Success color (action status)

Success color is used to indicate success in an action or availability:

1. Order with app tag
2. Snackbar
3. Status screen

Error color (action status)

Error color is used to indicate errors or an unsuccessful action:

1. Error state of input field with hint
2. Error state for modifiers
3. Status screen for canceled order

Disabled color (action status)

Disabled color is used to indicate disabled elements and actions:

1. Counter for unavailable item
2. Disabled button
3. Disabled icon

Icon Idle color

Icon idle color is applied on icons that are used for guidance or inactive/idle state:

1. Clear button on inactive input fields
2. Empty checkmarks
3. Disclosure arrows
4. Show/hide password button on inactive password field

Icon Active color

Icon active color is put on all icons that are used to trigger some action:

1. Profile icons
2. Back and Close icons
3. Reward & Offers icon
4. Info icon
5. Clear button on active input fields

Large icon background

Large icon background color is used on all large active icons:

1. Order types icons
2. Configure icons

Line

Line color is used for every line throughout the system. All the line colors are made by reducing a particular color's opacity. So that is why line color must be really dark. Then, even as little as 6% of opacity can be visible.

1. Activated input line (100% opacity)
2. Pasive input line (20% opacity)
3. Divider line (6% opacity)
4. Button line (15% opacity)
5. Tab line (10% opacity)

Vegeterian color

Vegeterian color is used for icons that represent vegeterian and vegan food:

1. Vegeterian
2. Vegan

Headings color

Our advice: be extra careful when choosing text colors. That color should have enough contrast with the background to be readable and satisfy accessibility standards. For Heading colors, we recommend using the same color as in the rest of the app - black, but you can choose other - just remember to keep it visible enough:

1. Large heading
2. Heading

Body color

Same advice here - keep in mind that it should be readable and accessible for all. Additionally, for body text you should choose a really dark color, preferably black because all other shades of text colors are made from that darkest color. So, for example, placeholder for the input field is only 20% of the body text color:

1. Body color 100%
2. Body color 80%
3. Body color 60%
4. Body color 20%

Primary button and text color

Primary buttons are used for a primary action on the screen. Primary buttons are created from two colors: primary button background color and primary button text color. Create a combination in that way so the text is readable on the background:

1. Primary button background color
2. Primary button text color

Secondary button and text color

Secondary buttons are used for secondary action on the screen. Secondary buttons are created from two colors as well: secondary button background color and secondary button text color. This combination should also be easily readable:

1. Secondary button background color
2. Secondary button text color

Additional Colors

Status Info color

Status info color is used for showing additional neutral info to the user. This color should have enough contrast so white text can be readable:

1. Info snackbar
2. Tag
3. Condition info

Icon Idle Dark color

Icon idle dark color is applied on icons that are used for secondary actions on the page. They are a different category than secondary button and text color:

1. Dropdown arrow
2. Inactive order type icons
3. Inactive tab bar icons
4. Icons in filters
5. Loyalty points disclosure

Counter color

Counter color is used for the item counter background. This color should have enough contrast so white text can be readable:

1. Item counter

Splash Screen background color

Splash Screen background color is used as a background for the splash screen where we are showing mostly the logo of the brand:

1. Different background colors

Icon Launcher background color

This color is Android-specific. Choose background color for the Icon Launcher:

1. Icon launcher background