Key Results
The Challenge
Saudi Arabia's Digital Government Authority (DGA) faced a fundamental problem: 10+ government ministries each had their own website design, different user interfaces, inconsistent branding, and varying levels of accessibility. Citizens navigating between ministry websites encountered completely different experiences — confusing navigation, inconsistent terminology, and unreliable mobile experiences.
This fragmentation wasn't just a design issue — it was a trust issue. Citizens couldn't tell if they were on an official government page or a phishing site. Each ministry was spending millions on individual redesigns that didn't align with neighboring ministries. And accessibility compliance was inconsistent, excluding citizens with disabilities from essential services.
The mandate was clear: create a unified national design system that every ministry would adopt — standardizing the citizen experience across all government digital touchpoints while supporting full Arabic/English bilingual functionality.
The Solution
Ijjad's team, led by founder Karam Abd Al Qader, designed and built a comprehensive national design system with these core pillars:
1. Unified Component Library
We created 100+ reusable UI components — navigation bars, forms, data tables, cards, modals, alerts, and more — each built to work seamlessly in both Arabic (RTL) and English (LTR) layouts. Every component was tested across browsers, devices, and screen readers.
2. Arabic-First Design Tokens
Unlike typical design systems that bolt on RTL support as an afterthought, we designed Arabic-first. Typography scales, spacing systems, and layout grids were built for Arabic text first, then adapted for English. This resulted in Arabic interfaces that feel natural, not translated.
3. Accessibility Compliance (WCAG 2.1 AA)
Every component meets WCAG 2.1 AA standards. Color contrast ratios, keyboard navigation, screen reader compatibility, and focus management were built into the foundation — not added later. This ensures all Saudi citizens, including those with disabilities, can access government services.
4. Ministry Customization Framework
Each ministry needed to maintain its identity while conforming to the national standard. We built a theming layer that allows ministries to apply their brand colors, logos, and specific content structures while preserving the underlying consistency of the design system.
5. Developer Documentation & Tooling
A design system is only as good as its adoption. We created comprehensive documentation, code snippets, Figma design kits, and development guidelines that enabled ministry development teams to build compliant websites 60% faster than starting from scratch.
The Results
Technical Architecture
The design system was built on modern web standards to ensure long-term maintainability:
- Component framework: Web Components for framework-agnostic compatibility (ministries use different tech stacks)
- Design tokens: JSON-based token system for colors, typography, spacing, and breakpoints
- RTL engine: Logical CSS properties (margin-inline-start vs margin-left) for automatic RTL/LTR switching
- Theming: CSS custom properties enabling ministry-specific customization without forking
- Testing: Automated accessibility testing, visual regression testing, and cross-browser testing in CI/CD
- Documentation: Storybook-based component playground with live code examples
Why This Matters
This project demonstrates what Ijjad brings to every engagement — whether it's a national-scale design system or a 10-page business website:
- Arabic-first expertise: We don't bolt on RTL — we design for Arabic from the start
- Enterprise architecture: Systems designed to scale across organizations
- Accessibility commitment: Inclusive design is built in, not bolted on
- Developer experience: We make it easy for teams to build on our foundations
Need a design system or enterprise web platform?
The same team that built Saudi Arabia's National Design System is available for your project. Whether you need a design system for your enterprise, a government platform, or a custom web application — we bring ministry-scale thinking to every engagement.
Discuss Your Project →FAQ
What is a national design system?
A national design system is a unified set of design standards, reusable UI components, and development guidelines that ensure all government websites and digital services share a consistent look, feel, and user experience. Saudi Arabia's National Design System standardized digital experiences across 10+ ministries, making government services more accessible and trustworthy for millions of citizens.
How long does it take to build a design system?
A comprehensive government-scale design system typically takes 4-8 months for the initial version, including research, component design, documentation, and pilot deployment. Ongoing maintenance and expansion continue indefinitely. Ijjad's team delivered the core system in phases, with each ministry adoption adding 2-4 weeks of customization.
Can Ijjad build design systems for private companies?
Yes. The same methodology used for Saudi government ministries applies to enterprise design systems. Companies with multiple brands, products, or digital touchpoints benefit enormously from a unified design system. Pricing starts from 30,000 SAR for a basic enterprise design system, with larger systems scaling based on component count and documentation depth.
See Our Web Design Services | View Full Portfolio | Get a Free Consultation
Karam Abd Al Qader
Founder & Product Consultant at Ijjad