--- 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 | Role | Value | Where | |------|-------|-------| | Primary button | `#5e2b9d`, dark `#361968` | Get Started, Get your PhonePe POS; button primary and primary dark variables [Measured] | | Band button | `#60209c` with a white edge | Explore Now, Invest Now on violet bands [Measured] | | Brand purple | `#5f259f` | Logo, active nav link, menu outlines [Measured] | | Headings | `#3b2968`, `#361968`, `#5f1f9c` | Loan, merchant and price headings [Measured] | | Deep violet | `#21153d`, mid `#5838a3` | Animated hero panels; primary variants one and two [Measured] | | Lavender | `#d7baff`, wash `#ede3ff`, tertiary `#dfd8eb` | Text on dark, panels, tertiary button [Measured] | | Cyan | `#07c3de` | Secondary button variable, contact page accents [Measured] | | Ink | `#05020a` | Primary text variable [Measured] | | Muted text | `#696969`, `#8b8a8a` | Descriptions [Measured] | | Surfaces | `#ffffff`, `#f8f8f8`, `#fafafa` | Page and bands [Measured] | | Night | `#040417` | The 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] | Role | Desktop | Mobile | Weight | |------|---------|--------|--------| | Page title | 42 on 58.8, -0.63px | 30 on 28.5 | 500 [Measured] | | Hero headline | 32 on 36.48 | 26 on 29.64 | 500 [Measured] | | Band headline | 26 to 28 on 28.6 to 36.4 | 19.5 to 22 | 500 [Measured] | | Price display | 40 on 40 | 21 on 21 | 500 [Measured] | | Card title | 22 on 30 | not measured | 400 [Measured] | | Lead | 20 on 31 | 14.4 on 22.4 | 300 to 400 [Measured] | | Body | 16 to 18 on 24 to 27 | 16 on 24 | 400 [Measured] | | Button | 14 (16 on white buttons) | same | 500 [Measured] | | Top nav | 15 on 17.25, uppercase | 14 on 16.1 | 400 [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.