Paytm

name Paytm

colors background: "#ffffff" foreground: "#000000" brand: "#00b9f1" # Process Cyan (Paytm Blue) muted: "#757575" border: "#edeff0" card: "#ffffff" accent: "#002e6e" # Dark Midnight Blue secondary: "#ec184a" # Crimson dark: background: "#0a0a0a" foreground: "#f5f5f5" muted: "#a1a1a1" border: "#262626" card: "#121212" accent: "#00b9f1"

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

rounded default: "4px" md: "8px" lg: "16px" full: "9999px"

Design System: Paytm

Overview

Paytm's design system is "The Digital Revolution." It uses a dual-blue palette to represent the bridge between traditional trust (Midnight Blue) and the future of digital payments (Cyan).

Design Philosophy

• Democratizing Payments: Built to be used by anyone, from local shopkeepers to high-end users, prioritizing simplicity and utility.

• The Dual-Blue Identity: Pairs the trustworthy Midnight Blue (#002E6E) with the energetic, digital Cyan (#00B9F1).

• Comprehensive Ecosystem: The UI manages a massive "Super App" ecosystem through a highly structured, icon-driven grid system.

• Immediate Utility: Key actions (Scan, Pay, Wallet) are always accessible in the top "hero" area.

Colors

• Process Cyan (#00B9F1): The "Future Blue" used for primary highlights, buttons, and the brand's digital energy.

• Midnight Blue (#002E6E): The "Institutional Blue" used for headers, logos, and to establish trust.

• Crimson (#EC184A): Used for "Hot" deals and alerts to create visual urgency.

Typography

• Inter: Ensures that transaction data and service labels are legible across a wide range of devices.

• Tight Hierarchy: Uses a condensed scale to fit the "Super App" grid into a single mobile view.

Components

• The Service Grid: A signature 4xN grid of icons representing the brand's diverse offerings.

• Paytm Wallet Chip: A prominent card-like component showing the current balance with quick "Add Money" actions.

• Transaction Bubbles: Circular icons with brand logos used for frequent contacts and recent payments.

Visual Effects

• Icon Vibrancy: Uses highly colorful, detailed icons to differentiate between hundreds of services.

• Success Fireworks: A classic Paytm visual for successful large transactions or special rewards.

• Banner Carousels: High-impact, full-width banners used for marketing and ecosystem announcements.