Paytm

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 futu…

High Quality

Join 0+ developers using this skill

skill

Designs

intermediate

0 installs

4/5 quality

View Source

Last updated: June 19, 2026

AI Skill Market Insights

Real data. Real impact.

Popularity

Rising

Emerging

Active Users

Developers

Quick Start

Install Command

Source: https://github.com/whyashthakker/design-md-templates-skills?ref=explainx

TEAR & SHARE

3-5hrs/WK

RISING

0.0K+ USING

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.

Paytm

AI Skill Market Insights

Quick Start

Install Command

TEAR & SHARE

Tags

Raycast

Be Part of the 0+ Developer Community

Design System: Paytm

Overview

Design Philosophy

Colors

Typography

Components

Visual Effects

License

MongoDB

NVIDIA

Mintlify

Spotify

Channels

Learn

Compare

Company

Agents