Gojek

Overview

Gojek is a pragmatic, people-first super app that dissolves friction from daily life across Southeast Asia. The design system embodies 'Accessible Modernism'—a philosophy that marries bold, energetic visual language with functional clarity. The brand personality is confident yet approachable, speaking to drivers, merchants, and users with equal respect. The UI celebrates the brand's signature green (#00aa13) as a beacon of trust and action, anchored by clean typography (Maison Neue) and a generous, human-scaled spacing model. The emotional response is one of empowerment: users feel capable, supported, and part of a thriving ecosystem. Voice: direct, encouraging, solution-oriented. Example: 'Your ride is 4 minutes away—grab your helmet.'

Colors

The Gojek color system is built on a foundation of trust and energy. Primary (#00aa13) is the signature action color, deployed on all CTAs, active states, and brand moments—it signals 'go,' 'ready,' and 'trusted.' On-primary is pure white (#ffffff) for maximum contrast and legibility at 18px+ sizes. Primary-container (#eaffea) and on-primary-container (#00880d) create a softer, secondary tier for badges, highlights, and supporting UI. Secondary (#008bab) and tertiary (#ffc41c) are supporting accents: secondary anchors informational UI and data visualization, while tertiary energizes warnings and time-sensitive alerts. The surface stack (white → #fafafa → #f0f0f0 → #e8e8e8) provides depth without darkness, maintaining accessibility and a light, optimistic tone. Error (#ea001f) is reserved f

Typography

The type system uses Maison Neue (regular weights) and Maison Neue Extended (bold/800 weights) to create a distinctive, confident visual hierarchy. Display (60px, 800wt) and headline-lg (48px, 800wt) are reserved for hero moments and page titles, commanding attention with tight -0.04em letter-spacing. Headline-md (32px, 700wt) and title-lg (24px, 700wt) structure content sections and card headers. Body-lg (18px, 400wt) and body-md (16px, 400wt) are the workhorses for descriptive copy and UI text, set at 28px and 24px line-height respectively for comfortable reading. Label-md (14px, 600wt) and label-sm (12px, 600wt) handle buttons, badges, and form labels with 0.01–0.02em letter-spacing for precision. On small labels over busy backgrounds (e.g., badges on product cards), apply text-shadow:

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered on the viewport. The gutter (24px) is applied consistently between columns and as the primary margin unit for sections. White-space is generous: section separation uses lg spacing (40px) on desktop, reducing to md (24px) on tablet and sm (12px) on mobile. The container max-width of 1280px ensures readability and prevents line-length from exceeding 75 characters on body text. Cards and content blocks use md spacing (24px) for internal padding, with sm (12px) for nested elements. Hero sections and full-bleed imagery extend edge-to-edge, while content sections maintain the gutter margin. The spacing scale is semantic: unit (8px) is the atomic increment, xs/sm/md/lg/xl are applied contextually to margins, padding, and

Elevation & Depth

Depth in Gojek is achieved through subtle shadows and layered surfaces rather than darkness. Level 1 (Base): flat white surface (#ffffff) with no shadow, used for primary content areas. Level 2 (Elevated Cards): 1px solid border in outline-variant (#e8e8e8) + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, dropdowns, and modals. Level 3 (Floating/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used for sticky headers, expanded menus, and interactive overlays. Shadows are warm-toned (using black with 12–15% opacity) to maintain the light, approachable aesthetic. On hover, cards

Shapes

The shape philosophy is 'Pragmatic Geometry'—sharp corners for precision and trust, rounded corners for approachability. Buttons use sm radius (2px) for a modern, technical feel that signals action without softness. Cards and containers use md (10px) or lg (20px) for a balanced, friendly appearance. Input fields and search boxes use full radius (50%) to create a distinct, inviting interaction target. Modals and dropdowns use lg (20px) for visual softness while maintaining clarity. Badges and chips use full (50%) radius to emphasize their compact, self-contained nature. The rationale: sharp cor

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#00aa13) with white text, 12px vertical padding, 24px horizontal padding, and 2px radius. On hover, the background shifts to {colors.primary-fixed-dim} (#68b631) with a 150ms ease-out transition. Button-secondary mirrors the primary button but with a white background, primary text, and a 2px primary border; on hover, it fills with {colors.primary-container} (#eaffea). Button-ghost has no background or border, only primary text; on hover, it gains a subtle surface-container-high background. All buttons have a minimum height of 44px for touch targets and use {typography.label-md} (14px, 600wt) for labels. Focus states add a 3px outline in primary with 2px offset.

Containers & Surface

Do's and Don'ts

**Do**

• Do use primary (#00aa13) exclusively for CTAs, active states, and brand moments—never for passive UI or backgrounds.
• Do maintain at least 44px touch targets for all interactive elements to ensure accessibility on mobile devices.
• Do apply md (24px) gutter spacing between columns and sections to create visual breathing room and reduce cognitive load.
• Do use Maison Neue Extended (800wt) for headlines and Maison Neue (400wt) for body text to establish clear typographic hierarchy.
• Do transition interactive states over 150–200ms with ease-out timing to provide tactile, responsive feedback.
• Do use the full surface stack (surface → surface-container-highest) to create depth without introducing dark colors that conflict with the light, optimistic brand tone.

**Don't**

• Don't use primary color for disabled states, backgrounds, or non-interactive elements—reserve it for actions and focus states only.
• Don't apply shadows larger than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) as they undermine the light, accessible aesthetic.
• Don't mix Maison Neue with system fonts or sans-serif fallbacks in hero or headline contexts—always load the full Extended family for 800wt weights.
• Don't use border-radius values outside the defined scale (sm/DEFAULT/md/lg/xl/full); arbitrary radii fragment the visual language.
• Don't apply text-shadow or text-stroke to body text; use color contrast and background layers instead to maintain legibility.
• Don't exceed a 1280px container max-width or use asymmetric gutters—consistency in layout rhythm is essential to the brand's functional clarity.