Consumer discovery
Image-first، category visuals، product rails، occasions، gifting وbrands. تنوع حقيقي في rhythm بدل كروت متساوية.
Kidzy Brand Commerce System · DS-R2
هوية Kidzy مرحة، لكن ليست فوضوية.
Turquoise يقود النظام، وألوان اللوجو الأخرى accents مضبوطة. العربية هي مصدر التصميم، والوضوح أهم من استعراض الخطوط أو المؤثرات. Consumer غني بصريًا؛ Checkout هادئ؛ Admin عملي وكثيف.
Readable Arabic
WCAG 2.2 AA intent
COLOR SYSTEM
ألوان مأخوذة من البراند ومحوّلة إلى semantic tokens
Brand teal نفسه مناسب للpresence البصري، لكن الـprimary الداكن هو الأفضل للأزرار والنص الأبيض بسبب contrast. Orange، green وmagenta accents وليست themes مستقلة.
TYPOGRAPHY
هرمية محسوبة بدون عناوين عملاقة
Baloo Bhaijaan 2 يستخدم كـdisplay accent فقط. Tajawal هو أساس UI، forms، checkout، tables والنصوص الطويلة.
Display accent · 40pxعالم الألعاب يبدأ هنا
Section heading · 28pxاختر حسب العمر أو المناسبة
Body · 17px / generous line-heightالنص الأساسي مصمم ليظل مقروءًا على الهاتف والكمبيوتر بدون الحاجة لتكبير الشاشة أو الاقتراب منها.
COMPONENT GRAMMAR
أمثلة أساسية
الـradii والـsurfaces لطيفة، لكن الـpills ليست الحل لكل عنصر، والـshadows مقيدة.
متاح اليومسعة محدودة
ابحث عن لعبة، علامة أو هدية…
Product card example79 ر.ق
SURFACE-SPECIFIC RULES
نفس البراند، ثلاث درجات مختلفة من الكثافة
Checkout
White/light surfaces، step context، selected states، delivery groups، totals وCTA واضح. لا promotions تشتت الدفع.
Admin
Persistent RTL navigation، tables مستقرة، grouped forms، toolbars واضحة وbrand accents محدودة.
READABILITY LOCK
القواعد التي تمنع تكرار مشكلة النسخة الأولى من التقرير
التقرير نفسه أصبح مثالًا على ما نطلبه: أحجام مقروءة، عرض محتوى محدود، صفحات مستقلة، وتدرّج واضح.
30
Mobile page H1
كبير بما يكفي للهرمية، بدون أن يملأ نصف الشاشة.
16.5
Mobile body
النص الرئيسي لا ينزل لمقاسات مرهقة.
1240
Max content width
منع السطور الطويلة جدًا على الشاشات الواسعة.
44+
Touch target
الأزرار والفلاتر مناسبة للمس.
RTL ليس Flip في آخر المشروع
navigation order، drawers، steppers، arrows، forms، tables والمحتوى ثنائي الاتجاه يجب أن تُصمم وتُختبر بالعربية من البداية.
AR
Arabic first-class mode
لا paired Arabic/English headings في نفس الشاشة. English/LTR parity مرحلة تنفيذية مقابلة، لا نسخة ملصوقة فوق العربية.
↔
Mixed Latin data
SKU، البريد، URL، brand names وقيم تقنية تبقى sub-runs واضحة داخل layout عربي.