Colors

Colour is a critical part of any system. However, it can slip out of control easily. With a seemingly infinite number of hues and shades, variability from different colour spaces, and various methods of picking and sampling colours, it’s easy to end up with dozens of colour values with an inconsistent usage. A systemic approach to colours helps ensure that all our products feel consistent. This includes having a defined palette of colours aligned with the brand, using accessibility compliant colours, and defining roles for each.

Brand colours

Ever since Gojek’s inception, a particular colour has become characteristic of the brand - Gojek green. We’ve gone through multiple iterations of this particular identifier, with the latest being #00AA13.

Since too many colours spoil the broth, we stick to six primary ones from our scheme -

Besides the primary colours, we also have a palette of neutral colours.

UI colours

Although we have established a brand colour palette, our system still needs to answer questions about how to use colour, how to add more of them, how to modify them, and how to work with accessibility. For the UI of our apps, we have a slightly different approach as compared to the brand colour system, as it needs to be in the context of how colours are handled in software and UI, rather than the brand and marketing aspect.

A system based on themes

Our primary colour system is categorised into Light and Dark themes. These themes change their appearance based on either OS setting or an in-app trigger in Gojek app. The concept of theming has it’s roots from the initial version of our design system, where we had colour themes based on products within Gojek. Although comprehensive, the earlier version proved difficult to scale from a long-term perspective, as we were rapidly growing and adding new products.

For the new version of our colour library, we simplified it into a more robust structure. The structure is based on the overall product classification from the business perspective and contains three colour themes: Green, Pink, and Purple. We use Green for our main consumer app and driver partner app, Pink for entertainment services, and Purple for the Merchant partner apps.

Theme substructure

Each of the 3 sub-themes within the light/dark parent themes is further divided into children which have styles inherent to them. These children and the styles follow a common naming convention across the Green, Pink and Purple sub-themes. This structure helps in switching between them without making any changes to our system.

Defining roles

The naming of the children is based on the roles that the styles play in our UI.

Fill

These tokens are used for any kind of fills in the UI components or screen background, except graphical elements like icons, logos and illustrations.

Border

These tokens are used to add border style for the components.

Icon

These tokens are only used to colour the icons in the screen or inside components.