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.
