Arabic Design — clean Arabic in AI-generated UI

Arabic is a cursive, connected script: letters join, and diacritics (ً ّ َ) sit above/below the baseline. Most AI-generated CSS is tuned for Latin type — and that's exactly what breaks Arabic. Apply these rules by default whenever the design contains Arabic; don't wait to be told.

Rule 1 — NEVER negative letter-spacing on Arabic (the #1 bug)

Latin design trends love tight tracking (letter-spacing: -0.02em). On Arabic, negative tracking overlaps the letter joins and crushes words into an unreadable blur. Positive tracking is just as wrong — it disconnects letters that must join.

/* ❌ WRONG — crushes connected letters into a blur */
h1 { letter-spacing: -1.5px; }        /* element contains Arabic */

/* ✅ RIGHT */
h1 { letter-spacing: normal; }        /* or 0 — always, for any element containing Arabic */