Blade Design System interface on computer screen

Blade is Razorpay’s design system, which was built to bring consistency and efficiency to their digital products. This Figma file acts as a central hub, housing over 40 carefully crafted components, a flexible token structure, and detailed documentation for every element. It’s designed to simplify customization and scalability, helping designers and developers maintain a unified visual style across all projects.

Some of Blade’s standout features include a variable library with a wide range of color and object styles, built-in theme switching for adaptability, and components designed to be fully responsive. The system also ensures smooth workflows by keeping token names consistent from Figma to code, allowing for quick and simple copy-pasting. As an actively maintained file, it includes deprecated components and tokens, showing how Razorpay iterates and improves its design assets over time.



More Resources Like This