Finance / iOS / Android / Web

PhonePe

PhonePe speaks in purple: purple pills for every action, deep violet for every heading, and calm medium-weight type on white.

Download
  • #5F259F
  • #5E2B9D
  • #3B2968
  • #21153D
  • #EDE3FF
  • #05020A

Color

Every color token in the file, grouped by role.

Brand

  • primary#5E2B9D
  • primary alt#60209C
  • on primary#FFFFFF
  • brand purple#5F259F
  • tertiary#DFD8EB

Surfaces

  • canvas#FFFFFF
  • surface#F8F8F8

Text

  • violet heading#3B2968
  • ink#05020A
  • ink muted#696969
  • ink soft#8B8A8A
  • on night#FFFFFF

Lines

  • border#E4E4E4

More

  • violet dark#361968
  • violet deep#21153D
  • violet mid#5838A3
  • lavender#D7BAFF
  • lavender wash#EDE3FF
  • cyan#07C3DE
  • night#040417

Typography

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

  • Inter TightOpen font, shown as published.
  • display42px / 500 / 58.8px

    PhonePe

  • headline32px / 500 / 36.5px

    PhonePe

  • title26px / 500 / 28.6px

    Pack my box with five dozen liquor jugs

  • lead20px / 400 / 31px

    Pack my box with five dozen liquor jugs

  • card title22px / 400 / 30px

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button14px / 500 / 20px

    Continue to checkout

  • nav15px / 400 / 17.25px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs4px
  • sm8px
  • md14px
  • lg16px
  • pill140px

Spacing

The spacing scale, drawn to size.

  • xs5px
  • sm8px
  • md12px
  • base16px
  • lg24px

Components

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

  • button primary
    button-primary
  • button white
    button-white
  • product card
    product-card
  • violet band
    violet-band
  • lavender panel
    lavender-panel
  • night banner
    night-banner
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 119 lines
version: alpha
name: PhonePe-design-analysis
description: "A UPI payments and financial services app in PhonePe purple (#5f259f, buttons #5e2b9d) with deep violet text and bands (#361968, #3b2968, #21153d), Inter Tight at light to medium weights, full pill buttons and 14px cards with a soft lift."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#5e2b9d"
  primary-alt: "#60209c"
  on-primary: "#ffffff"
  brand-purple: "#5f259f"
  violet-dark: "#361968"
  violet-heading: "#3b2968"
  violet-deep: "#21153d"
  violet-mid: "#5838a3"
  lavender: "#d7baff"
  lavender-wash: "#ede3ff"
  tertiary: "#dfd8eb"
  cyan: "#07c3de"
  ink: "#05020a"
  ink-muted: "#696969"
  ink-soft: "#8b8a8a"
  canvas: "#ffffff"
  surface: "#f8f8f8"
  border: "#e4e4e4"
  night: "#040417"
  on-night: "#ffffff"

typography:
  display:
    fontFamily: "'Inter Tight', sans-serif, Helvetica, Arial"
    fontSize: 42px
    fontWeight: 500
    lineHeight: 58.8px
    letterSpacing: -0.63px
  headline:
    fontFamily: "'Inter Tight', sans-serif, Helvetica, Arial"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 36.5px
  title:
    fontFamily: "'Inter Tight', sans-serif, Helvetica, Arial"
    fontSize: 26px
    fontWeight: 500
    lineHeight: 28.6px
  lead:
    fontFamily: "'Inter Tight', sans-serif, Helvetica, Arial"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 31px
  card-title:
    fontFamily: "'Inter Tight', sans-serif, Helvetica, Arial"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 30px
  body:
    fontFamily: "'Inter Tight', sans-serif, Helvetica, Arial"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "'Inter Tight', sans-serif, Helvetica, Arial"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
  nav:
    fontFamily: "'Inter Tight', sans-serif, Helvetica, Arial"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 17.25px

rounded:
  xs: 4px
  sm: 8px
  md: 14px
  lg: 16px
  pill: 140px

spacing:
  xs: 5px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 41px
  button-white:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 41px
  product-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.md}"
  violet-band:
    backgroundColor: "{colors.violet-heading}"
    textColor: "{colors.on-night}"
    typography: "{typography.headline}"
  lavender-panel:
    backgroundColor: "{colors.lavender-wash}"
    textColor: "{colors.violet-dark}"
    typography: "{typography.title}"
    rounded: "{rounded.sm}"
  night-banner:
    backgroundColor: "{colors.night}"
    textColor: "{colors.on-night}"
    typography: "{typography.title}"

Overview

PhonePe is a UPI payments app in India that also sells insurance, investments, loans and point of sale devices for shops. Its site is white with PhonePe purple pill buttons and deep violet headings and bands, set in Inter Tight at light to medium weights, with white product cards lifted by a soft shadow. [Observed]

What defines the look:

  1. PhonePe purple. The brand purple is #5f259f. Buttons are #5e2b9d (the site's primary button color), with #60209c on violet bands. [Measured]
  2. Deep violets for text and bands. Headings are #3b2968 and #361968, and dark bands go down to #21153d and a near-black #040417 for the data site banner. [Measured]
  3. Inter Tight, never heavy. Headlines are 500, text 300 to 400. Bold appears only on a few investment headings. [Measured]
  4. Full pills. Buttons are 41 to 44 high with a 140 to 160 radius. [Measured]
  5. Soft cards. Product cards for payments and investments are white, 14px rounded, with a 1px soft shadow. [Measured]

