Asphalt Aloha Design System
The Asphalt Design System is Gojek’s in-house design language, developed to ensure consistency and cohesion across all products and services.
My role & responsibilities
I contributed to several components creation, documentation, and creating an interactive prototypes library project to make designer kickoff their prototyping projects faster.
Outcome / Impact
62
Master components
20+
Teams
77k
Insertion / week
What we actual do
People often think working on a design system isn’t doing a real end-to-end product design. We actually do it all. When you’re on a product team, you already know what you’re building and have a full squad of researchers, PMs, and engineers backing you up.
With a design system, it’s a whole different game, you’re building your own product, you need to marketing it by yourself, and aligning multiple teams to make it work. It's like selling a product internally, you will only get a success if someone using your product, building it easy, "selling" it is the hardest one.
🚀
Reduced design/development time for new screens
🚀
Improved consistency, fewer UI divergences
🚀
Accessibility compliance
🚀
Better designer/dev handoff experience
🚀
Increased adoption across products (5+)
Doing design system basically 30% design 70% negotiation, it’s a end-to-end product design but your target audience is the internal team. It touches so many parts of the company and involves a lot of teams. There’s plenty of negotiation and consensus-building along the way!
📋
Here are the outcomes of our process — from defining principles and building tokens to crafting the creative elements that bring the system to life.
Principles
These four principles — Consistency, Usability, Accessibility, and Aesthetics became our north star, guiding every design decision to keep the system cohesive, intuitive, and scalable as it evolved. It provides a shared foundation that keeps every Gojek app looking and feeling unified.
Consistency
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.
Usability
We design with users in mind first and business second, keeping it efficient, effective, learnable, and safe.
Accessibility
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.
Aesthetics
We design products that elevate Gojek as a brand without compromising on the visual aesthetics in our interfaces and interactions.
Design tokens
Colors
Aloha’s color system draws from Gojek’s product categories, featuring three main themes Green, Pink, and Purple. This structure allows us to maintain consistency while remaining flexible enough to develop new themes for future apps.
Typography
Typography in Aloha follows the same token-based approach. Typography tokens define font families, sizes, weights, and line heights, ensuring a consistent visual rhythm and readability across all products. By using tokens, we can easily scale type styles and maintain harmony between text and other design elements.
Shadows & Elevation
In Asphalt Aloha, elevation is represented through shadow tokens. These tokens define how surfaces interact with light, creating a sense of depth and hierarchy within the interface.
Our shadows are based on a consistent light source positioned perpendicular to the device screen, ensuring visual realism and harmony across components.
Each shadow token corresponds to a specific elevation level from low, subtle layers like cards and input fields to higher, more prominent surfaces such as modals or floating buttons. By standardizing these tokens, we maintain a coherent visual hierarchy while keeping the interface clean, legible, and true to Gojek’s visual language.
Spacing System
Aloha uses a token-based spacing system built on a 4px base unit. This consistent scale is applied both within components and between components and screen boundaries. The 4px base value, along with its multipliers, forms our spacing token library, which helps maintain visual rhythm and alignment across mobile layouts
Creative Space
Not just engineer and product team. We also worked closely with the creative team, illustrators, and motion designers to build a cohesive and expressive system.
