04 NOV 2025
Arabic-English bilingual products are the default expectation for enterprise software in Qatar and the GCC, not an edge case. Yet most design systems are still built LTR-first, with Arabic and RTL support bolted on afterward — and it shows, in inconsistent spacing, mirrored icons that shouldn't be mirrored, and typography that was never actually tested at Arabic's natural reading size.
Start With Token Structure
The first decision that shapes everything downstream is token structure. Spacing, radius, and layout tokens should be written as logical properties (start/end, not left/right) from day one, so a single component definition works in both directions without a parallel RTL variant to maintain.
Typography Needs Its Own Scale
Typography needs its own pass, not a shared scale. Arabic script has different x-height proportions and line-height needs than Latin text — a 16px/24px pairing that reads comfortably in English can feel cramped in Arabic. We typically define parallel type scales per language, tied to the same semantic tokens (Heading/H1, Body/Default), so designers and engineers never have to hand-tune sizes per page.
Icon Mirroring Rules
Icon mirroring is a frequent source of bugs: directional icons (arrows, back buttons, progress indicators) should flip with direction; non-directional icons (a search glass, a bell, a checkmark) should not. Baking this distinction into the icon component API — rather than leaving it to per-instance judgment — removes an entire class of regional QA tickets.
Test With Real Bilingual Content
Finally, test with real bilingual content early. Lorem ipsum and English placeholder text hide problems that only show up with actual Arabic copy: text expansion, mixed-direction strings (an English brand name inside an Arabic sentence), and numeral formatting. A design system that's only ever been reviewed in English isn't finished — it's half-built.
