How Ijjad built a unified design system deployed across 10+ Saudi government ministries, used by millions of citizens. 60% faster development, 100% accessibility compliant.
When the Saudi Digital Government Authority (DGA) needed every ministry to share one trustworthy, accessible, Arabic-first digital experience, the traditional approach — letting each ministry redesign on its own — had failed for years. This is the story of how Ijjad designed and shipped a national design system that unified 10+ Saudi ministry websites, cut development time by 60%, and put accessibility at the core of citizen-facing services for the first time.
The Challenge: A Fragmented Digital Government
Saudi Arabia's Digital Government Authority faced a problem that every large government in the world recognises: 10+ ministries, each running its own redesign, each speaking a slightly different visual language, each implementing accessibility (or not) in its own way.
For citizens, this fragmentation wasn't a design issue — it was a trust issue. When the website you visit to renew your driver's license looks completely different from the one you use to file a tax return, two questions surface immediately: Am I on a real government site? Can I rely on what I'm seeing? Those questions are bad for citizens, bad for ministries, and bad for the broader Vision 2030 push toward a fully digital state.
The mandate from DGA was clear:
- Create a unified national design system every ministry would adopt
- Make it Arabic-first — not bolt on RTL after the fact
- Hit WCAG 2.1 AA accessibility on every component
- Enable each ministry to keep its identity while conforming to the standard
- Cut the time and cost of building new ministry digital services
The Before / After at a Glance
| Dimension | Before | After (with Ijjad's Design System) |
|---|---|---|
| Visual identity | 10+ different palettes, fonts, layouts | One national language, ministry sub-themes |
| Build time per ministry | 9–12 months from scratch | 3–5 months using shared components |
| Accessibility compliance | Inconsistent, often missing | WCAG 2.1 AA enforced in CI/CD |
| Arabic (RTL) experience | Translated afterthought | Native, designed-first |
| Citizen recognition | "Is this really gov?" | Instant, consistent trust signal |
| Per-ministry redesign cost | Millions SAR each | Fraction of legacy cost |
The Solution: Five Pillars of a National Design System
Ijjad's team — led by founder Karam Abd Al Qader, drawing on a decade of work with government and enterprise digital programmes — designed the system around five non-negotiable pillars.
1. A Unified Component Library
We shipped 100+ reusable UI components — navigation bars, forms, data tables, cards, modals, alerts, breadcrumbs, tabs, pagination, file uploaders, and more. Every component was built to work seamlessly in both Arabic (RTL) and English (LTR) layouts and tested across browsers, devices, and screen readers before release.
2. Arabic-First Design Tokens
Most design systems treat Arabic as a translation problem. We treated it as the starting point. Typography scales, line-heights, spacing systems, and grid structures were designed for Arabic text first, then adapted for English. The result is Arabic interfaces that feel native — not interfaces that "sort of work" once you flip the direction.
3. WCAG 2.1 AA Accessibility — Built In
Color contrast ratios, keyboard navigation, screen-reader semantics, ARIA labelling, focus management, and reduced-motion support were built into the foundation, not retrofitted later. Automated axe-core testing runs in CI/CD on every pull request, blocking any regression. Citizens with visual, motor, or cognitive disabilities can now access ministry services that were previously unusable for them.
4. Ministry Theming & Customisation
Each ministry needed to maintain its identity while conforming to the national standard. We built a theming layer using CSS custom properties that lets ministries apply their brand colors, logos, and content structures without forking the underlying components. One source of truth, ten distinct ministry experiences.
5. Documentation & Developer Experience
A design system is only as good as its adoption. We shipped Storybook playgrounds, copy-paste code snippets, Figma design kits, contribution guidelines, and migration playbooks for every ministry team. Compliant pages now go from idea to live in a fraction of the previous time.
Need this kind of foundation for your own organisation? A design system isn't just for governments. Enterprises with multiple brands, products, or digital touchpoints get the same compounding benefits — faster shipping, lower cost, consistent UX. See how Ijjad approaches design systems for enterprise.
How We Hit 100% WCAG 2.1 AA Compliance
Accessibility was the single hardest engineering challenge — and the most rewarding. Here's what we built into every component:
Technical Architecture
The system was engineered for a 10-year lifespan, not a one-time launch:
- Component framework: Web Components for framework-agnostic compatibility — ministries run on different stacks (Next.js, Angular, plain HTML), and the components work in all of them
- Design tokens: JSON-based token system for colors, typography, spacing, breakpoints, and motion — exportable to CSS, SCSS, iOS, and Android
- RTL engine: Logical CSS properties (
margin-inline-startinstead ofmargin-left) for automatic RTL/LTR switching with zero JavaScript overhead - Theming: CSS custom properties enabling per-ministry customisation without forking the source library
- Testing: Automated accessibility testing (axe-core), visual regression testing (Chromatic), and cross-browser testing (Playwright) in CI/CD on every PR
- Documentation: Storybook-based component playground with live code examples, accessibility notes, and Arabic/English usage guidance
The Results — One Year On
If you treat Arabic as a translation, you'll always ship a translated product. We designed for Arabic first — and the English version got better because of it.
— Karam Abd Al Qader, Founder, Ijjad · ijjad.com
What This Project Says About Ijjad
This project wasn't about producing one beautiful website. It was about building infrastructure — a foundation that ten different teams, in ten different ministries, can all build on without colliding with each other. That's a fundamentally different kind of engineering than making a brochure site, and it's the kind of thinking we bring to every engagement, no matter the scale:
- Arabic-first expertise: We don't bolt on RTL — we design for Arabic from the start, every single time
- Enterprise architecture: Systems designed to scale across organisations and outlive their first launch
- Accessibility commitment: Inclusive design is built in, not added at the end when it's too late and too expensive to do well
- Developer experience: We make it easy for the next team to build on what we shipped, with documentation that's actually used
- Long-horizon thinking: Every architectural decision is judged against a 5–10 year window, not the next sprint
From understanding to shipping
You've now seen what it takes to ship a design system that 10+ government ministries can rely on. The question is whether your team wants to spend 18 months learning these lessons the hard way — or work with a team that has already shipped this exact thing, end to end, in production.
Talk to Ijjad about your projectFAQ
What is a national design system?
A national design system is a unified set of design standards, reusable UI components, accessibility rules, and development guidelines that ensure every government website and digital service shares a consistent look, feel, and user experience. Saudi Arabia's National Design System standardized digital experiences across 10+ ministries — making government services more accessible, more trustworthy, and faster to build for millions of citizens.
How long does it take to build a design system?
A government-scale design system typically takes 4–8 months for the initial release: discovery and audit (4–6 weeks), token + foundation design (4 weeks), component library build-out (8–12 weeks), documentation and Storybook setup (2–3 weeks), then a pilot ministry rollout (4 weeks). Ongoing maintenance and expansion continue indefinitely. Ijjad's team delivered the core system in phases, with each new ministry adoption adding 2–4 weeks of theming and content migration.
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 — faster shipping, lower development cost, and consistent customer experience. Pricing for enterprise design systems starts from 30,000 SAR for a basic system, scaling based on component count and documentation depth. Get a quote on the contact page.
What does "Arabic-first" actually mean?
Arabic-first means the design system is engineered for Arabic (RTL) text, typography, and layout from day one — not retrofitted from a left-to-right base. We use logical CSS properties (margin-inline-start instead of margin-left), Arabic-tuned typography scales, mirrored iconography where appropriate, and bidi-aware form layouts. The result: Arabic interfaces that feel native, not translated.
How does the design system meet WCAG 2.1 AA accessibility?
Every component is engineered with accessibility built in: color contrast ratios at or above 4.5:1 for body text, full keyboard navigation, ARIA semantics, screen reader testing with NVDA and JAWS, focus management for modals and menus, and reduced-motion support. Automated axe-core testing runs in CI/CD to catch regressions before they ship. The result: Saudi citizens with visual, motor, and cognitive disabilities can access every ministry service.
Ready to build infrastructure, not just a website?
The same team that shipped Saudi Arabia's National Design System is available for your project. Whether you need a full enterprise design system, a government platform, an Arabic-first web application, or a custom build that has to work for years — we bring ministry-scale thinking to every engagement.
Get a Free Consultation →Keep exploring: Ijjad Web Design Services · Full Portfolio · Jeddah E-Commerce Case Study · Riyadh Redesign Case Study
Karam Abd Al Qader
Founder & Product Consultant at Ijjad