A Design System That Truly Works in Arabic and English
A bilingual experience is more than translated copy; direction, spacing, type, and components must respond to each language.
A bilingual experience is more than translated copy; direction, spacing, type, and components must respond to each language.
The decision that should precede delivery
Use logical CSS properties and test components with real Arabic copy early. Avoid hard-coding direction into icons, and review headings, empty states, and validation in both languages.
Test the sequence with real copy in both directions before polishing decoration. Record where users hesitate, what information is missing, and whether the task works by keyboard and on mobile.
A reviewable checklist
- Logical inline and block properties
- Readable type in both scripts
- Keyboard testing
- Mobile review in both directions
Review questions before scaling
- Has the team documented: Logical inline and block properties?
- Has the team documented: Readable type in both scripts?
- Has the team documented: Keyboard testing?
Keep each answer beside the decision, owner, and review date. If the required signal is unavailable, reduce the experiment instead of expanding delivery scope.
Turn the insight into an action
Choose one decision you can apply this week, assign an owner and success signal, then review the result before expanding scope.