Colors
Overview
Color distinguishes our brand and reinforces consistent experiences across products.
Primary colors
They are used for the main UI frame. Usage of the brand color within the product should be carefully considered.
Neutral colors
Neutral colors apply to most backgrounds, text, and shapes in our experiences. They don’t typically have a meaning associated with them, though they can imply things like disabled states. There are dedicated neutrals for both light and dark modes.
Additional
Used tags to represent statuses for account, booking, and payment.
Blue for hyperlink (in case Primary color doesn’t meet readability standard) or active state of components. If color #3 is used for text color, the background color should use #1 = #3 alpha 0.1, border color should be #2 = #3 alpha 0.08
Status
Used for semantic purposes: success, error, info, warning
Toasts and input’s helper texts should use these colors.
How to use color for product UI
Foregrounds
Foreground elements are text and icons. You can apply color to them by using any of the designs.
| Color | Usage |
|---|---|
| primary.3 #3AA0FE | Use for text on button secondary and icon. |
| gray.9 #262626 | Use for text of title content (Font size bigger than 20px) |
| gray.8 #2B3033 | Use for text of body content (Font size smaller than 20px) |
| gray.7 #4F5559 | Use for content that is secondary or that provides additional context but is not critical to understanding the flow of an interface. Use for text on booking status (e.g. Restaurant Cancel, Repairer Cancel, Auto Cancel) |
| gray.6 #868E95 | Use for the titles text in input components |
| gray.5 #A8B3BD | Use for the icon in input components |
| gray.4 #C5CCD2 | Use for the hint text in input components |
| gray.0 #FFFFFF | Use for text in button filled |
| info.3 #0162D1 | Use for text on toast message (Info) |
| warning.3 #F69B21 | Use for text on toast message (Warning) |
| success.3 #16831C | Use for text on toast message (Success) |
| error.3 #B91C1C | Use for text on toast message (Error) |
| blue.3 #007AFF | Use for text on booking status (Received maintenance estimation) |
| purple.3 #571DB2 | Use for text on booking status (In Progress) |
| yellow.3 #EEAF0E | Use for text on status (Update later) |
| orange.3 #F98804 | Use for text on booking status (Waiting for Repair to confirm) |
| green.3 #16831C | Use for text on booking status (Complete payment) |
| teal.3 #1B9DA0 | Use for text on booking status (e.g. Selected a Repairer) |
| red.3 #ED4927 | Use for text on booking status (e.g. Payment Error) |
| magenta.3 #B70B3F | Use for text on booking status (e.g. Assigned Repairer) |
Backgrounds
Background colors apply to surfaces of components or UI elements, such as pages, boxes, and overlays.
| Color | Usage |
|---|---|
| gray.1 #F5F6F7 | Use for page background |
| gray.2 #E9EDF1 | Use for background of booking status tag (Restaurant Cancel, Repairer Cancel, Auto Cancel) |
| info.1 #DEF6FF | Use for background of toast message (Info) |
| warning.1 #FFF3D0 | Use for background of toast message (Warning) |
| success.1 #DDFDCD | Use for background of toast message (Success) |
| error.1 #FEE2E2 | Use for background of toast message (Error) |
| blue.1 #EBF4FF | Use for background of booking status (Received maintenance estimation) |
| purple.1 #EEEBFF | Use for background of booking status (In Progress) |
| yellow.1 #FFF8E5 | Use for background of status (e.g. Update later) |
| orange.1 #FFF5EB | Use for background of booking status (e.g. Waiting for Repair to confirm) |
| green.1 #F0FDE9 | Use for background of booking status (e.g. Complete payment) |
| teal.1 #DEF1F1 | Use for background of booking status (e.g. Selected a Repairer) |
| red.1 #FFEEEB | Use for background of booking status (Payment Error) |
| magenta.1 #FFEBF1 | Use for background of booking status (e.g. Assigned Repairer) |
Borders
Borders can be used to group content or to create a visible separation between sections or items. They’re most commonly used on tables, side sections, and cards.
| Color | Usage |
|---|---|
| gray.3 #D9E1E9 | Use for border color of display tag, cancelled status tags (e.g. Restaurant Cancel, Repairer Cancel, Auto Cancel) |
| info.2 #8AD8FF | Use for border color of toast message (Info) |
| warning.2 #FABF71 | Use for border color of toast message (Warning) |
| success.2 #B5ED9A | Use for border on toast message (Success) |
| info.2 #8AD8FF | Use for border color of toast message (Info) |
| warning.2 #FABF71 | Use for border color of toast message (Warning) |
| success.2 #B5ED9A | Use for border on toast message (Success) |
| error.2 #F87171 | Use for border on toast message (Error) |
| blue.2 #A3CFFF | Use for border on booking status (Received maintenance estimation) |
| purple.2 #BEB1FF | Use for border on booking status (In Progress) |
| yellow.2 #FFEDAD | Use for boder on status (Update later) |
| orange.2 #FFD587 | Use for boder on booking status (Waiting for Repair to confirm) |
| green.2 #B5ED9A | Use for boder on booking status (Complete payment) |
| teal.2 #98DADA | Use for boder on booking status (Selected a Repairer) |
| red.2 #FF8A73 | Use for boder on booking status (Payment Error) |
| magenta.2 #EA678E | Use for boder on booking status (Assigned Repairer) |