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 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)
General 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:
- Plus and minus buttons for adding items to the cart
- Active tabs
- Filter pills
- Active tab icons
- Cursor
- Links
- Tags
- 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:
- The progress bar on the Loyalty card with a dark background
- User location
- Selected subcategory in the single page layout menu
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:
- Background Front
- Background Back
States colors
Success color
Success color is used to indicate success in an action or availability:
- Order with app tag
- Snackbar
- Status screen
Error color (action status)
Error color is used to indicate errors or an unsuccessful action:
- Error state of input field with hint
- Error state for modifiers
- Status screen for canceled order
Info color
Info color is used for showing additional neutral info to the user. This color should have enough contrast so white text can be readable:
- Info snackbar
- Tag
- Condition info
Info pill color
Used for the pill snackbar messages. This color should have enough contrast so the white text can be readable.
Processing and processed colors
These colors are used for creating gradients that represent the status of the current action. They should have enough contrast so the white text can be readable:
- Status screen background gradient
- Status bar background gradient
- Loading state of the button
Icon colors
Icon Active color
Icon active color is put on all icons that are used to trigger some action:
- Profile icons
- Back and Close icons
- Reward & Offers icon
- Info icon
- Clear button on active input fields
Icon Idle color
Icon idle color is applied on icons that are used for guidance or inactive/idle state. We recommend setting up a darker gray color for those icons as we have icons that will use 100% of that color and icons that use 70 % of the color:
- Clear button on inactive input fields (70% opacity)
- Empty checkmarks (70% opacity)
- Disclosure arrows (70% opacity)
- Show/hide password button on inactive password field (70% opacity)
- Dropdown arrow (100% opacity)
- Inactive order type icons (100% opacity)
- Inactive tab bar icons (100% opacity)
- Icons in filters (100% opacity)
- Loyalty points disclosure (100% opacity)
Icon Disabled color
Applied on the icon base that represents the disabled state. Recommended color: light gray:
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.
- Activated input line (100% opacity)
- Pasive input line (20% opacity)
- Divider line (6% opacity)
- Button line (15% opacity)
- Tab line (10% opacity)
Counter colors
Counter colors are used for the item counter background. This color should have enough contrast so white text can be readable:
- Item counter
- Disabled item counter
Additional Colors
Alcohol color
Used to color the icon that represents an alcohol item:
Vegeterian and vegan color
Vegeterian color is used for icons that represent vegeterian and vegan food:
- Vegeterian
- Vegan
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:
- Different background colors
Icon Launcher background color
This color is Android-specific. Choose background color for the Icon Launcher:
- Icon launcher background
Comments
0 comments
Please sign in to leave a comment.