--- version: alpha name: Gojek-design-analysis description: "A Southeast Asian super app for rides, food and payments in Gojek green (#00880d) on deep ink (#101820) and white, with a full semantic token set shipped with the site, wide Maison Neue Extended headlines, Maison Neue for text, round green pills and 24px service cards in bold category colors." status: Draft appVersion: "measured in a browser and read from the design tokens the live site ships, 2026-10-15" platformsCovered: [Web] reviewer: "" verifiedAt: "" colors: primary: "#00880d" primary-hover: "#269a31" primary-active: "#00680a" primary-wash: "#eaffea" on-primary: "#ffffff" ink: "#1c1d1d" ink-secondary: "#494a4a" ink-muted: "#727272" canvas: "#ffffff" surface-secondary: "#fafafa" surface-tertiary: "#e8e8e8" border: "#bdbdbd" border-light: "#e8e8e8" night: "#101820" night-raised: "#182430" on-night: "#ffffff" danger: "#ea001f" warning: "#ffc41c" info: "#008bab" food-red: "#ee2737" payments-purple: "#80276c" logistics-red: "#af272f" focus: "#86afff" typography: # Font note: "MaisonNeueExtended-Bold" is a private font and is not available in open fonts. Closest open alternative: "Lexend". # Font note: "Maison Neue" is a private font and is not available in open fonts. Closest open alternative: "DM Sans". display: fontFamily: "MaisonNeueExtended-Bold, 'Maison Neue', -apple-system, sans-serif" fontSize: 48px fontWeight: 800 lineHeight: 64px letterSpacing: 0.8px headline: fontFamily: "MaisonNeueExtended-Bold, 'Maison Neue', -apple-system, sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 54px letterSpacing: 0.8px title: fontFamily: "MaisonNeueExtended-Bold, 'Maison Neue', -apple-system, sans-serif" fontSize: 28px fontWeight: 800 lineHeight: 36px card-title: fontFamily: "'Maison Neue', -apple-system, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 36px nav: fontFamily: "'Maison Neue', -apple-system, sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 32px button: fontFamily: "'Maison Neue', -apple-system, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 24px body: fontFamily: "'Maison Neue', -apple-system, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 21px rounded: sm: 24px md: 32px lg: 40px xl: 64px pill: 96px spacing: sm: 12px md: 20px base: 24px lg: 32px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" height: 44px padding: 0 24px store-button: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.sm}" height: 44px padding: 0 24px locale-pill: backgroundColor: "{colors.night}" textColor: "{colors.on-night}" typography: "{typography.button}" rounded: "{rounded.md}" height: 50px padding: 12px 20px night-band: backgroundColor: "{colors.night}" textColor: "{colors.on-night}" typography: "{typography.display}" tonal-chip: backgroundColor: "{colors.primary-wash}" textColor: "{colors.primary}" typography: "{typography.body}" rounded: "{rounded.sm}" --- ## Overview Gojek is an Indonesian super app for rides, food delivery, logistics and payments. Its site alternates deep ink and white sections, uses Gojek green for actions and links, and gives each service its own bold color on large rounded cards. Headlines are in the wide Maison Neue Extended, text in Maison Neue. A full semantic token set ships with the live site. [Measured] What defines the look: 1. **Gojek green.** `#00880d` is the brand surface, the accent, the link color and the success color in the tokens, with hover `#269a31` and pressed `#00680a`. [Measured] 2. **Deep ink sections.** `#101820` and `#182430` carry the hero and large sections with white type. [Measured] 3. **Service colors.** Cards for transport, food, payments and logistics use their own colors (greens, `#ee2737` red, `#80276c` purple, `#af272f` deep red). [Measured] 4. **Wide headlines with open tracking.** Maison Neue Extended at 700 to 800 with +0.8px tracking and a generous 1.33 line height. [Measured] 5. **Very round shapes.** Buttons are 96px pills, store buttons and cards 24, sections 40 and 64. [Measured] Source for this file: the Indonesian home page in English, the products page and the help page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass, plus the semantic tokens the live site declares on its root element. Gojek's design system documentation is not public. Ordering and payments sit in the app. No app captures were used. See Known Gaps. ## Core ### Colors | Role | Value | Token name in the shipped set | |------|-------|-------------------------------| | Green | `#00880d`, hover `#269a31`, pressed `#00680a` | surface brand, interactive accent, link, selected, success [Measured] | | Green wash | `#eaffea`, hover `#d3ffd3` | brand secondary, highlighted primary [Measured] | | Text | `#1c1d1d`, `#494a4a`, `#727272` | content primary, secondary, muted [Measured] | | Disabled text | `#a0a0a0` | content disabled [Measured] | | Surfaces | `#ffffff`, `#fafafa`, `#e8e8e8` | static surface primary, secondary, tertiary [Measured] | | Inverse | `#1c1d1d` | static surface inverse, interactive active [Measured] | | Borders | `#bdbdbd`, `#e8e8e8` | border primary, secondary [Measured] | | Danger | `#ea001f`, wash `#fff3f3` | support danger [Measured] | | Warning | `#ffc41c`, wash `#fff8e7` | support warning [Measured] | | Info | `#008bab`, wash `#e8fbff` | support info [Measured] | | Focus | `#86afff` | interactive focus [Measured] | | Visited link | `#c643c1` | link visited [Measured] | | Night | `#101820`, `#182430` | Hero and dark sections [Measured] | | Service colors | `#ee2737`, `#80276c`, `#af272f`, `#00aa13`, `#008c15` | Service cards [Measured] | Every interactive surface has default, hover and active values in the token set. [Measured] ### Typography | Role | Desktop | Mobile | Face and weight | |------|---------|--------|-----------------| | Display | 48 on 64, +0.8px | 26 on 36 to 39 | Maison Neue Extended 700 to 800 [Measured] | | Headline | 36 on 54, +0.8px | not measured | Maison Neue Extended 700 to 800 [Measured] | | Title | 28 on 36 | 24 on 28 | Maison Neue Extended 800 [Measured] | | Card title | 24 on 36 | not measured | Maison Neue 700 [Measured] | | Navigation | 18 on 32 | not shown | Maison Neue 600 [Measured] | | Button | 16 on 24 | same | Maison Neue 600 [Measured] | | Locale pill | 16 on 20 | same | Maison Neue 300 [Measured] | | Body | 14 on 21 | same | Maison Neue 400 [Measured] | ### Shape and spacing Buttons use 96 (pills), store buttons and cards 24, locale pills 32, sections 40 and 64, and avatars full round. [Measured] Buttons carry 24 side padding, locale pills 12 by 20. [Measured] ### Iconography and motion Not measured. [Inferred] ### Themes The site fixes ink and white sections. The dark color scheme pass changed nothing. [Measured] ## Platform: iOS How the Gojek iOS app looks and behaves was not captured. The token set ships on the web, but its documentation is not public, so it cannot be shown that the apps use the same set. Every item below is inferred. No device capture was done. ### Back and up navigation Expected on iOS: Chevron plus previous title, swipe from the left edge. Not measured. [Inferred] ### Primary navigation Expected on iOS: Bottom tab bar, about five items. A home with service shortcuts (GoRide, GoCar, GoFood, GoPay) and a bottom tab bar is expected. [Inferred] ### Main action Expected on iOS: Nav bar or bottom bar button. A green book or order button. [Inferred] ### Sheets, dialogs and messages Expected on iOS: Action sheets, alerts, modals. Not measured. [Inferred] ### Controls Expected on iOS: Cupertino switches, pickers, segmented controls. Not measured. [Inferred] ### Text sizing Expected on iOS: Dynamic Type. Not measured. [Inferred] ### Touch and pointer targets Expected on iOS: 44pt minimum. Not measured. [Inferred] ### Insets and system bars Expected on iOS: Safe areas, status bar. Not measured. [Inferred] ### Icons Expected on iOS: SF Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only. ### Platform conformance Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates. The app is expected to share the green, the semantic token roles and the round shapes with the web. [Inferred] ## Platform: Android How the Gojek Android app looks and behaves was not captured. The token set ships on the web, but its documentation is not public, so it cannot be shown that the apps use the same set. Every item below is inferred. No device capture was done. ### Back and up navigation Expected on Android: System back and gesture, up arrow in the top bar. Not measured. [Inferred] ### Primary navigation Expected on Android: Navigation bar, rail on tablets. A home with service shortcuts (GoRide, GoCar, GoFood, GoPay) and a bottom navigation bar is expected. [Inferred] ### Main action Expected on Android: Floating action button. A green book or order button. [Inferred] ### Sheets, dialogs and messages Expected on Android: Bottom sheets, dialogs, snackbars. Not measured. [Inferred] ### Controls Expected on Android: Material switches, pickers, chips. Not measured. [Inferred] ### Text sizing Expected on Android: Font scale. Not measured. [Inferred] ### Touch and pointer targets Expected on Android: 48dp minimum. Not measured. [Inferred] ### Insets and system bars Expected on Android: Edge to edge, system bars. Not measured. [Inferred] ### Icons Expected on Android: Material Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on Android: Account deletion and data safety requirements. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only. ### Platform conformance Expected on Android: For each important component: what Android expects, what this app does, and why it deviates. The app is expected to share the green, the semantic token roles and the round shapes with the web. [Inferred] ## Platform: Web The home page, the products page and the help page, measured at 1440 and 390 wide. ### Back and up navigation Expected on Web: Browser back, breadcrumbs. Browser back. [Observed] ### Primary navigation Expected on Web: Top nav or sidebar. An ink header with Home, GoCorp and other links at 18 semibold, and country and language pills (50 high, 32px corner, a hairline of light gray at 24 percent). [Measured] ### Main action Expected on Web: Page-level button. A green `#00880d` pill with white 16px semibold text, 44 high, with a 96px radius ("Explore Careers", "Scale with us"). App store buttons are white with a 24px corner, 44 high. [Measured] ### Sheets, dialogs and messages Expected on Web: Modals, toasts. Not measured. [Inferred] ### Controls Expected on Web: Native or custom. Help topics are 24px rounded cards on white. [Measured] ### Text sizing Expected on Web: Browser zoom. Sizes are fixed pixel values that step down at the mobile width (48 to 26 for the display). [Measured] ### Touch and pointer targets Expected on Web: Pointer and keyboard. Buttons are 44 high and locale pills 50. [Measured] ### Insets and system bars Expected on Web: Viewport, scrollbars. Not measured. [Inferred] ### Icons Expected on Web: Any. Not measured. [Inferred] ### Account and sign-in rules Expected on Web: Not applicable unless the product has accounts. Not applicable to the public pages measured. [Observed] ### Platform conformance Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates. A corporate and product site where every service has a color and a card, and green ties them together. [Observed] ## Cross-platform consistency Consistent across platforms: the green, the service colors and the round shapes. [Measured for web, Inferred for the apps] Intentionally different: not measured. [Inferred] ## Do's and Don'ts ### Do - Use Gojek green for actions, links and success. - Give each service its own color on a rounded card. - Set headlines wide, bold and lightly tracked open. - Use the named states (default, hover, active) for every interactive surface. ### Don't - Don't use service colors for buttons. - Don't square off buttons. They are full pills. - Don't use the extended face for body text. ## Known Gaps - Ordering, payments and the account live in the app and were not measured. - The iOS and Android apps were not captured. The token set ships on the web, but its documentation is not public, so every mobile topic is inferred. - Icons, motion and modals were not measured. - Maison Neue Extended and Maison Neue are private. Lexend (within 1 percent at 48px) and DM Sans (within 1 percent at 24px) were chosen by comparing the same line side by side. Sora and Plus Jakarta Sans were close seconds. - Green text on the green wash measures 4.42 to 1, just under 4.5 to 1. That is the shipped pairing and was kept. - Account deletion and store policy rules were not verified.