Travel / iOS / Android / Web

Gojek

Gojek ties many services together with one green, giving each service its own bold color and card, all set in wide, open headlines.

Download
  • #00880D
  • #101820
  • #EAFFEA
  • #EE2737
  • #80276C
  • #FFFFFF

Color

Every color token in the file, grouped by role.

Brand

  • primary#00880D
  • primary hover#269A31
  • primary active#00680A
  • primary wash#EAFFEA
  • on primary#FFFFFF
  • ink secondary#494A4A
  • surface secondary#FAFAFA
  • surface tertiary#E8E8E8

Surfaces

  • canvas#FFFFFF

Text

  • ink#1C1D1D
  • ink muted#727272
  • on night#FFFFFF

Lines

  • border#BDBDBD
  • border light#E8E8E8
  • focus#86AFFF

Status

  • danger#EA001F
  • warning#FFC41C
  • info#008BAB

More

  • night#101820
  • night raised#182430
  • food red#EE2737
  • payments purple#80276C
  • logistics red#AF272F

Typography

Each style is set with the file's own family, size, weight and spacing.

  • MaisonNeueExtended-BoldMaisonNeueExtended-Bold is private and not available in open fonts. Shown in Lexend, the closest open match.
  • Maison NeueMaison Neue is private and not available in open fonts. Shown in DM Sans, the closest open match.
  • display48px / 800 / 64px

    Gojek

  • headline36px / 700 / 54px

    Gojek

  • title28px / 800 / 36px

    Pack my box with five dozen liquor jugs

  • card title24px / 700 / 36px

    Pack my box with five dozen liquor jugs

  • nav18px / 600 / 32px

    The quick brown fox jumps over the lazy dog

  • button16px / 600 / 24px

    Continue to checkout

  • body14px / 400 / 21px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • sm24px
  • md32px
  • lg40px
  • xl64px
  • pill96px

Spacing

The spacing scale, drawn to size.

  • sm12px
  • md20px
  • base24px
  • lg32px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • store button
    store-button
  • locale pill
    locale-pill
  • night band
    night-band
  • tonal chip
    tonal-chip
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 119 lines
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

RoleValueToken name in the shipped set
Green#00880d, hover #269a31, pressed #00680asurface brand, interactive accent, link, selected, success [Measured]
Green wash#eaffea, hover #d3ffd3brand secondary, highlighted primary [Measured]
Text#1c1d1d, #494a4a, #727272content primary, secondary, muted [Measured]
Disabled text#a0a0a0content disabled [Measured]
Surfaces#ffffff, #fafafa, #e8e8e8static surface primary, secondary, tertiary [Measured]
Inverse#1c1d1dstatic surface inverse, interactive active [Measured]
Borders#bdbdbd, #e8e8e8border primary, secondary [Measured]
Danger#ea001f, wash #fff3f3support danger [Measured]
Warning#ffc41c, wash #fff8e7support warning [Measured]
Info#008bab, wash #e8fbffsupport info [Measured]
Focus#86afffinteractive focus [Measured]
Visited link#c643c1link visited [Measured]
Night#101820, #182430Hero and dark sections [Measured]
Service colors#ee2737, #80276c, #af272f, #00aa13, #008c15Service cards [Measured]

Every interactive surface has default, hover and active values in the token set. [Measured]

Typography

RoleDesktopMobileFace and weight
Display48 on 64, +0.8px26 on 36 to 39Maison Neue Extended 700 to 800 [Measured]
Headline36 on 54, +0.8pxnot measuredMaison Neue Extended 700 to 800 [Measured]
Title28 on 3624 on 28Maison Neue Extended 800 [Measured]
Card title24 on 36not measuredMaison Neue 700 [Measured]
Navigation18 on 32not shownMaison Neue 600 [Measured]
Button16 on 24sameMaison Neue 600 [Measured]
Locale pill16 on 20sameMaison Neue 300 [Measured]
Body14 on 21sameMaison 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.