explainx.ainewsletter3.4k
Back to designs

DESIGN.md · explainx registry

PhonePe

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 System#design#ui#ux#template
Get a custom design.md for your product
DESIGN.md (markdown body)
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

  1. Digital Trust: Uses a deep, institutional purple to signify security and "official" status.
  2. Inclusive Clarity: Designed for a diverse population, prioritizing large icons, clear labels, and a standard, zero-friction layout.
  3. The "Circle of Unity": The brand's circular emblem represents completeness and the unified payment interface (UPI).
  4. 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.

Usage

  1. Copy DESIGN.md into your project or paste it into your IDE agent chat.
  2. Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
  3. When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.

Common questions

What is PhonePe on explainx.ai?
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. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
What is DESIGN.md?
DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
Where is the source repo?
Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
How current is this DESIGN.md?
Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
Need a fresh DESIGN.md from scratch?
Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.

Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.

Reference →DESIGN.md generator →Skills registry →

List Your Design.md

Share your design system with AI agents worldwide

GET_STARTED →