Back to designs

DESIGN.md · explainx registry

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 future of digital payments (Cyan).

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

  1. Democratizing Payments: Built to be used by anyone, from local shopkeepers to high-end users, prioritizing simplicity and utility.
  2. The Dual-Blue Identity: Pairs the trustworthy Midnight Blue (#002E6E) with the energetic, digital Cyan (#00B9F1).
  3. Comprehensive Ecosystem: The UI manages a massive "Super App" ecosystem through a highly structured, icon-driven grid system.
  4. 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.

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 Paytm on explainx.ai?
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). 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.

List Your Design.md

Share your design system with AI agents worldwide

GET_STARTED →