Designing systems for the Arabic web

The RTL misconception

Most teams treat Arabic as a translation step at the end of a project. Swap the text, flip a few elements, ship. This approach consistently produces interfaces that feel like they were designed for one direction and awkwardly reversed for another.

What Arabic-first design actually means

Arabic-first means starting your design system with bidirectionality as a first-class concern. Every spacing decision, every component, every icon needs a mental model for how it behaves in both directions.

Logical properties in CSS

The shift from physical CSS properties (left, right, margin-left) to logical properties (inline-start, inline-end, margin-inline-start) is the single most impactful technical change for RTL support. Tailwind v4 supports logical properties natively.

Typography and font pairing

Baguede and Inter — our display and body fonts — both need Arabic counterparts. We use Tajawal as the Arabic body font, which pairs well with Baguede's weight distribution.

Motion and directionality

Animations that slide from left to right in LTR should slide from right to left in RTL. This applies to carousels, transitions, and any directional affordance. Framer Motion makes this manageable with dir detection.

Conclusion

Arabic-first design is not harder — it is just more deliberate. The payoff is a product that feels native to Arabic speakers, not translated for them.