CDSL Issuer Centre: A Corporate Self-Service Portal

Overview

We partnered with Central Depository Services (India) Limited (CDSL), one of India's leading securities depositories, to design and build the front end of a modern, corporate-facing self-service portal: the Issuer Centre. The platform gives issuing companies a single, streamlined destination to access services, follow guided admission procedures, and manage their relationship with the depository, replacing fragmented touchpoints with one cohesive, on-brand experience.

The Challenge

A regulated financial institution demands a rare combination: absolute visual precision, rock-solid reliability, fast performance, and a codebase that stays maintainable as the product grows week over week. The brief called for a portal that felt polished and trustworthy on every screen, with production output matching the approved designs to the pixel, including interaction and motion detail, while remaining lightweight and dependency-free enough to meet the security and longevity expectations of the sector.

Our Approach

• Design-system-first. We established a single source of truth for design tokens, colour, type, spacing, radius, and elevation, and a reusable component library, so every screen is assembled from consistent, governed building blocks.
• Pixel-perfect Figma-to-code. Rather than approximating, we extracted exact values from the design source and reproduced layouts, states, and animations faithfully, treating visual and interaction fidelity as the top priority on every page.
• Lean, durable tech. The portal is built as a fast static front end, semantic HTML, a modern utility-first CSS pipeline, and vanilla JavaScript, with no heavy framework or runtime dependency. The result is quick to load, easy to secure, and simple to hand over and maintain.
• Build-once, propagate-everywhere. Shared page chrome and a central navigation registry mean a single change updates the entire site, critical for iterative, incremental delivery.
• Accessibility and motion care. Interactions respect reduced-motion and hover-capability preferences, keeping the experience inclusive and comfortable across devices.

Outcomes

• A consistent, on-brand design system that accelerates every subsequent screen.
• Production UI that matches the approved designs with high fidelity, including hover and transition behaviour.
• A fast, lightweight, framework-free front end that is straightforward to maintain and extend.
• A delivery model that ships value incrementally while keeping quality and consistency high.

At a Glance

Design tokens · Component-driven UI · Pixel-perfect front end · Utility-first CSS · Semantic HTML · Vanilla JavaScript · Accessibility-aware interactions · Static-site performance.