Source for this file: the home page, the contact page and the PhonePe Pulse data page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass, plus the few color variables the site declares on its root element. PhonePe does not publish a design system. The app sits behind an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Primary button#5e2b9d, dark #361968Get Started, Get your PhonePe POS; button primary and primary dark variables [Measured]
Band button#60209c with a white edgeExplore Now, Invest Now on violet bands [Measured]
Brand purple#5f259fLogo, active nav link, menu outlines [Measured]
Headings#3b2968, #361968, #5f1f9cLoan, merchant and price headings [Measured]
Deep violet#21153d, mid #5838a3Animated hero panels; primary variants one and two [Measured]
Lavender#d7baff, wash #ede3ff, tertiary #dfd8ebText on dark, panels, tertiary button [Measured]
Cyan#07c3deSecondary button variable, contact page accents [Measured]
Ink#05020aPrimary text variable [Measured]
Muted text#696969, #8b8a8aDescriptions [Measured]
Surfaces#ffffff, #f8f8f8, #fafafaPage and bands [Measured]
Night#040417The data site banner [Measured]

Typography

Inter Tight at 300 to 600 on the main site. The data site (Pulse) uses Poppins 700 headlines and a monospace for labels. [Measured]

RoleDesktopMobileWeight
Page title42 on 58.8, -0.63px30 on 28.5500 [Measured]
Hero headline32 on 36.4826 on 29.64500 [Measured]
Band headline26 to 28 on 28.6 to 36.419.5 to 22500 [Measured]
Price display40 on 4021 on 21500 [Measured]
Card title22 on 30not measured400 [Measured]
Lead20 on 3114.4 on 22.4300 to 400 [Measured]
Body16 to 18 on 24 to 2716 on 24400 [Measured]
Button14 (16 on white buttons)same500 [Measured]
Top nav15 on 17.25, uppercase14 on 16.1400 [Measured]

Shape and spacing

Buttons are full pills (140 to 160). Product cards use 14, panels 8 and 16, and hero art sits in very large round shapes (200, 500, 800). [Measured]

Iconography and motion

The hero uses animated violet panels. [Observed] Motion timing was not measured. [Inferred]

Themes

Light only on the main site. The dark color scheme pass changed nothing. [Measured]

Platform: iOS

How the PhonePe iOS app looks and behaves was not captured. PhonePe 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, stores, insurance, wealth and history is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Scanning a QR code and paying, from a prominent purple 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 PhonePe purple, deep violets and Inter-like type with the web. [Inferred]

Platform: Android

How the PhonePe Android app looks and behaves was not captured. PhonePe 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, stores, insurance, wealth and history is expected. [Inferred]

Main action

Expected on Android: Floating action button.

Scanning a QR code and paying, from a prominent purple 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 PhonePe purple, deep violets and Inter-like type with the web. [Inferred]

Platform: Web

The home page, the contact page and the Pulse data 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 top bar of uppercase text links at 15 (Investor Relations, Contact Us and more), with the current page in brand purple. Menus open as panels with a purple outline. On mobile the links move into a menu of 40 high rows. [Measured]

Main action

Expected on Web: Page-level button.

A #5e2b9d pill with white 14px medium text, 41 high. On violet bands, a #60209c pill with a white edge; on dark imagery, a white pill with ink text, 41 to 44 high. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

The mobile menu opens over black at 60 percent. Tooltips are black with white text, per the variables. [Measured]

Controls

Expected on Web: Native or custom.

The contact page lists support levels as 70 high accordion rows and "Raise a Ticket" and "Submit a Grievance" as 44 to 50 high text links. Carousel dots are small round buttons, purple when active and #e8e8e8 otherwise. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes step down at the mobile width, with some fractional values (19.498, 21.001) on mobile. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 41 to 44 high and contact rows 44 to 70. [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 applicable to the public 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 marketing site whose sub-brands shift tone: the main site is white and purple, the Pulse data site near-black with Poppins headlines. [Measured]

Cross-platform consistency

Consistent across platforms: PhonePe purple, deep violets and pill buttons. [Measured for web, Inferred for the apps]

Intentionally different: the Pulse data site uses its own near-black look and Poppins. [Measured]

Do's and Don'ts

Do

  • Use the purple for actions and the deep violets for headings and bands.
  • Keep type at medium weight or lighter.
  • Make buttons full pills, about 41 high.
  • Lift white product cards with a soft 1px shadow and a 14px corner.

Don't

  • Don't set headlines heavy on the main site.
  • Don't use pure black for headings. Use the deep violets.
  • Don't use square buttons.

Known Gaps

  • The app sits behind an account, and no signed-in screens were measured.
  • The iOS and Android apps were not captured, and PhonePe publishes no design system, so every mobile topic is inferred.
  • Icons, motion and modals were not measured.
  • The stack names a PhonePe Sans face, but Inter Tight is what the pages load and draw, so Inter Tight is recorded.
  • Account deletion and store policy rules were not verified.