The Asphalt Design System is a custom design language system created by Gojek. It serves as the foundation for consistent and cohesive design across Gojek's products and services.
Since H1 2023, I've contributed to saving around 15,954 hours and an estimated $353,033 in front-end development and design costs, an ongoing effort.
Asphalt Aloha is the next version of Gojek’s Design Language System. It is an upgrade to the original concept of our design system. The basic structure of the system stays intact; token libraries (atoms) that have foundational elements - color, typography, gradients, shadows, and spacing work together to form components (molecules), used to create screens, designs, and flows that have seen (organism and patterns). Even though the basics remain the same, there are various additions in Aloha that ensure the updates will mean upgrades for our products.
Great design principles define quantifies that we can interpret in different ways and ground them in the context of a specific product. Having clarity about the purpose of building a system is paramount because every decision should be shaped by it, even if indirectly.
We design with the system in mind and never as individual flows. Our designs are consistent with the best practices and any outliers are avoided.
We design with users in mind first and business second, keeping it efficient, effective, learnable, and safe.
Accessibility governs our design to ensure inclusivity. We want every section of our users to feel like the app is designed for them without the need to put in extra effort to use it.
We design products that elevate Gojek as a brand without compromising on the visual aesthetics of our interfaces and interactions.
Aloha employs a spacing system based on tokens. We use the same scale for defining space within a component as well as its spacing with the overall screen boundaries. 4px is the base value in the scale. This base token and its various multipliers form the spacing token library. We use these tokens to align our components to the 4px grid while creating mobile designs.