A design system that starts in Arabic

Lucidya’s products are used in Arabic and English every day. Before the design system, each team mirrored its own screens at the end of a project, and each did it a little differently.

The problem

Components were drawn in English first and patched for Arabic later, so spacing, icons and numbers drifted from one product to the next.

What we built

One component library where every part knows its reading direction. Layout uses start and end, only icons that show a direction flip, and numbers stay left to right.

The Insights dashboard in English, with the sidebar on the left — The same screen in both directions. Drag or use the arrow keys.

The same dashboard in Arabic, with the sidebar on the right and the numbers unchanged — The same screen in both directions. Drag or use the arrow keys.

The components switching from English to Arabic.

In code

Logical properties carry most of the work, so a component flips with the page:

CSS

.card {
  padding-inline: 16px;
  border-inline-start: 3px solid var(--accent);
  text-align: start;
}

Designing the Arabic screen first costs nothing extra, and it saves a full round of fixes before launch.

Tamara Jaber

Every component is checked for

Start and end instead of left and right
Icons that show a direction mirror; the rest don’t
Numbers and codes isolated with bdi
Room for Arabic text to grow

A design system that starts in Arabic

The problem

What we built

In code

Every component is checked for

More case studies

Social listening dashboards

AA in every release