Travel / iOS / Android / Web

Traveloka

Traveloka puts the search on the photo and keeps the rest calm: sky blue to go, pale blue to sign in, navy to close the page and orange only for the price.

Download
  • #0A9AF2
  • #D1F0FF
  • #05285D
  • #F96D01
  • #434343
  • #F7F9FA

Color

Every color token in the file, grouped by role.

Brand

  • primary#0A9AF2
  • primary text#0194F3
  • on primary#FFFFFF
  • primary wash#D1F0FF

Surfaces

  • canvas#FFFFFF

Text

  • on wash#024590
  • on navy#FFFFFF
  • ink#03121A
  • ink body#434343
  • ink muted#687176
  • ink faint#8F8F8F

Lines

  • border#CDD0D1

More

  • navy#05285D
  • navy mid#235D9F
  • night#1C2930
  • page#F7F9FA
  • price#F96D01
  • green#05A569
  • coral#F4555A

Typography

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

  • GodwitGodwit is private and not available in open fonts. Shown in Plus Jakarta Sans, the closest open match.
  • headline32px / 700 / 40px

    Traveloka

  • stat26px / 600 / 32px

    Pack my box with five dozen liquor jugs

  • title24px / 700 / 28px

    Pack my box with five dozen liquor jugs

  • button16px / 600 / 20px

    Continue to checkout

  • field16px / 500 / 24px

    The quick brown fox jumps over the lazy dog

  • card title16px / 600 / 20px

    The quick brown fox jumps over the lazy dog

  • small14px / 500 / 20px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs4px
  • sm6px
  • md10px
  • lg16px
  • xl24px
  • pill999px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md12px
  • base16px
  • lg24px
  • xl40px

Components

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

  • button register
    button-register
  • button login
    button-login
  • search button
    search-button
  • hotel card
    hotel-card
  • navy footer
    navy-footer
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 114 lines
version: alpha
name: Traveloka-design-analysis
description: "A Southeast Asian travel booking app in Traveloka sky blue (#0194f3, buttons #0a9af2) with deep navy bands (#05285d), Godwit throughout at 400 to 900, orange prices (#f96d01), 10px cards, pale blue Log In pills and fully round buttons."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#0a9af2"
  primary-text: "#0194f3"
  on-primary: "#ffffff"
  primary-wash: "#d1f0ff"
  on-wash: "#024590"
  navy: "#05285d"
  navy-mid: "#235d9f"
  on-navy: "#ffffff"
  night: "#1c2930"
  ink: "#03121a"
  ink-body: "#434343"
  ink-muted: "#687176"
  ink-faint: "#8f8f8f"
  canvas: "#ffffff"
  page: "#f7f9fa"
  border: "#cdd0d1"
  price: "#f96d01"
  green: "#05a569"
  coral: "#f4555a"

typography:
  # Font note: "Godwit" is a private font and is not available in open fonts. Closest open alternative: "Plus Jakarta Sans".
  headline:
    fontFamily: "Godwit, 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 40px
  stat:
    fontFamily: "Godwit, 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 26px
    fontWeight: 600
    lineHeight: 32px
  title:
    fontFamily: "Godwit, 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 28px
  button:
    fontFamily: "Godwit, 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 20px
  field:
    fontFamily: "Godwit, 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
  card-title:
    fontFamily: "Godwit, 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 20px
  small:
    fontFamily: "Godwit, 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px

rounded:
  xs: 4px
  sm: 6px
  md: 10px
  lg: 16px
  xl: 24px
  pill: 999px

spacing:
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 40px

components:
  button-register:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 48px
    padding: 0 16px
  button-login:
    backgroundColor: "{colors.primary-wash}"
    textColor: "{colors.on-wash}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 48px
    padding: 0 16px
  search-button:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.lg}"
    height: 48px
    padding: 8px 12px
  hotel-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-body}"
    typography: "{typography.card-title}"
    rounded: "{rounded.md}"
  navy-footer:
    backgroundColor: "{colors.navy}"
    textColor: "{colors.on-navy}"
    typography: "{typography.small}"

Overview

Traveloka is a travel booking app across Southeast Asia, for flights, hotels, trains, attractions and more. Its site sets the search panel over travel photography, uses Traveloka sky blue for registering and searching, a pale blue Log In pill, deep navy for bands and the footer, and orange for prices. Everything is set in Godwit. [Observed]

