Design Systems That Support RTL Without Afterthoughts

Use logical properties, not left/right

Prefer margin-inline-start, padding-inline-end, and border-inline-start over physical left/right so layouts flip correctly for Arabic without a separate RTL stylesheet fork.

Yash at Shriram builds components in Figma with mirroring rules documented before engineering starts. "Flip icon, don't flip number" is a rule on every handoff spec.

Typography for Hindi and Arabic

Test Hindi and Arabic early — line lengths, ascenders, and font metrics change hierarchy. A headline that fits in English may wrap to four lines in Hindi and break your hero layout.

Load subset fonts for Devanagari and Arabic scripts. Measure LCP impact — font chains are a common hidden CWV killer on multilingual sites we audit.

Components that expand gracefully

Buttons, nav items, and cards need min-width flexibility and truncation rules — not fixed pixel widths designed for English copy. Storybook stories should include long Hindi and Arabic strings by default.

RTL mirroring rules

Mirror navigation and back arrows; do not mirror numbers, charts, or media playback controls. Document exceptions in the design system so engineers do not guess.

Test with real content, not Lorem Ipsum

Lorem ipsum hides layout bugs that appear the first time a client pastes real Arabic marketing copy. Shriram design reviews use production-length strings from day one.

Handoff engineers can trust

Specs include responsive breakpoints, interaction states, empty states, and locale variants. Praveen reviews feasibility before stakeholders sign off — fewer rewrite cycles after engineering starts.