Home
The Blend Design System is the single source of truth for building cohesive, scalable, and accessible interfaces across Juspay’s dashboards and SaaS products. This wiki provides a deep, end-to-end view of all ongoing and upcoming initiatives, serving as the reference point for internal teams, open-source contributors, and the wider community.
Each track described here is not just a project but a continuous effort towards building, maintaining, and evolving the design system in a way that scales with product needs while staying aligned with best practices in design, development, accessibility, and performance.
| Track | Status | Priority | Progress | Owner | Target Release |
|---|---|---|---|---|---|
| Design System Website |  |
 |
 |
Shrishti Gupta | v1.3 |
| Design System Documentation | |
|
 |
Shristi Gupta | v1.2 |
| Icon Library Website |  |
 |
|
Vinit Khandal and Aryan Pidiha | v1.4 |
| Blend Monitor Dashboard | |
|
 |
Deepanshu Rai | v1.2 |
| Motion Integration in Components | |
|
|
Aryan Pidiha, Vinit Khandal, Shristi Gupta | v1.5 |
| Accessibility Integration | |
|
|
Vinit Khandal, Aryan Pidiha | v1.4 |
| Responsive Components | !
|
|
 |
Vinit Khandal, Aryan Pidiha | v1.5 |
| Blend MCP | |
|
|
Deepanshu | v1.6 |
| Dashboard Builder | |
|
|
Aryan Pidiha, Harsh Sharma, Vinit Khandal | v1.7 |
| Component Unit Test Cases | |
|
|
Deepanshu | v1.3 |
| Code Connect Integration Updates | |
|
|
Deepanshu Rai | v1.2 |
| Storybook Update | |
|
|
Deepanshu Rai | v1.4 |
| DS Checker Figma Plugin | |
|
 |
Deepanshu Rai | v1.2 |
| Figma ↔ Code Automation | |
|
|
Aryan Pidiha, Vinit Khandal | v1.5 |
| Component Improvement |  |
|
 |
