Kashier Design System
Overview
A scalable, bilingual atomic design system for Kashier, Egypt's digital payment platform, spanning a merchant dashboard, customer dashboard, POS terminal, and mobile app across Arabic and English markets.
Kashier is an Egyptian digital payment platform helping businesses grow their online sales. The platform spans multiple surfaces: a merchant dashboard, a customer dashboard, a POS terminal, and a mobile application, all connected to a suite of payment products including payment links, payment pages, and integrations with leading CMS and e-commerce platforms.
That surface area is what made a design system essential. With a POS terminal requiring dense, touch-optimised UI, dashboards demanding data-heavy layouts, and a mobile app operating under tight screen constraints, all in both Arabic and English, design inconsistency had become a real cost. Components were rebuilt per feature, colour usage was ad hoc, and onboarding new designers meant weeks of tribal knowledge transfer. This system was built to fix that.
Team
Colour
Seven semantic colour groups, each with a ten-step tonal scale. Colours were named after concrete nouns rather than abstract numbers, making token usage more intuitive in both design files and code reviews.
Each colour extends across a 10-step scale (10–100), giving fine-grained control over hover states, disabled states, backgrounds, and borders, all within a single coherent family per semantic role.
Typography
Built on a Major Third scale (×1.25) from a 16 px base. The system pairs two typefaces per script: Outfit (headings) and Noto Sans (body) for Latin, and Cairo (headings) and Noto Naskh Arabic (body) for Arabic. Each was evaluated for legibility, x-height compatibility, and rendering quality at small screen sizes.
Headings use two weights (regular and bold). Body text spans three, regular, semibold, and bold, giving enough variation for hierarchy without fragmenting the type system. Arabic type received dedicated line-height and optical size adjustments to match its Latin counterpart at equivalent point sizes.
Shadows & Radius
Four shadow levels create a consistent depth vocabulary across cards, modals, and dropdowns. The radius scale runs from a tight 4 px for inline elements up to fully rounded for pills and avatars.
Iconography
The full Heroicons library was integrated across three variants, Mini, Outline, and Solid, giving the product a consistent icon vocabulary without custom artwork. Mini serves the dense POS and dashboard UI; Outline works across the merchant and customer web interfaces; Solid carries emphasis in the mobile app. Switching between variants is a single property toggle, not a layer hunt.
Accessibility
Every colour combination was validated against WCAG contrast ratios. The system documents which token pairings achieve AA (4.5:1) and AAA (7:1) compliance, and marks decorative-only combinations explicitly. Accessibility is a property of the token system, not a checklist at handoff.
Outcome
The system became the shared language between design and engineering at Kashier, 35+ molecule components covering buttons, forms, navigation, data display, and feedback patterns, all built bilingual from day one. It reduced component duplication, accelerated feature delivery, and ensured Arabic and English parity at the token level rather than as a retrofit.