--- 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 | Role | Value | Where | |------|-------|-------| | Sky blue | `#0a9af2`, text `#0194f3` | Register, search, links, focus rings at 50 percent [Measured] | | Pale blue | `#d1f0ff` with `#024590` text | Log In pill [Measured] | | Navy | `#05285d`, mid `#235d9f` | Bands and footer [Measured] | | Night | `#1c2930`, `#232a31` | Dark sections [Measured] | | Ink | `#03121a` | Field text [Measured] | | Body and muted | `#434343`, `#687176`, `#8f8f8f` | Card titles and helper text [Measured] | | Canvas and page | `#ffffff`, `#f7f9fa`, `#f2f3f3` | Cards and background [Measured] | | Border | `#cdd0d1` | Fields and cards [Measured] | | Price orange | `#f96d01` | Prices [Measured] | | Green and coral | `#05a569`, `#f4555a` | Promotion tags [Measured] | ### Typography Godwit at 400, 500, 600, 700 and 900. [Measured] | Role | Desktop | Mobile | Weight | |------|---------|--------|--------| | Hero headline | 32 on 40 | not shown | 700 [Measured] | | Rating and city | 26 on 32 | same | 600 [Measured] | | Section headline | 24 on 28 | 16 on 20 | 700 to 600 [Measured] | | Button | 16 on 20 | 13 on 13 in the app banner | 600 [Measured] | | Field | 16 on 24 | same | 500 [Measured] | | Card title | 16 on 20 | same | 600 [Measured] | | Small | 14 on 20 | same | 500 [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.