Traveloka

Overview

Traveloka is Southeast Asia's premier travel commerce platform, serving millions of travelers seeking seamless booking experiences across flights, hotels, activities, and ground transportation. The design system embodies a philosophy of "Accessible Confidence"—combining the trust and reliability of a mature travel brand with the clarity and directness of modern digital interfaces. The aesthetic is rooted in **Functional Minimalism with Warmth**: a clean, light-dominated palette punctuated by vibrant action colors (primary blue #0a9af2, secondary orange #ff5e1f, success green #8be200) that guide users through complex booking flows without overwhelming them. The UI evokes a sense of exploration and possibility—every interaction feels purposeful, every color choice intentional.

Traveloka's voice is conversational, encouraging, and locally attuned. The brand speaks to travelers in their language (literally and tonally), using warm, inclusive language that celebrates the joy of discovery. Vocabulary patterns favor action-oriented verbs ("Jelajahi," "Pesan," "Nikmati") and benefit-driven copy. The tone avoids corporate stiffness; instead, it feels like a knowledgeable local friend guiding you through options. Example sentence in brand voice: "Temukan penawaran terbaik untuk liburan impian Anda—harga hemat, promo menarik, dan layanan 24/7 siap membantu."

Colors

The Traveloka color system is built on a foundation of trust (cool, professional blues) layered with warmth (vibrant oranges and greens) to create an inviting, energetic experience. **Primary (#0a9af2)** is the signature brand blue—used for all primary CTAs, active states, links, and focus indicators. It conveys reliability and clarity, appearing on the "Daftar" button, search submit icons, and active navigation tabs. **Secondary (#ff5e1f)** is a bold, warm orange reserved for secondary actions and highlights that demand attention without competing with primary—the search button in the hero form exemplifies this. **Tertiary (#8be200)** is a vibrant success green used for positive confirmations, badges, and promotional highlights (e.g., "Baru! Whoosh" badge). The surface stack ranges from b

Typography

The Traveloka type system centers on **Godwit**, a custom humanist sans-serif that balances geometric precision with organic warmth—ideal for a brand that must feel both trustworthy and approachable. The type hierarchy spans eight levels: **Display (56px, 700)** for hero headlines like "Pilihan utama untuk jelajahi dunia"; **Headline-lg (40px, 700)** for major section titles; **Headline-md (32px, 700)** for subsection headers; **Title-lg (24px, 600)** for card titles and modal headers; **Body-lg (18px, 400)** for long-form content and descriptions; **Body-md (16px, 500)** for form labels and standard body text; **Label-md (14px, 600)** for buttons, tabs, and UI labels; and **Label-sm (12px, 500)** for badges, captions, and fine print. Letter-spacing ranges from -0.02em on display (tighteni

Layout

Traveloka employs a **fluid, centered-column layout** with a fixed max-width of 1222px (matching the container-max-width token), ensuring the interface scales gracefully from mobile to desktop. The grid system uses 12 columns with consistent 24px gutters (gutter token), creating a rhythm that feels spacious without wasting real estate. The hero section spans full-width with a dark blue gradient background, anchoring the page with visual weight and establishing the brand's premium positioning. Below the hero, content sections use the full container width but maintain 40px (lg spacing) margins between major sections, creating clear visual separation and breathing room. The search form in the hero demonstrates the layout philosophy: inputs and buttons are arranged horizontally on desktop (fle

Elevation & Depth

Depth in Traveloka is conveyed through a **shadow-based elevation system** that mimics real-world light and shadow, creating a subtle sense of layering without resorting to dark overlays or heavy blur effects. The system defines three elevation levels: **Level 1 (sm)** uses box-shadow: 0 1px 2px rgba(3, 18, 26, 0.08), applied to subtle interactive elements like hover states on list items or small floating buttons. **Level 2 (md)** uses box-shadow: 0 4px 10px rgba(3, 18, 26, 0.15), the default shadow for cards, modals, and standard elevated surfaces—this is the most frequently used elevation an

Shapes

The Traveloka shape system follows a philosophy of **Approachable Geometry**—combining sharp, modern corners with selective softness to create a design that feels both professional and welcoming. The rounded scale is anchored by **sm (4px)** for minimal softening on small UI elements like checkboxes and icon buttons; **DEFAULT (8px)** for standard components like input fields and small cards; **md (10px)** for medium-sized containers; **lg (16px)** for primary buttons, larger cards, and modals; **xl (25px)** for prominent hero elements and large cards; and **full (9999px)** for fully rounded p

Components

Action Elements **Buttons** form the primary interaction layer. The button-primary component uses {colors.primary} (#0a9af2) background with white text, lg (16px) radius, 12px horizontal / 12px vertical padding, and a 48px fixed height for touch-friendly targets. On hover, the background shifts to #0088cc (a darker blue) and elevation increases from md to lg (box-shadow: 0 6px 16px rgba(3, 18, 26, 0.2)), creating tactile feedback. On active/pressed state, the background becomes #0071ce (even darker), with a 150ms transition-duration: ease applied to all property changes. The button-secondary component mirrors this structure but uses {colors.secondary} (#ff5e1f) for the search submit button and other secondary CTAs. Button-ghost variants use transparent backgrounds with a 1px border in