Travel / iOS / Android / Web

Cleartrip

Cleartrip keeps booking plain and fast: white cards and Inter on light gray, near-black for your account, and orange only on the buttons that search and book.

Download
  • #FF4F17
  • #1A1A1A
  • #11A670
  • #ECF3FF
  • #F7F7F7
  • #3D1A6E

Color

Every color token in the file, grouped by role.

Brand

  • primary#FF4F17
  • on primary#FFFFFF
  • primary wash#FFF1EC
  • primary tint#FFD8CA

Surfaces

  • canvas#FFFFFF

Text

  • on dark#FFFFFF
  • ink#1A1A1A
  • ink body#4D4D4D
  • ink muted#808080

Lines

  • border#E6E6E6

More

  • dark#1A1A1A
  • page#F7F7F7
  • chip blue#ECF3FF
  • blue#0F6BFF
  • benefit#11A670
  • benefit wash#ECF8F4
  • promo purple#3D1A6E
  • field#F3F3F3

Typography

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

  • InterOpen font, shown as published.
  • headline32px / 600 / 36px

    Cleartrip

  • title24px / 600 / 32px

    Pack my box with five dozen liquor jugs

  • section20px / 600 / 28px

    Pack my box with five dozen liquor jugs

  • subtitle16px / 600 / 24px

    The quick brown fox jumps over the lazy dog

  • button14px / 600 / 20px

    Continue to checkout

  • body14px / 500 / 20px

    The quick brown fox jumps over the lazy dog

  • small10px / 500 / 16px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs4px
  • sm6px
  • md8px
  • lg12px
  • xl16px
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md12px
  • base16px
  • lg20px

Components

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

  • button primary
    button-primary
  • button book
    button-book
  • button dark
    button-dark
  • chip
    chip
  • offer card
    offer-card
  • field
    field
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 121 lines
version: alpha
name: Cleartrip-design-analysis
description: "A flights and hotels booking app in Cleartrip orange (#ff4f17) for search and book, near-black (#1a1a1a) for sign in, Inter throughout at 400 to 700, white cards on light gray, green benefit lines (#11a670) and 8px buttons with round chips."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#ff4f17"
  on-primary: "#ffffff"
  primary-wash: "#fff1ec"
  primary-tint: "#ffd8ca"
  dark: "#1a1a1a"
  on-dark: "#ffffff"
  ink: "#1a1a1a"
  ink-body: "#4d4d4d"
  ink-muted: "#808080"
  canvas: "#ffffff"
  page: "#f7f7f7"
  border: "#e6e6e6"
  chip-blue: "#ecf3ff"
  blue: "#0f6bff"
  benefit: "#11a670"
  benefit-wash: "#ecf8f4"
  promo-purple: "#3d1a6e"
  field: "#f3f3f3"

typography:
  headline:
    fontFamily: "Inter, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 36px
  title:
    fontFamily: "Inter, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 32px
  section:
    fontFamily: "Inter, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 28px
  subtitle:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 24px
  button:
    fontFamily: "Inter, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
  body:
    fontFamily: "Inter, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
  small:
    fontFamily: "Inter, sans-serif"
    fontSize: 10px
    fontWeight: 500
    lineHeight: 16px

rounded:
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 20px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    height: 56px
    padding: 8px 12px
  button-book:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    height: 40px
    padding: 8px 12px
  button-dark:
    backgroundColor: "{colors.dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    height: 40px
    padding: 8px 12px
  chip:
    backgroundColor: "{colors.chip-blue}"
    textColor: "{colors.ink}"
    typography: "{typography.small}"
    rounded: "{rounded.pill}"
    height: 32px
  offer-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.subtitle}"
    rounded: "{rounded.xl}"
  field:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    height: 38px
    padding: 8px

Overview

Cleartrip is an Indian app for booking flights, hotels, trains and buses. Its site is white and light gray in Inter, with Cleartrip orange for the buttons that search and book, near-black for signing in, small green lines for benefits and rounded chips for quick links. [Observed]

What defines the look:

  1. Orange for search and book. #ff4f17 fills Search Flights (56 high), Search hotels (52) and every Book button in results (40), with white text. [Measured]
  2. Near-black for account actions. Login and Get OTP are #1a1a1a with white text, and outlined Log in buttons use a 1px #1a1a1a border. [Measured]
  3. Inter only. Headlines at 600, text at 400 to 500, buttons at 600. [Measured]
  4. Green benefits. Fare benefits ("Free seats and meals", "Low or zero cancellation charges") are 10px green #11a670 lines. [Measured]
  5. 8px buttons, round chips. Buttons use 8 (6 on some), cards 12 to 16, and quick links like "Track flights" are 32 high pills on a pale blue #ecf3ff. [Measured]

Source for this file: the flights home page with its search form, the hotels page and a Mumbai to Delhi flight results page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. Cleartrip does not publish its design system. Traveler details and payment were not measured. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Orange#ff4f17, washes #fff1ec and #ffd8caSearch, Book, selected fare bands [Measured]
Near-black#1a1a1aLogin, Get OTP, text, outlines [Measured]
Body and muted#4d4d4d, #808080, #666666Descriptions and labels [Measured]
Canvas#ffffffCards and the search panel [Measured]
Page#f7f7f7Page background [Measured]
Border#e6e6e6, #e0e0e0Fields and cards [Measured]
Pale blue chip#ecf3ffQuick links [Measured]
Blue#0f6bffLog in / Sign up on results [Measured]
Benefit green#11a670, wash #ecf8f4Benefit lines and panels [Measured]
Promotion purple#3d1a6eOffer carousel slides [Measured]
Field gray#f3f3f3Modify search button [Measured]

Typography

Inter at 400, 500, 600 and 700. [Measured]

RoleDesktopMobileWeight
Page headline32 on 36not shown600 [Measured]
Section headline20 to 24 on 28 to 3220 on 28600 [Measured]
Fare20 on 2820 on 28600 [Measured]
Product title16 on 2416 to 20600 [Measured]
Button14 on 20 (16 on hotels)same600 [Measured]
Body and nav14 on 20same500 [Measured]
Benefit line10 on 16same500 [Measured]

Shape and spacing

Buttons use 8 (6 for Search hotels), cards 12 and 16, fields 4, and chips and the round login pill full rounding. [Measured] Buttons carry 8 by 12 padding. [Measured]

Iconography and motion

Icons are drawn with a brand icon font and inline marks in orange. [Measured] Motion was not measured. [Inferred]

Themes

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

Platform: iOS

How the Cleartrip iOS app looks and behaves was not captured. Cleartrip 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 search, trips, offers and the account is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

An orange 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 orange, near-black and Inter with the web. [Inferred]

Platform: Android

How the Cleartrip Android app looks and behaves was not captured. Cleartrip 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 search, trips, offers and the account is expected. [Inferred]

Main action

Expected on Android: Floating action button.

An orange 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 orange, near-black and Inter with the web. [Inferred]

Platform: Web

The flights home, the hotels page and a flight results 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 left rail of product links (Flights, Hotels and more) 48 high, and a header with an outlined Log in button (40 high, 8px corner, 1px near-black border). On mobile, a round Login pill sits in the header and products appear as 148 high cards with a 16px corner. [Measured]

Main action

Expected on Web: Page-level button.

An orange #ff4f17 button with white 14px semibold text: Search Flights 56 high, Book 40 high, both with an 8px corner. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

A login panel with a phone field and a near-black Get OTP button opens over black at 20 percent. [Measured]

Controls

Expected on Web: Native or custom.

Fields are 38 high with a 4px corner and a 1px #e6e6e6 border, and the main search fields 56 high. The results page has a gray #f3f3f3 Search button to modify the search. Quick links are 32 high pills. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values, with benefit lines as small as 10. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 32 to 56 high and fields 38 to 56. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

A brand icon font. [Measured]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Log in uses a phone number and a one-time code. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A booking-first site: the search panel leads, results are dense cards, and only search and book are orange. [Observed]

Cross-platform consistency

Consistent across platforms: the orange, near-black and Inter. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use orange only for searching and booking.
  • Use near-black for account actions and outlines.
  • Show benefits as small green lines.
  • Keep buttons at 8px and quick links as pale pills.

Don't

  • Don't use orange for links or decoration.
  • Don't add a display face. Everything is Inter.
  • Don't use blue for the main action.

Known Gaps

  • Traveler details, seat choice, payment and the account were not measured.
  • The iOS and Android apps were not captured, and Cleartrip publishes no design system, so every mobile topic is inferred.
  • Motion was not measured.
  • White text on orange #ff4f17 measures 3.29 to 1, below the 4.5 to 1 minimum for normal text. That is the shipped pairing and was kept.
  • Account deletion and store policy rules were not verified.