Building a Design System That Scales Across Europe and the GCC
Most design systems break when they hit a second language or a second region. Components designed for left-to-right English layouts collapse in Arabic. Spacing rules optimised for Latin scripts produce awkward Arabic. Colour systems that worked in Paris feel cold in Riyadh.
Building a system that works across both markets from day one is harder upfront and infinitely cheaper later.
Foundations that work bilingual
Typography: choose Latin and Arabic typefaces designed to coexist. Match x-height, weight balance, optical sizing.
Spacing: use ratio-based rather than absolute spacing. 8/16/24/32 grids work better in RTL than fixed pixel values.
Color: define colours by role (surface, text, action) not by visual appearance. This lets the system adapt to dark mode and accessibility variations cleanly.
RTL components from the start
Every component needs to mirror cleanly in RTL. Buttons with leading icons reverse to trailing icons. Navigation that flows left-to-right reverses. Cards with image-then-text reverse to text-then-image.
Build this in from day one. Retrofitting RTL into a system designed LTR-only typically costs 30-50% of the original system build.
Component documentation that scales
Each component needs: visual examples in both directions, do/don't usage rules, code examples in HTML/CSS or React, accessibility notes, and translation notes for sensitive copy.
Skip these and the system becomes inconsistent within 6 months as multiple teams interpret it differently.
Localisation as a system property
Date formats, number formats, currency display — these vary across markets. Build them into the system as configurable rather than hardcoded.
Saudi vs UAE vs French vs UK conventions differ. A system that handles all four cleanly is worth 10x one that hardcodes one.
Maintenance and governance
A design system without active maintenance becomes a wishlist. Assign at least 0.5 FTE to system maintenance for any company over 50 people.
Quarterly system reviews. Annual major revisions. Continuous component updates. The system is a product, not a project.
Need a brand that performs?
Start a ProjectFrequently asked
- How long does a multi-region design system take to build?
- 12-24 weeks for foundation. Continuous evolution after that.
- Should our design system be bilingual from day one?
- If you operate in both markets eventually, yes. Retrofitting later costs more.
- What design system tools work for RTL?
- Figma is fine for design. For code, Tailwind CSS handles RTL well. Build component libraries with logical properties (margin-inline-start) not directional ones (margin-left).