What defines the look:

  1. Sky blue actions. Register and search buttons are #0a9af2 with white text, and blue #0194f3 sets text links like "Search more hotels". [Measured]
  2. A pale blue Log In. Log In is a 48 high pill in #d1f0ff with deep blue #024590 text, next to the solid blue Register pill. [Measured]
  3. Deep navy. #05285d fills large bands and the footer with white links. [Measured]
  4. Godwit everywhere. One face from 400 to 900, with 32px bold headlines and 16px semibold cards and buttons. [Measured]
  5. 10px cards, round pills. Hotel and attraction cards use 10, fields 6, and buttons full pills. [Measured]

Source for this file: the home page with its flight search, the promotions page and the booking retrieval page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. Traveloka does not publish its design system. Results and payment were not measured. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Sky blue#0a9af2, text #0194f3Register, search, links, focus rings at 50 percent [Measured]
Pale blue#d1f0ff with #024590 textLog In pill [Measured]
Navy#05285d, mid #235d9fBands and footer [Measured]
Night#1c2930, #232a31Dark sections [Measured]
Ink#03121aField text [Measured]
Body and muted#434343, #687176, #8f8f8fCard titles and helper text [Measured]
Canvas and page#ffffff, #f7f9fa, #f2f3f3Cards and background [Measured]
Border#cdd0d1Fields and cards [Measured]
Price orange#f96d01Prices [Measured]
Green and coral#05a569, #f4555aPromotion tags [Measured]

Typography

Godwit at 400, 500, 600, 700 and 900. [Measured]

RoleDesktopMobileWeight
Hero headline32 on 40not shown700 [Measured]
Rating and city26 on 32same600 [Measured]
Section headline24 on 2816 on 20700 to 600 [Measured]
Button16 on 2013 on 13 in the app banner600 [Measured]
Field16 on 24same500 [Measured]
Card title16 on 20same600 [Measured]
Small14 on 20same500 [Measured]

Shape and spacing

Cards use 10 (the most frequent corner), fields and small tiles 6 and 4, panels 16, 20 and 24, and buttons 999. [Measured] Buttons carry 16 side padding, wide text buttons 14 by 40. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light only. The dark color scheme pass changed nothing. [Measured]

Platform: iOS

How the Traveloka iOS app looks and behaves was not captured. Traveloka does not publish a design system, so every item below is inferred from the web design and platform conventions. 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 bottom tab bar for home, bookings, saved items and the account is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A blue search or book 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 sky blue, navy and Godwit with the web. [Inferred]

Platform: Android

How the Traveloka Android app looks and behaves was not captured. Traveloka does not publish a design system, so every item below is inferred from the web design and platform conventions. 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 bottom navigation bar for home, bookings, saved items and the account is expected. [Inferred]

Main action

Expected on Android: Floating action button.

A blue search or book 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 sky blue, navy and Godwit with the web. [Inferred]

Platform: Web

The home page, the promotions page and the booking retrieval 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.

A header over the hero photo with Deals, Get App and other links, a pale blue Log In pill and a blue Register pill, both 48 high. Product tabs (Flights, Hotels and more) sit above the search panel, 84 high on mobile. [Measured]

Main action

Expected on Web: Page-level button.

A sky blue #0a9af2 search button with a 16px corner, 48 high, at the end of the search panel. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

On mobile an app download sheet opens over black, with "Download now" and "Maybe later" text buttons, 37 high. [Measured]

Controls

Expected on Web: Native or custom.

Origin and destination fields show airport names in 16px medium ink. Fields and tags use 6px corners, and focus rings are blue at 50 percent. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values that step down at the mobile width. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Header pills and the search button are 48 high, mobile tabs 84. [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 checked on the 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 photo-led booking site whose search panel sits on the hero, with a hard push to the app on mobile. [Observed]

Cross-platform consistency

Consistent across platforms: the sky blue, navy and Godwit. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use sky blue for registering and searching.
  • Pair a solid blue pill with a pale blue pill for the two sign-in choices.
  • Show prices in orange.
  • Round cards to 10 and buttons fully.

Don't

  • Don't use orange for buttons. It is for prices.
  • Don't use navy for actions.
  • Don't use a second typeface.

Known Gaps

  • Search results, booking details and payment were not measured.
  • The iOS and Android apps were not captured, and Traveloka publishes no design system, so every mobile topic is inferred.
  • Icons, motion and the search dialogs were not measured.
  • White text on sky blue #0a9af2 measures 3.04 to 1, below the 4.5 to 1 minimum. That is the shipped pairing and was kept.
  • Godwit is private. Plus Jakarta Sans was chosen by comparing the same 32px headline side by side: within 1 percent of the width with similar open geometric forms. Bricolage Grotesque and Archivo were close seconds.
  • Account deletion and store policy rules were not verified.