One foundation, infinite brands.

Context

Trans Berjaya Khatulistiwa operates 60+ transportation products across Asmat, the whitelabel platform, and Tiketux, each with its own branding. Before Via, every application grew its own colors, components, spacing, typography, and developer implementation.

Design was hard to maintain, development was repeated per product, UX was inconsistent across operators, and onboarding new designers or developers took far longer than it should.

Challenge

The challenge was not only to standardize components. Via had to support many brands while keeping the underlying product experience consistent, and stay usable across Flutter, React, Vue, and plain CSS.

Role

I designed and led the development of Via, defining its token naming, component architecture, and documentation while working with Product and Engineering to align patterns and implementation.

• Defined the token naming across primitive, brand, semantic, and component layers.
• Built the component architecture shared by Asmat, the whitelabel platform, and Tiketux.
• Wrote the documentation used as the single source of truth.
• Led the UI/UX team during development and review.
• Partnered with Product and Engineering on adoption and implementation.

Token architecture

Via resolves tokens through four layers. Primitive values hold raw numbers and colors. The brand layer translates an operator’s identity. The semantic layer gives tokens meaning, and the component layer is what components actually read. Because components never touch raw values, rebranding an operator changes one layer instead of an entire product.

Key decisions

Split tokens into four layers: primitive, brand, semantic, and component. Components never read raw values directly.

Problem. Raw values leaked into product code, so every change was manual. Outcome. Rebranding an operator means changing the brand layer only. Structure, spacing, and behavior stay untouched.

Brand tokens carry color, logo, typography, and assets. The UX structure stays shared across every operator.

Problem. Each brand needed its own identity without a forked product. Outcome. One booking flow serves many brands, and onboarding a new operator no longer means designing from zero.

Standardized interaction patterns alongside components, so states, feedback, and transitions behave the same everywhere.

Problem. Consistency efforts usually stop at visuals. Outcome. Users moving between operators do not have to relearn how the product behaves.

Kept tokens tech agnostic and treated documentation plus developer handoff as part of the system, not an afterthought.

Problem. The system had to survive across frameworks and platforms. Outcome. Designer and developer share one vocabulary, for example brand.color.primary or component.button.primary.background.

Multi-brand by design

One booking flow can adopt any operator’s identity. Switch the brand below: the structure, spacing, and behavior stay fixed while the identity moves. Operator identities are anonymized for confidentiality.

Collaboration

• Designers assemble screens from shared components instead of redrawing them.
• Developers implement from the same tokens instead of hardcoded values.
• Product reviews move faster because patterns are already agreed upon.
• Recurring knowledge-sharing sessions keep the system understood, not just present.

Outcome

• Via serves Asmat, the whitelabel platform (60+ operator products), and Tiketux.
• Components and interaction patterns became the shared default for new work.
• Design and development effort is spent on user problems instead of repeated basics.
• Brand changes became a token exercise instead of a redesign.

Reflection

The layered token model proved its value the first time a new operator joined and the structure did not move.

What I would push further: governance. A system stays consistent only if review, versioning, and ownership keep pace with adoption.