PhonePe

name PhonePe

colors background: "#ffffff" foreground: "#212121" brand: "#5f259f" # Primary Purple muted: "#676c72" border: "#e0e0e0" card: "#ffffff" accent: "#5f259f" dark: background: "#1a1a1a" foreground: "#f5f5f5" muted: "#a1a1a1" border: "#2d2d2d" card: "#242424" accent: "#5f259f"

typography fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" body: fontSize: "14px" lineHeight: "1.4" heading: fontWeight: "700" letterSpacing: "-0.01em"

rounded default: "8px" md: "12px" full: "9999px"

Design System: PhonePe

Overview

PhonePe's design system is built for "Trust and Ubiquity." It uses a restrained purple-and-white palette to communicate stability, security, and the reliability required for a national payments platform.

Design Philosophy

• Digital Trust: Uses a deep, institutional purple to signify security and "official" status.

• Inclusive Clarity: Designed for a diverse population, prioritizing large icons, clear labels, and a standard, zero-friction layout.

• The "Circle of Unity": The brand's circular emblem represents completeness and the unified payment interface (UPI).

• Efficiency over Flair: Prioritizes speed and success rates, keeping decorative elements to a minimum to ensure performance on all devices.

Colors

• Daisy Bush (#5F259F): A deep, saturated purple that is the primary identifier of the brand.

• Neutral White: High use of white space to create a "bank-like" clarity and focus.

• Semantic Accents: Uses standard green for success and red for errors to maintain universal clarity in transactions.

Typography

• Inter: A reliable, high-legibility sans-serif that ensures transaction details and amounts are always clear.

• Bold Amounts: Transaction values are always highlighted with larger, bold typography for immediate verification.

Components

• The UPI Scanner: A prominent, high-contrast action button (usually Purple) centered in the primary navigation.

• Transaction List: A clean, border-separated list with clear status icons (Success, Pending, Failed).

• Service Tiles: A dense grid of icons representing different utilities (Mobile, Electricity, Insurance) with a uniform, rounded-box style.

Visual Effects

• Subtle Gradients: Uses light purple-to-white gradients for headers and promotional banners.

• Fast Success Animations: Playful yet brief animations for "Payment Successful" to provide instant gratification.

• Progressive Stepper: A clear 3-step visualization for complex flows like insurance or loans.