Visual Design System

A visual design system for the Juspay dashboard, the control room of a platform processing over 300 million transactions a day. It spans a four-style icon library, a state illustration set with color reserved for meaning, and illustrated thumbnails for the feature catalog.

One language, three layers

The dashboard where merchants run their payments needed visuals that stay calm around dense data and still guide every decision.

Icons

150+ icons in four styles, one visual language for every screen of the dashboard.

Regular1 px strokeDefault everywhere
Bold2 px strokeBeside heavier type
Fill1.5 px strokeActive and selected
Duotone1.5 px stroke, 20% fill opacityA soft tint

Anatomy

Every icon is built from the same parts and rules, so a new icon slots into the set without rethinking the system.

2 pxcorner radius Round inner corner Round terminal

The library

A selection of 77 from the 150+ icon library, colored by a single token.

Illustrations

Every object shares the same soft chrome. Color appears only where it carries meaning.

No Gateway

Permission Denied

No Network

Session Expired

No Search results

No routing Rules

No Transactions

EMI

No routing Rules

Support Ticket

No Added Cards

No data found

Success

Approved

KYC Complete

Info

Alert

Error

Thumbnails

Covers that explain a feature before anyone reads the card.

Before
Feature thumbnail before the redesign
After
Feature thumbnail after the redesign
Offers feature thumbnail
UPI QR feature thumbnail
Quick pay feature thumbnail
Native OTP feature thumbnail
Lock Payment feature thumbnail
Retry feature thumbnail
Native OTP feature thumbnail, alternate art
Tap and Pay, Cards feature thumbnail
Surcharge feature thumbnail