Finance / iOS / Android / Web

Paytm

Paytm works like a service counter: a grid of cyan service tiles and forms on white, navy for the brand, and everything in plain Inter.

Download
  • #00BAF2
  • #002970
  • #85EEFC
  • #505050
  • #F7F9FC
  • #FFFFFF

Color

Every color token in the file, grouped by role.

Brand

  • primary#00BAF2
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • on navy#FFFFFF
  • ink#000000
  • ink strong#101010
  • ink body#505050
  • ink muted#707070
  • chip text#757575

Lines

  • border#CCCCCC
  • border light#DEDEDE

More

  • navy#002970
  • cyan light#85EEFC
  • cyan wash#E0F5FD
  • page#F7F9FC

Typography

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

  • InterOpen font, shown as published.
  • display40px / 600 / 1.35

    Paytm

  • title18px / 600 / 1.35

    The quick brown fox jumps over the lazy dog

  • lead18px / 500 / 25.2px

    The quick brown fox jumps over the lazy dog

  • button16px / 600 / 1.35

    Continue to checkout

  • label14px / 500 / 20px

    Continue to checkout

  • body12px / 400 / 20px

    The quick brown fox jumps over the lazy dog

  • heading small12px / 700 / 20px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs6px
  • sm8px
  • md10px
  • lg12px
  • xl20px
  • pill35px

Spacing

The spacing scale, drawn to size.

  • sm7px
  • md12px
  • base15px
  • lg20px
  • xl25px

Components

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

  • button primary
    button-primary
  • button proceed
    button-proceed
  • fare chip
    fare-chip
  • service tile
    service-tile
  • navy band
    navy-band
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 106 lines
version: alpha
name: Paytm-design-analysis
description: "A payments, recharge and booking app in Paytm sky cyan (#00baf2) and deep navy (#002970), set in Inter at 400 to 700 on white and a pale blue-gray page, with cyan 8px buttons, 12px service tiles and small, dense descriptive text."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#00baf2"
  on-primary: "#ffffff"
  navy: "#002970"
  on-navy: "#ffffff"
  cyan-light: "#85eefc"
  cyan-wash: "#e0f5fd"
  ink: "#000000"
  ink-strong: "#101010"
  ink-body: "#505050"
  ink-muted: "#707070"
  chip-text: "#757575"
  canvas: "#ffffff"
  page: "#f7f9fc"
  border: "#cccccc"
  border-light: "#dedede"

typography:
  display:
    fontFamily: "Inter, sans-serif"
    fontSize: 40px
    fontWeight: 600
  title:
    fontFamily: "Inter, sans-serif"
    fontSize: 18px
    fontWeight: 600
  lead:
    fontFamily: "Inter, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 25.2px
  button:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 600
  label:
    fontFamily: "Inter, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
  body:
    fontFamily: "Inter, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 20px
  heading-small:
    fontFamily: "Inter, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 20px

rounded:
  xs: 6px
  sm: 8px
  md: 10px
  lg: 12px
  xl: 20px
  pill: 35px

spacing:
  sm: 7px
  md: 12px
  base: 15px
  lg: 20px
  xl: 25px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 52px
    padding: 0 12px
  button-proceed:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    height: 50px
    padding: 15px 20px
  fare-chip:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.chip-text}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    height: 48px
    padding: 7px 12px
  service-tile:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.label}"
    rounded: "{rounded.lg}"
  navy-band:
    backgroundColor: "{colors.navy}"
    textColor: "{colors.on-navy}"
    typography: "{typography.body}"

Overview

Paytm is an Indian app for UPI payments, mobile recharges, bill payments and travel bookings. Its site is white and pale blue-gray with the brand's sky cyan and deep navy, set entirely in Inter. Service tiles, booking forms and long, small descriptive text fill the page. [Observed]

What defines the look:

  1. Sky cyan and deep navy. #00baf2 fills buttons and service links, and navy #002970 fills bands and outlines. [Measured]
  2. Inter only. One face from 400 to 700 (up to 900 loaded), with section headlines at 600. [Measured]
  3. Small descriptive text. Long service descriptions are 12 on 20 in #505050, with 12px bold subheadings. [Measured]
  4. 8px buttons, 12px tiles. Buttons are 50 to 52 high with 6 to 8px corners, and service tiles use 12. [Measured]
  5. Outlined fare chips. Special fare options are 48 high chips with a 1px border of black at 13 percent and an 8px corner. [Measured]

