Introduction
Digital Design Nizam is an open-source design system for building citizen-centric digital products in Pakistan. It serves designers and developers working on apps, websites, and software for the government, public sector, and civic tech initiatives.
It is a community-driven project by Code for Pakistan, a civic tech non-profit that work closely with the Pakistani government. I work with them as a UX advisor in a volunteer capacity.
Currently it exists as a Figma UI kit with a component library to follow.
A design system is a set of reusable components, guided by clear standards, that can be combined to build a wide range of applications. It ensures consistency and efficiency in the design process.
What makes Digital Design Nizam unique:
- 👈 25+ Right-to-left components and local language support built in
- ✋ Designed with a focus on accessibility and usability for all
- 🇵🇰 Incorporating Pakistani identity into design assets
- 📱 Built with TailwindCSS for modern web tech stacks
- 🌓 Seamless theming with light and dark mode support
The Problem
Most government websites and apps in Pakistan are clunky, inconsistent, and difficult to use. They're built on legacy tech stacks and are not designed with accessibility and usability in mind. We saw an opportunity to address these issues through design standards.
Current Website of Federal Board of Revenue, Pakistan
We drew inspiration from open-source design systems used by governments worldwide. We looked at the design systems of countries like the UK, Sweden, UAE, and more. This led us to envision a system tailored for Pakistan.
Public Design Systems we drew inspiration from
More over our projects at Code for Pakistan involve volunteers and fellows with diverse backgrounds. They can be young students and seasoned professional, with varying expertise and experience. Maintaining consistent quality and standards is challenging, especially as new contributors join.
Young students volunteering on a project
Research Process
Our Approach
We began by redesigning an existing government website as an ideal case study, then reverse engineered the design system from that prototype. The MOITT website was chosen as our pilot.
Collaborative working session during the Digital Design Nizam process
Research & References
We studied public services, branding systems, Pakistani visual culture, and global design systems to inform our work.
Moodboard of visual references, brand directions, and interface inspiration
The Team
Ten contributors—including designers, developers, and content experts—collaborated over six months to create Digital Design Nizam.
Contributors: Abdullatif Nizamani, Ahmad Shafiq Zia, Ali Raza, Ammaz Khan, Azeem Abbas, Hassaan Bin Masham, Masna bin Umeed, Shaji Ahmed, Zeerak Ahmed
Making the Design System
Compiling Ideas and Assets
We reviewed and critiqued our design options, selecting the strongest elements to form a unified system.
Components were built in Figma with customizable properties for direction, layout, and variants. Each component includes example variants to demonstrate flexibility.
Flexible components designed with reusable properties and variants
Typography and Fonts
We selected four font families—Sans, Sans Serif, Naskh, and Nastaliq—to ensure legibility and compatibility across languages and platforms.
Typography system supporting English and Urdu across interface contexts
Color System
Our color tokens represent Pakistani identity, support accessibility, and work well in UI design. The custom "Nizam Green" palette offers vibrant shades, with the 900 shade matching the national flag.
Color tokens built to express identity, contrast, and flexibility across interfaces
Common Terms in Urdu
With Zeerak Ahmed's help, we compiled Urdu translations for common UI terms, referencing major platforms and media for consistency.
Shared terminology reference for common user interface labels in Urdu
Templates and Patterns
We created templates and patterns for common use cases, enabling quick starts and consistent results.
Templates and starter patterns for common digital service experiences
Mobile application concepts showing how the system extends across device experiences
Naming and Logo
After collecting and voting on suggestions, we chose "Digital Design Nizam"—literally "digital design system"—and designed a logo inspired by the Pakistani flag.
Visual direction and identity system explorations for Digital Design Nizam
Before and Afters
To test the system beyond components and documentation, we applied Digital Design Nizam to a few well-known Pakistani government websites and apps as proof-of-concept redesigns.
Before: Ministry of Interior and Narcotics Control
After: Improved official visual design in dark mode
Before: Ministry of Planning,Development & Special Initiatives
After: RTL Urdu support with local art pattern
Before: Pakistan Railways booking page
After: modern booking platform with clear hierarchy
Before: IRIS tax filing webapp by Federal Board of Revenue
After: simplification and prioritization of key information
The design system enables consistent, accessible, and culturally relevant digital experiences for all Pakistani citizens.
Conclusion
What We're Working On
Code component library
Building reusable frontend components to help teams implement the system faster.
Guidelines and instructions
Documenting practical guidance for designers and developers working with the system.
Examples and patterns
Creating common UI patterns and examples to speed up consistent product design.
AI website reimaginations
Using AI-assisted explorations to rethink public-facing digital experiences in Pakistan.
Advocacy and implementation
Encouraging adoption through collaboration, awareness, and real-world public sector use cases.
Digital Design Nizam is an ongoing effort to improve how digital public services are designed in Pakistan. By creating shared standards, reusable components, and culturally relevant design foundations, we hope to make government products more accessible, consistent, and easier to use.
The system is still evolving through collaboration, feedback, and practical experimentation. Our goal is to make it easier for teams across government, civic tech, and the public sector to build better digital experiences for the people they serve.
Through this work, Code for Pakistan is continuing to advocate for more thoughtful, human-centered approaches to digital government.