Aryan Pidiha, Vinit Khandal | Continuous |
- Design System Website
- Design System Documentation
- Icon Library Website
- Blend Monitor Dashboard
- Motion Integration in Components
- Accessibility Integration
- Responsive Components
- Blend MCP
- Dashboard Builder
- Component Unit Test Cases
- Code Connect Integration Updates
- Storybook Update
- DS Checker Figma Plugin
- Figma ↔ Code Automation
- Component Improvement
The Design System Website is the public-facing representation of Blend. It serves as the entry point for anyone who wishes to understand what the Blend Design System is, why it exists, and how it can be used. Beyond acting as a marketing and informational asset, this site will provide an at-a-glance view of the system’s guiding principles, showcase the available components, and link directly to documentation, code repositories, and live examples.
The website will feature a highly visual and interactive design that communicates Blend’s design philosophy, patterns, and technical capabilities. Each component showcased here will be connected to its documentation and Storybook entry, ensuring that users can immediately explore, test, and integrate the component in their work. This is also the primary channel for public changelogs, release announcements, and community updates.
The documentation site is the most important single point of reference for developers, designers, and PMs working with Blend. It will provide comprehensive guidance on installing and using the library, applying tokens and themes, following accessibility guidelines, and adhering to Blend’s design principles. The documentation will also explain the governance process for contributing to the system, reviewing changes, and requesting new features or components.
The goal is to ensure that every team member — whether technical or non-technical — can use the Blend Design System without ambiguity. Detailed usage examples, Figma links, code snippets, and cross-references will make the documentation a practical daily tool. The site will be kept in sync with the GitHub repository and Storybook, with automated updates when components, tokens, or guidelines change.
The Icon Library is a dedicated platform for managing and distributing all icons used in Juspay’s dashboards and SaaS products. It will provide a searchable, filterable interface to browse icons by category, style, or keyword. Designers will be able to customize stroke widths, colors, and sizes before downloading icons in PNG or SVG formats. Developers can consume icons directly via hosted links or integrate them through the Blend library.
The library will also offer bulk export options, the ability to create custom icon sets, and integration with Figma so icons can be inserted directly into design files without leaving the design environment. This ensures brand consistency and speeds up design and development workflows.
The Blend Monitor Dashboard is an internal operational hub for tracking the health, adoption, and governance of the Blend Design System. It is designed for maintainers, design leads, and engineering managers to get real-time insights into the system’s usage and quality across both design and development environments.
This dashboard will consolidate multiple views:
Provides complete visibility into the Blend library at the package level, including the current version, download trends, release history, unresolved issues, and performance metrics. Data will be sourced from NPM and GitHub APIs.
For each component, the dashboard will display its integration readiness, indicating whether it has Figma Code Connect linked, whether unit tests are in place, and whether Storybook entries are published. This helps maintain an up-to-date component inventory.
Measures how much of the system is actually being adopted:
- Design Coverage (Figma): By integrating with the DS Checker Figma Plugin, this view calculates the percentage of DS components used in selected artboards or pages. It identifies gaps, showing where non-DS elements have been used and providing adoption trends over time.
- Development Coverage (Codebases): By instrumenting consuming projects, this view calculates the percentage of UI elements in a codebase that come from the Blend library. It can break down usage by component type, module, or team, highlighting areas where standardization can be improved.
This analytics layer is critical in guiding adoption strategies and measuring the ROI of the design system.
Maintainers can define different access control levels for contributors, reviewers, and admins. This ensures that sensitive operations like deployments and token updates are controlled.
From this view, authorized users can trigger and monitor deployments of the Blend library, documentation site, icon library, and the dashboard itself.
An integrated token management tool that allows teams to create and customize foundation tokens (colors, typography, spacing) and component tokens (button styles, card shadows, etc.). Changes can be previewed instantly and exported for both Figma and code.
By centralizing all of this information in one place, the Blend Monitor Dashboard will act as the control tower for the design system, enabling data-driven decision-making and ensuring that Blend continues to deliver value across design and engineering.
Motion is a key aspect of creating modern, intuitive, and delightful user interfaces. This track focuses on integrating best-in-class motion and micro-interactions into all components for both desktop and mobile web. Animations will follow Blend’s motion principles, ensuring they are purposeful, contextually relevant, and performance-optimized.
Using Framer Motion and motion tokens, we will maintain consistent timings, easing curves, and animation patterns. Accessibility will be respected — animations will respond to user preferences for reduced motion, ensuring inclusivity.
Every component in the Blend Design System will be designed and developed to meet WCAG 2.1 AA standards. This includes correct use of semantic HTML, proper ARIA attributes, keyboard navigability, and sufficient color contrast. Accessibility testing will be automated in the CI pipeline to prevent regressions.
The documentation will include accessibility guidelines for each component, ensuring that usage in projects also adheres to accessibility best practices.
Blend components will adapt seamlessly to different screen sizes, from small mobile devices to large desktop displays. This will be achieved through a mobile-first, token-driven approach to responsiveness, where breakpoints can be customized through theming. Layout shifts, padding, and spacing will adjust dynamically based on device size, ensuring consistent usability across platforms.
The Blend MCP (Multi-Component Platform) will act as an interactive service where end users can search for components, view their props and usage guidelines, and even generate TypeScript code snippets for dashboards. This platform will also offer AI-powered recommendations for component combinations, making dashboard building faster and more intuitive.
The Dashboard Builder will be a separate platform where users can create dashboards visually, either from scratch or using pre-built templates. This builder will integrate directly with the Blend library, allowing drag-and-drop placement of components and live preview of changes. An AI-assisted creation mode will help users generate entire dashboard layouts from natural language prompts or minimal configuration.
To ensure reliability, every component will have automated unit tests that verify its behavior, styling, and accessibility. A minimum test coverage threshold will be enforced through CI, meaning builds will fail if the coverage drops below the defined limit. This guarantees that new releases do not introduce regressions.
Figma Code Connect links design and code by allowing developers to view actual code snippets for a component directly in Figma Dev Mode. This track ensures that every Blend component is fully integrated with Code Connect, kept up to date, and synced with the main codebase.
Storybook will serve as the interactive playground for Blend components, accessible to developers, designers, and PMs. Updated Storybook entries will include prop controls, responsive previews, and accessibility tests. It will also act as a visual documentation layer, complementing the main docs site.
This plugin, developed in-house, scans Figma artboards to identify usage of Blend components versus non-DS elements. It calculates a coverage percentage, lists non-standard layers, and helps design leads guide teams towards better adoption. Over time, these metrics will feed into the Blend Monitor Dashboard for organization-wide adoption tracking.
This automation layer will ensure that changes made to the design system in Figma (tokens, styles, props) are automatically synced to the codebase, either by creating pull requests or by triggering direct updates. This will eliminate manual sync steps and reduce drift between design and development.
Continuous improvement is an ongoing track where Blend components are refined based on internal feedback, external trends, and evolving product needs. This ensures that the design system remains modern, competitive, and aligned with industry best practices.