Case Study — Design Systems · Government
Ministry of Labour
Design System
I led the end-to-end design system initiative for Qatar's Ministry of Labour — auditing 9+ platforms, benchmarking mature systems (UAE DS, Singapore DS, GOV.UK), and building a scalable bilingual component library with 50+ components, structured variables, and WCAG 2.1 AA compliance.
01 — The Problem
No unified design language
across 9+ platforms
The Ministry of Labour operates multiple digital platforms — external-facing citizen services and internal tools — designed and developed by different teams over time. As products evolved independently, the user experience became fragmented with inconsistent patterns, duplicated UI decisions, and varying accessibility quality.
There was no unified design system to guide teams. No centralized documentation. No shared color palette, typography, or spacing system. Each team built components from scratch — buttons, inputs, cards — spending hours recreating the same patterns. Arabic (RTL) and English (LTR) layouts were handled differently across platforms, with some breaking entirely when switching languages.
Fragmentation
Inconsistent visual language
No shared color palette, typography, or spacing system across 9+ platforms. Each team followed different design rules, accessibility standards, and interaction patterns.
Duplication
Every team built from scratch
The same components — buttons, inputs, cards — were built multiple times by different teams. Designers spent hours recreating patterns. Developers could not reuse code across platforms.
Accessibility
No WCAG standard enforced
Color contrast, keyboard navigation, and screen reader support varied by platform. No standard for WCAG compliance existed across any of the Ministry's digital products.
Bilingual
RTL/LTR inconsistency
Arabic (RTL) and English (LTR) layouts were handled differently across platforms. Some worked. Some broke when switching languages. No systematic approach to bilingual design.
02 — My Role
I led the end-to-end
design system initiative
- Audited 9+ external and internal Ministry products
- Conducted UX audits, heuristic evaluations, and accessibility reviews
- Clustered findings into system-level themes (colors, typography, spacing, forms, bilingual structure)
- Benchmarked mature design systems (UAE DS, Singapore DS, GOV.UK)
- Defined foundations first: colors, typography, spacing, radius, grids, effects
- Translated foundations into structured variables (primitive + semantic)
- Built component library on top of variables (50+ components)
- Created design system documentation for teams
- Presented to stakeholders and ensured adoption
03 — The Solution
A scalable bilingual design system
with three layers
Layer 1
Foundations
Core visual foundations every component inherits — colors, typography, spacing, radius, grids, and effect styles. These create consistency at the root level before any component is built.
Layer 2
Variables
Primitives define raw values. Semantics map those values to UI roles — primary button, error state, link text. This makes the system scalable and maintainable without hard-coded values.
Layer 3
Component Library
50+ components — buttons, form inputs, cards, navigation, data tables, modals, notification banners. Every component inherits shared foundations and variable logic.
04 — Layer 1: Foundations
Colors, typography,
spacing & grids
Color System: 4 primary palettes — Al-Adaam (Primary Colors), Skyline (Secondary A), Palm (Secondary B), and Dune (Tertiary Colors) — plus greyscale core neutrals, success, error, warning, and info semantic palettes. A Qatar Gradient Set was also defined. Dark text colors on light backgrounds and light text colors on dark backgrounds were mapped with specific contrast ratios.
Typography: Dual-font system — Manrope for English (LTR) and Noto Sans Arabic for Arabic (RTL). Full type scale from Display 2xl through body text, with weight mappings from Light through Bold for both scripts.
Spacing, Radius & Grids: Systematic spacing scale. Border radius tokens. Responsive grid layouts — Desktop 1280px (12/4/3 column), Tablet 768px (7/2 column), iPhone 375px. Effect styles defined for shadows and elevations.
Colors
Color System — 4 primary palettes + semantic success/error/warning/info + Qatar Gradient Set
Typography
spacing & grids system
Spacing & Grid System — responsive layouts from 12-column desktop to 2-column mobile
05 — Layer 2: Variables
Primitives and semantics —
the system's backbone
After establishing foundations visually, I translated them into structured Figma variables. Primitives define raw values. Semantics map those values to UI roles like primary button, error state, or link text. This two-tier approach means a single primitive change propagates across the entire system — making theming, dark mode, and future updates possible without touching individual components.
Figma Variables — primitive tokens mapped to semantic roles across the entire component library
06 — Layer 3: Component Library
50+ components built on
shared foundations
With foundations and variables in place, I built the component library — 50+ components including buttons, form inputs, cards, navigation, data tables, modals, and notification banners. Every component inherits shared foundations and variable logic, with full property controls for style, size, RTL support, destructive states, and interaction states.
Buttons & Avatars
Full variant system
Properties: Style (Solid, Neutral, Transparent), Size (sm/md/lg), RTL (true/false), Destructive (true/false), State (default/hovered/pressed/focused/disabled), Lead icon, Button text, Trail icon.
Inputs & Text Areas
Comprehensive form system
Properties: RTL, Destructive, Required, Hint, Leading/trailing icons, Label, Placeholder text, Image leading. Full state coverage including error validation patterns in both Arabic and English.
Cards
Flexible card system
Properties: RTL, Type (default/expandable/selectable), State, Effect (stroke/shadow), Expanded, Selected, Title/Description in both EN and AR, Avatar/Icon, Image, Rating, Tags, Custom components slot.
System-wide
Navigation, Tables, Modals
Navigation bars, data tables with sorting and filtering, modal dialogs, notification banners — all bilingual, all accessible, all powered by the shared variable system for consistent theming.
Component Library — 50+ components with full Figma properties, RTL support, and accessibility states
07 — Benchmarking
Learning from the best
government design systems
Before building, I benchmarked three mature government design systems to learn from their approaches and avoid reinventing patterns that already had proven solutions:
Reference 01
UAE Design System
Studied how the UAE DS handles bilingual components and RTL layout patterns at government scale — the closest comparable system to what MoL needed.
Reference 02
Singapore DS
Analyzed Singapore's approach to token architecture and variable structuring — their primitive/semantic split influenced how I organized MoL's variable system.
Reference 03
GOV.UK
Referenced GOV.UK's documentation standards and accessibility-first component design — the gold standard for government design system governance and adoption.
08 — Reflection
What I learned about
design system leadership
Building the MoL design system taught me that a design system is 20% components and 80% governance. The hardest part wasn't defining the color palette or building button variants — it was auditing 9+ products with different teams, clustering findings into actionable themes, and then presenting a unified vision that stakeholders and developers would actually adopt.
The variable architecture was the most important technical decision. Building primitives and semantics as two separate layers meant the system could survive theme changes, dark mode additions, and future brand evolution without touching individual components. It's slower to set up, but it's the difference between a design system that works for 6 months and one that works for 6 years.
The bilingual challenge was real. Every component needed to work in Arabic (RTL) and English (LTR) without separate builds. That required rethinking how icons align, how text truncates, how form layouts flow, and how navigation collapses — all controlled through a single RTL property toggle. The result is a system where switching languages is a variable change, not a rebuild.