Media & Entertainment / iOS / Android / Web

BookMyShow

BookMyShow keeps its type small and charcoal so the posters can sell the show, with one red for links, filters and the way in.

Download
  • #DC354B
  • #EB4E62
  • #333333
  • #666666
  • #F2F5F9
  • #404040

Color

Every color token in the file, grouped by role.

Brand

  • primary#DC354B
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • ink#333333
  • ink strong#222222
  • ink body#666666
  • ink muted#808080
  • ink faint#999999
  • on dark#FFFFFF

Lines

  • border#E5E5E5
  • border mid#CCCCCC

More

  • signin#EB4E62
  • page#F2F5F9
  • band#F5F5F5
  • charcoal#333333
  • footer#404040

Typography

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

  • RobotoOpen font, shown as published.
  • headline24px / 700 / 30px

    Pack my box with five dozen liquor jugs

  • section24px / 700 / 28.08px

    Pack my box with five dozen liquor jugs

  • dialog title16px / 500 / 20px

    The quick brown fox jumps over the lazy dog

  • button16px / 500 / 20px

    Continue to checkout

  • body14px / 400 / 20px

    The quick brown fox jumps over the lazy dog

  • small12px / 400 / 16px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs4px
  • sm8px
  • md12px
  • lg16px
  • xl20px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md12px
  • base16px

Components

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

  • signin button
    signin-button
  • button primary
    button-primary
  • filter chip
    filter-chip
  • filter tag
    filter-tag
  • search field
    search-field
  • footer band
    footer-band
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 111 lines
version: alpha
name: BookMyShow-design-analysis
description: "A movie and live events ticketing app in BookMyShow red (#dc354b, sign in #eb4e62) on white and pale blue-gray, Roboto throughout, dark charcoal footer bands, red text for filters and links, poster-led rows and 8 to 16px corners."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#dc354b"
  on-primary: "#ffffff"
  signin: "#eb4e62"
  ink: "#333333"
  ink-strong: "#222222"
  ink-body: "#666666"
  ink-muted: "#808080"
  ink-faint: "#999999"
  canvas: "#ffffff"
  page: "#f2f5f9"
  band: "#f5f5f5"
  border: "#e5e5e5"
  border-mid: "#cccccc"
  charcoal: "#333333"
  footer: "#404040"
  on-dark: "#ffffff"

typography:
  headline:
    fontFamily: "Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 30px
  section:
    fontFamily: "Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 28.08px
  dialog-title:
    fontFamily: "Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: 0.2px
  button:
    fontFamily: "Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 20px
  body:
    fontFamily: "Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0.2px
  small:
    fontFamily: "Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0.2px

rounded:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px

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

components:
  signin-button:
    backgroundColor: "{colors.signin}"
    textColor: "{colors.on-primary}"
    typography: "{typography.small}"
    rounded: "{rounded.xs}"
    height: 25px
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 50px
  filter-chip:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.small}"
    rounded: "{rounded.lg}"
    height: 32px
    padding: 1px 12px 0
  filter-tag:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    height: 32px
    padding: 0 12px
  search-field:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    height: 36px
  footer-band:
    backgroundColor: "{colors.footer}"
    textColor: "{colors.on-dark}"
    typography: "{typography.small}"

Overview

BookMyShow sells tickets for movies, plays, concerts, sports and other live events across India. Its site is white and pale blue-gray with BookMyShow red for signing in, links and selected filters, Roboto for all text, poster-led carousels and dark charcoal bands at the foot of the page. [Observed]

What defines the look:

  1. BookMyShow red. #dc354b sets links ("See All", "View All Cities"), selected filter text and the Contact button, and a lighter #eb4e62 fills the small Sign in button. [Measured]
  2. Charcoal text and bands. Text is #333333 and #666666, and footer bands are #333333 and #404040. [Measured]
  3. Roboto, slightly open. Roboto at 400 to 700 with +0.2px tracking on body and small text. [Measured]
  4. Pale page, white rows. The page is #f2f5f9 with white content rows of posters. [Measured]
  5. Rounded filters. Language and format filters are 32 high, white with red text, either 16px pills or square tags with a hairline. [Measured]

