Context

One of the most important things when branding is choosing the right colors. Some colors can affect the look of the Web App more than others. So, some of the colors like luma, info and icon can stay in their default value. The colors we recommend you to change are primary and button primary, secondary and tertiary.

Please note: it's a requirement that all colors should be provided in hex color code format e.g (#ff6600)

General colors

Primary

This is the main color of the brand. It is displayed as the most prominent color across the app, used to highlight important actions and events that the User can select as well as elements of importance that should be highlighted. This color should have enough contrast so the text elements in that color can be easily readable. We are using this color for the following elements in the Web App:

1. Links
2. Active quantity button
3. Checkmarks
4. Language selector
5. Toggle buttons

White

A pure white color is used as a bulletproof property for elements where Brand colors are not appropriate. The white color in the interface can be replaced by other shades of white. When choosing another white color, it’s important to keep the new color light to show enough contrast with the background elements. We recommend not to change this color. We are using this color for the following elements in the web app:

1. Checkmark icon in checkmark component
2. Number in the counter
3. Text inside tooltip

Black

A pure black color used as a bulletproof property for elements where brand colors are not appropriate.

The black color in the interface can be replaced by other shades of black. When choosing another black color, it’s important to keep the new color dark to show sufficient contrast with the background elements. We recommend not to change this color. We are using this color for the following elements in the web app:

1. Tooltip background

Background colors

The background color is used across the whole website. Background Back is the main background color, and 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. Additionally, the footer color is used for your website’s footer’s background:

1. Front background color
2. Back background color
3. Footer background color

State colors

State colors are used across to show either success or failure states in your web app. They are typically red and green respectively but can be changed to an alternative color.

1. Error color

1. Success color

Icon colors

The Icon idle color is applied on icons that are used for guidance or that are on inactive/idle state whereas the Icon active color is used on all icons that are used to trigger an action. 

1. Icon active color
2. Icon idle color

Miscellaneous colors

The miscellaneous colors serve as supporting colors for different elements in your Brand. 

Vegetarian

The vegetarian color is used for icons that represent vegetarian and vegan food:

Luma

This one affects some background areas or surfaces of interactive components and their states. All the luma colors are made from this color by reducing its opacity. So that is why luma color must be really dark color so even 6% of opacity can be visible. We recommend not to change this color.

1. Background of upselling section (10%)
   
2. Hovers in Offers and Rewards (20% and 10%)
   
3. Disabled Quantity button (20%)
   
4. Snackbars
   

High contrast background & High contrast text

Color properties that help with accessibility. Applicable to the background behind light or dark text and the text itself. These colors come to effect when a User turns on the High contrast toggle in the footer. We recommend not to change this color.

Info

The info color is used for interface elements showing additional information like item amounts background seen below: