nezam-typeui-masri-wireframe-typography

skill_id	typeui-masri-wireframe-typography
name	nezam-TypeUI Masri Wireframe Typography
tier	3
description	Arabic-first wireframe typography system. Combines typeui-main's modular scale with Masri letterforms (Cairo, IBM Plex Sans Arabic) and the +30% RTL expansion rule from DESIGN.md §9.
version	1.0.0
updated	"2026-05-28T00:00:00.000Z"
changelog	["1.0.0 — Initial release. Bridges typeui-main + masri-design-assets for the renderer."]
references	[".cursor/design/references/typeui-main/",".cursor/design/references/masri-design-assets/","DESIGN.md"]
breaking_changes	false

TypeUI Masri Wireframe Typography

Charter

Arabic UI typography is its own design problem — not a translation. This skill defines the type system for any wireframe that renders Masri content.

Type stack

Slot	Latin stack	Masri stack
Display	Inter, system-ui, sans-serif	'Cairo Display', 'IBM Plex Sans Arabic', system-ui, sans-serif
Title	Inter	'Cairo', 'IBM Plex Sans Arabic', system-ui
Body	Inter	'Cairo', 'IBM Plex Sans Arabic', system-ui
Label	Inter	'Cairo', 'IBM Plex Sans Arabic', system-ui
Mono	JetBrains Mono, Geist Mono, ui-monospace	identical (Arabic mono is rare; fall back to Latin mono)

Scale (modular, picked up from typeui-main)

Base = 13px (0.8125rem). Ratio = 1.250 (major third).

Token	Latin px	Masri px (+30%)	Use
text-xs	11	14	meta, captions
text-sm	13	17	body default
text-base	16	21	comfortable read
text-lg	18	23	sub-headlines
text-xl	20	26	section titles
text-2xl	24	31	page titles
text-3xl	30	39	hero
text-4xl	36	47	display

The renderer applies the +30% scale automatically when dir="rtl" AND locale='ar-EG'.

Letter-spacing rules

Locale	Rule
Latin	tracking-tight (-0.02em) on display, tracking-normal on body, tracking-wide on uppercase labels
Masri	Always tracking-normal. Arabic letterforms break visually under positive or negative tracking. Uppercase tracking does not apply (no case in Arabic).

Line height

Slot	Latin	Masri
Display	1.1	1.4 (Arabic diacritics need vertical room)
Title	1.3	1.5
Body	1.5	1.7
Label	1.3	1.4

Numerals

• Locale ar-EG + region EG → Eastern Arabic numerals (٠١٢٣٤٥٦٧٨٩)
• All other Arabic regions → Western Arabic (0–9) — this is regional, not religious
• Tabular figures (font-variant-numeric: tabular-nums) MUST be on for any data table or chart axis

Mixed-script handling

When a Masri page renders a Latin brand name, technical term, or URL:

• Wrap in <span dir="ltr"> to prevent direction inheritance breaks
• Keep the Latin term at the same x-height as surrounding Arabic (typically scale Latin by 0.92)
• Never italicize Latin inside Arabic context (visual clash)

Hero example

<h1
  className={cn(
    'font-display',
    locale === 'ar-EG'
      ? 'text-4xl leading-[1.4] tracking-normal'
      : 'text-3xl leading-[1.1] tracking-tight'
  )}
  dir={locale === 'ar-EG' ? 'rtl' : 'ltr'}
>
  {DUMMY.headings[0]}
</h1>

Anti-patterns

• ❌ Applying tracking-tight to Arabic display
• ❌ Using Latin numerals in a Masri price column
• ❌ Mixing Latin and Arabic in the same <span> without dir attribute
• ❌ Letting line-height stay at 1.1 for Arabic body — diacritics will clip

Validation

Visual: render hero block in both locales, screenshot, compare optical balance. Arabic should never feel cramped vertically.

Programmatic:

pnpm --filter design-hub test -- --testNamePattern="masri typography"
pnpm run check:tokens

Outputs

• src/components/preview/typography.tsx — locale-aware text components
• src/components/preview/dummy-content-masri.tsx — Masri copy bank
• tailwind.config.ts — Masri font stack additions