Source for this file: the home page (which asks for a region first), the Mumbai movies listing and the Mumbai home, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. BookMyShow does not publish its design system. Seat selection and checkout need an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Red#dc354bLinks, selected filter text, Contact button, location ring [Measured]
Sign in red#eb4e62Sign in button [Measured]
Text#333333, #222222Headings and nav [Measured]
Body and muted#666666, #808080, #999999Descriptions, FAQ, city names [Measured]
Canvas#ffffffRows and dialogs [Measured]
Page#f2f5f9, #f5f5f5Page and region dialog [Measured]
Borders#e5e5e5, #cccccc, #eeeeeeFilters and search [Measured]
Charcoal#333333, #404040Footer and customer care bands [Measured]

Typography

Roboto at 400, 500 and 700. [Measured]

RoleDesktopMobileWeight
Page headline24 on 30not shown700 [Measured]
Section headline24 on 28.08not shown700 [Measured]
Dialog title16 on 20, 0.2pxsame500 [Measured]
Button16same500 [Measured]
Body and nav14 on 20, 0.2pxsame400 to 500 [Measured]
Small and labels12 on 16, 0.2px11 to 12400 [Measured]

Shape and spacing

Cards and buttons use 8, posters 12 and 16, filter pills 16, the search field and Sign in 4, and avatars full round. [Measured] Filters carry 12px side padding. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

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

Platform: iOS

How the BookMyShow iOS app looks and behaves was not captured. BookMyShow 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, movies, live events and the profile is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A red Book tickets button on a movie or event screen. [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 red, Roboto-like type and poster rows with the web. [Inferred]

Platform: Android

How the BookMyShow Android app looks and behaves was not captured. BookMyShow 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, movies, live events and the profile is expected. [Inferred]

Main action

Expected on Android: Floating action button.

A red Book tickets button on a movie or event screen. [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 red, Roboto-like type and poster rows with the web. [Inferred]

Platform: Web

The home page, a city movie listing and a city home, 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 white header with a 36 high search field (4px corner, #eeeeee border), a region chooser and a small red Sign in button, 25 high. Below it, a row of category links (Movies, Stream, Events, Plays, Sports) at 14. [Measured]

Main action

Expected on Web: Page-level button.

Choosing a poster in a row. The Contact button for listing an event is red #dc354b, 50 high with an 8px corner. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

On first visit a "Pick a region" dialog opens over a dark scrim, with popular city icons and a red "Detect my location" link. [Measured]

Controls

Expected on Web: Native or custom.

Filters on the movie listing are 32 high: language pills with a 16px corner and a #cccccc hairline, and format tags with square corners and an #e5e5e5 hairline, both with red text. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values, mostly 12 to 16 with 24 headlines. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Filters are 32 high, search 36, Sign in 25 and the Contact button 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 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 poster-led catalog that asks for a region before showing anything, then keeps type small and lets the posters carry the color. [Observed]

Cross-platform consistency

Consistent across platforms: the red, Roboto-like type and poster rows. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use the red for links, selected filters and the main action.
  • Let posters carry the color, and keep text charcoal and small.
  • Use 32 high filters with red text.
  • Close pages with charcoal bands.

Don't

  • Don't fill large areas with red.
  • Don't use pure black text.
  • Don't make filters solid red.

Known Gaps

  • Seat selection, checkout and the account need an account and were not measured.
  • The iOS and Android apps were not captured, and BookMyShow publishes no design system, so every mobile topic is inferred.
  • Icons and motion were not measured.
  • The Sign in button (25) and filters (32) are below the 44 and 48 touch minimums. That is the shipped size.
  • White text on the Sign in red #eb4e62 measures 3.62 to 1, below 4.5 to 1. That is the shipped pairing and was kept.
  • Account deletion and store policy rules were not verified.