Source for this file: the home page with its flight search, the mobile recharge page with its form, and the UPI page (which showed the home layout), measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. Paytm does not publish its design system. The wallet and passbook sit behind an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Sky cyan#00baf2 with white textSearch Flights, Proceed to Recharge, service links [Measured]
Navy#002970Bands, outlines, the recharge hero [Measured]
Light cyan#85eefc, wash #e0f5fd2px focus and active outlines, tinted panels [Measured]
Ink#000000, #101010Headlines and labels [Measured]
Body text#505050Descriptions [Measured]
Muted text#707070, chip text black at 54 percentHelper text, fare chips [Measured]
Canvas#ffffffCards and forms [Measured]
Page#f7f9fcPage background [Measured]
Borders#cccccc, black at 13 percentFields and chips [Measured]

Typography

Inter, loaded as a variable font from 100 to 900. [Measured]

RoleDesktopMobileWeight
Section headline40not measured600 [Measured]
Block title18not measured600 [Measured]
Lead18 on 25.2not measured500 [Measured]
Page title1616 on 19.2600 [Measured]
Button16same600 to 700 [Measured]
Label and tile14 on 20same400 to 600 [Measured]
Descriptive text12 on 20same400 [Measured]
Small heading12 on 2014700 [Measured]

Shape and spacing

Service tiles use 12, panels 20, buttons 6 and 8, small tiles 10, and round pills 35. [Measured] Service tiles carry 25px vertical padding on desktop and 10 on mobile. [Measured]

Iconography and motion

Icons come from an icon font. [Measured] Motion was not measured. [Inferred]

Themes

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

Platform: iOS

How the Paytm iOS app looks and behaves was not captured. Paytm 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 home screen of service tiles with a scan and pay shortcut is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Scan any QR to pay, as a prominent action. [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 cyan and navy, Inter-like type and service tiles with the web. [Inferred]

Platform: Android

How the Paytm Android app looks and behaves was not captured. Paytm 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 home screen of service tiles with a scan and pay shortcut is expected. [Inferred]

Main action

Expected on Android: Floating action button.

Scan any QR to pay, as a prominent action. [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 cyan and navy, Inter-like type and service tiles with the web. [Inferred]

Platform: Web

The home page with its flight search, the mobile recharge page and the UPI 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 white header with a "Payments & Services" menu at 14 semibold and other product menus. Below, a grid of service tiles (Mobile Recharge, Electricity Bill and more) in cyan text with 12px corners. [Measured]

Main action

Expected on Web: Page-level button.

A sky cyan button with white 16px bold text: 52 high with an 8px corner for Search Flights, 50 high with a 6px corner for "Proceed to Mobile Recharge". [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

The flight form uses one way and round trip radio choices and 48 high outlined fare chips (Student, Armed Forces, Senior Citizen). The recharge form uses prepaid and postpaid radio choices, and active fields take a 2px light cyan outline. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values with few changes between desktop and mobile. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 50 to 52 high and fare chips 48. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

An icon font for service and interface glyphs. [Measured]

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 service directory more than a marketing site: dense tiles and forms first, with long descriptive text below. [Observed]

Cross-platform consistency

Consistent across platforms: the cyan and navy, Inter and the service tile grid. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use sky cyan for actions and service links, and navy for bands.
  • Keep every surface white on a pale blue-gray page.
  • Use 8px buttons and 12px tiles.
  • Outline secondary choices with a light hairline.

Don't

  • Don't use navy for main buttons. Actions are cyan.
  • Don't round buttons into pills.
  • Don't add a second display face. Everything is Inter.

Known Gaps

  • The wallet, passbook and payment flows sit behind an account, and the UPI page showed the home layout, so no product screens were measured.
  • The iOS and Android apps were not captured, and Paytm publishes no design system, so every mobile topic is inferred.
  • Motion and modals were not measured.
  • White text on sky cyan #00baf2, and cyan service text on white, measure 2.26 to 1, below the 4.5 to 1 minimum. That is the shipped pairing and was kept.
  • Some headline line heights computed as normal and are not given.
  • Account deletion and store policy rules were not verified.