Design Systems That Scale Across Languages
Lessons from shipping an Arabic-first, RTL-default product without forking the design system.
Logical CSS properties — inline-start, inline-end, margin-inline — let one set of components mirror cleanly between Arabic and English. Pair that with OKLCH design tokens and dark mode falls out for free. The result is a single source of truth that adapts instead of duplicating.
Stop thinking left and right
Physical properties pin a layout to one direction. The moment you write margin-left, you have quietly decided the component only works in LTR. Logical properties describe intent — start and end — and let the document direction decide which is which. One component, two directions, zero forks.
A design system that can't mirror isn't a system — it's two codebases waiting to drift apart.
OKLCH makes dark mode honest
Because OKLCH separates lightness from hue and chroma, you can flip a theme by adjusting a single channel and trust that contrast holds. Hover and active shades derive from the same token instead of being eyeballed, so the palette stays coherent as it grows.
- One token set drives light, dark, and every interactive state.
- Logical utilities mirror RTL/LTR with no conditional CSS.
- New components inherit accessibility instead of re-litigating it.
