The scope of the project requires designing across five separate surfaces, each with distinct users, workflows, and technical constraints. Rather than build four isolated UIs, I built a single token-based design system first, then applied it across all portals. This was the only way to maintain visual coherence, reduce design debt, and allow future teams to scale the product.
01
Serving pilgrims with widely varying tech literacy meant WCAG AA compliance was a baseline, not a goal — clear labels, sufficient contrast, no icon-only interactions.
02
The visual language needed to communicate credibility and authority. Users must trust this system with passport data, visa processing, and travel approvals.
03
Every token, component, and pattern was designed to work across mobile and desktop, across high-density admin tables and minimal pilgrim-facing flows.
The full system is documented in Figma. Below is a reference of the core primitives and components built for the Hajj 360 platform.
01 — Color Tokens
02 — Typography Scale
03 — Spacing Scale
04 — Icon Set
The icon library uses a consistent 20×20 grid, 1.5px stroke weight, rounded caps. Covers registration, document, travel, admin, and status categories.
