In this article we explain how you can customize how your brand appears globally across the mobile apps and web pages your customers and drivers use.
Overview
Colors
All the colors will be set using the HEX-Code system. A HEX (hexadecimal) color code is a 6-digit alphanumeric value that represents a specific color in the RGB color model. It starts with a pound or hash symbol (#) followed by six characters, such as #FF5733.
Please make sure you always enter six characters and hit the save button once you made any changes.
Primary color set
A primary brand color is the main color that represents a company's visual identity. It's the dominant color used in a company's logo, marketing materials, and overall brand presence. If your brand was created by an agency or an employee, ask them for help to identify the correct color to use here.
The Primary color you set here (e.g. #3F77F2) is used on key components across the UI, such as prominent buttons, links, and active states. It's recommended to use a darker primary color to ensure that text displayed in this color has good readability on a white background. Please don’t use black or grey, since it won’t stand out from the rest of the UI in the software.
Ensure that text on buttons using your primary color maintains good readability. For lighter primary colors, use black text (#000000); for darker primary colors, use white text (#FFFFFF). You can see in the preview how the Primary color and the Color on primary look together.
Finally, you'll need to set the highlighted state color, which appears when primary UI components are hovered over, focused, highlighted, or pressed. You can see this effect by hovering over the Preview button. For darker primary colors, choose a lighter version of that color for the highlighted state; for lighter primary colors, select a darker version instead.
If you need help generating this color, you can use Adobe Color. Simply enter your primary color and select the "Shades" Color Harmony to generate lighter and darker variations of your primary color.
Secondary color set
A secondary brand color is a complementary color that works alongside the primary color in a company's visual identity. If your brand was created by an agency or an employee, ask them for help to identify the correct color to use here.
The Secondary color you set here (e.g. #F2F2F2) is used for less prominent components in the UI. If you don’t have a secondary color, you can just keep the grey that is pre-filled here. That will look great with whatever primary color you chose.
Ensure that text on buttons using your secondary color maintains good readability. For lighter secondary colors, use black text (#000000); for darker secondary colors, use white text (#FFFFFF). You can see in the preview how the Secondary color and the Color on secondary look together.
Finally, you'll need to set the highlighted state color, which appears when secondary UI components are hovered over, focused, highlighted, or pressed. You can see this effect by hovering over the Preview button. For darker secondary colors, choose a lighter version of that color for the highlighted state; for lighter secondary colors, select a darker version instead.
If you need help generating this color, you can use Adobe Color. Simply enter your primary color and select the "Shades" Color Harmony to generate lighter and darker variations of your secondary color.
Other colors
Here, you can set additional colors used on different platform UI elements. For the Icon tint color we suggest using your primary color and the Background of emails color can be left as is.
Logos and images
If you need help creating the assets required for upload here, reach out to the agency or employee responsible for your branding. If you don't have access to these resources, contact our support team for assistance. You can also download examples to see how each asset should look like.
Logo
The logo will be used in mobile apps, web dashboard, invoices, and transactional emails. It must be in SVG format (Scalable Vector Graphics), which is a file format used for displaying vector graphics on the web.
Favicon
The favicon appears in browser tabs as the icon for the web dashboard. It must be in PNG format and be square (e.g., 58px × 58px).
Email header
The header image is used for transactional emails. It must be in JPG or PNG format and have a size of 1160×168px. As shown in the example, you could use your primary color as the background and place your logo on top of it in either white or black.
Dashboard login image
This image appears on the onboarding pages of the web dashboard. It must be in JPG or PNG format with a minimum size of 3000×2000px. If you don’t have any photos from your company or operations you can find good images on stock photo websites, like Unsplash or Freepik.
Driver pin
The Driver pin is a circle-shaped icon displayed on maps to indicate a driver's location. It must be in SVG format. You can download the example and open it in a graphics program like Illustrator to change the pin's color to match your company color.
