الجادر الأصلي — نظام التصميم

١ · الألوان COLOR

أخذنا عيّنة من بكسلات اللوغو مباشرة: الذهبي متوسطه #BF9A58 بين ظلّ #9E773B وإضاءة #E6C074، والفضي بين #A29F9F و#EDECEA، والخلفية #0D0D0D. هذه أرقام مقيسة لا مقدّرة.

الذهبي — والمشكلة التي يخلقها

القاعدة الحاكمة: ذهبي اللوغو #BF9A58 تباينه على الأبيض 2.63 فقط — أي أقل من نصف الحد الأدنى المطلوب (4.5). لذلك:
• على الأسطح الداكنة: استخدم #BF9A58 أو #E6C074 بحرّية.
• على الأسطح الفاتحة: النص الذهبي يكون #7A5E29 دائمًا (تباين 6.07).
• الزر الذهبي نصّه أسود #0D0D0D — لا أبيض. الأبيض على الذهبي = 2.1 وممنوع.

الحبر والفضي والمحايد

الألوان الدلالية

✅ افعل الذهبي للفعل الأساسي الواحد في الشاشة (أضف للسلة، أكّد الطلب).
الأسود للأفعال الثانوية القوية.
الرمادي المحايد لكل شيء آخر.

❌ لا تفعل لا تستخدم الذهبي لأكثر من فعل واحد في الشاشة — يفقد معناه فورًا.
لا تكتب نصًا ذهبيًا على أبيض.
لا تستخدم التدرّج المعدني في الأزرار الصغيرة.

٢ · الخط والمقاسات TYPE

الخط IBM Plex Sans Arabic. اختيرَ لأن قراءته عند 13–15px على شاشة هاتف أوضح من Cairo، ولأن مقابله اللاتيني مصمَّم معه — وهذا مهم هنا تحديدًا لأن مئات أسماء المنتجات إنجليزية (WIPER BLADE 22INCH) وتظهر ملاصقة للعربي في نفس السطر.

ارتفاع السطر في العربي 1.75 لا 1.5. الحروف العربية لها امتدادات فوق وتحت خط الأساس (ألف مقصورة، هاء، جيم)، فالمسافة التي تكفي اللاتيني تُحدث تصادمًا في العربي.

الأرقام

الأرقام إنجليزية وجدولية (tabular-nums) ومعزولة اتجاهيًا (unicode-bidi:isolate) — وإلا انكسر ترتيب السعر بجانب النص العربي، ولم تتراصف الأعمدة في جداول لوحة التحكم.

شامبو رغوي	18,000 د.ع
واكس سيراميك	125,000 د.ع
ماسحة 22 إنج	12,500 د.ع

٣ · المسافات والحواف والظل SPACE

نصف القطر

الارتفاع

gold

٤ · المكوّنات COMPONENTS

الزر

النوع	متى	الخلفية	النص	ملاحظة
gold	الفعل الأساسي الوحيد في الشاشة	`--gold-500`	`--ink-950`	واحد فقط لكل شاشة
primary	فعل قوي غير تجاري (تأكيد، حفظ)	`--ink-950`	أبيض	—
outline	بديل متساوٍ (أضف للسلة بجانب اطلب الآن)	شفاف	`--ink-900`	—
ghost	ثانوي، داخل جداول وبطاقات	شفاف	`--n-500`	—
danger	إتلاف لا رجعة فيه	`--bad-700`	أبيض	يحتاج تأكيدًا دائمًا

الحالات: افتراضي · تحويم · ضغط (translateY(1px)) · تركيز (إطار ذهبي 3px بإزاحة 2px) · معطّل (شفافية 45%) · تحميل (دوّار + النص يبقى). لوحة المفاتيح: Tab للوصول، Enter/Space للتفعيل. قارئ الشاشة: يُنطق كـ button مع نصّه؛ الأزرار الأيقونية تحمل aria-label إلزاميًا.

الحقل

الاسم الكامل

رقم الهاتف نرسل عليه رمز التحقق

المحافظة

المنطقة ⚠ المنطقة مطلوبة

معطّل

كل حقل له <label> حقيقي مربوط بـ for/id — لا placeholder كبديل عن التسمية. الخطأ يُعلَن بـ aria-invalid + نص مرئي، ولا يعتمد على اللون وحده (رمز ⚠ + كلمات).

الشارة وحالة المخزون

متوفّر آخر 3 قطع غير متوفّر رصيد سالب مع البرق 9 قياسات

قرار تصميمي: لا نعرض رقم المخزون صراحة. تحت 5 قطع نقول «آخر ٣ قطع» — إلحاح صادق بلا كشف المخزون للمنافس.

منتقي الخيارات

السعة

الأصناف التي يخزّنها البيان منفصلة (BIVAL 1L/2L/5L/10L) تُدمج في منتج واحد، وكل خيار يحتفظ برصيده المستقل. الخيار النافد يظهر مشطوبًا لا مخفيًا — لأن إخفاءه يجعل الزبون يظن أن القياس غير موجود أصلًا.

بطاقة المنتج والصورة البديلة

AJAljader Alassli

TURTLE WAX

ترتل واكس كلير فيو — منظف زجاج

7,000 د.ع

الصورة البديلة ليست عيبًا — هي الحالة الافتراضية يوم الإطلاق. صفر صنف من ٥٨٥ له صورة اليوم، والعقد يلزم العميل بـ٢٠٠ صنف مصوَّر فقط. لذلك صُمّمت البطاقة لتبدو متعمَّدة وهي فارغة: خلفية فاتحة دافئة + مونوغرام AJ فضّي‑ذهبي.
لماذا فاتحة لا سوداء: جرّبنا السوداء أولًا — عند ٤٠ بطاقة في الصفحة تتحوّل الشبكة إلى جدار أسود يبتلع المنتجات المصوَّرة القليلة الموجودة. الفاتحة تختفي بأدب.

التنبيه · الحالة الفارغة · التحميل

✅

تم تأكيد الطلب وحجز المخزون.

⚠

٣ استثناءات في مزامنة البيان تحتاج مراجعتكم اليوم.

فشلت المزامنة قبل ٢٢ دقيقة — الوكيل يحاول تلقائيًا.

ℹ

الوكيل يقرأ من البيان ولا يكتب فيه إطلاقًا.

سلّتك فارغة

ابدأ من التصنيفات أو ابحث باسم المنتج.

٥ · قواعد RTL DIRECTION

بدل	استخدم	لماذا
`margin-left / right`	`margin-inline-start / end`	ينقلب تلقائيًا لو أُضيفت لغة LTR لاحقًا، ولا يحتاج ملف CSS ثانيًا
`left / right`	`inset-inline-start / end`	نفس السبب
`top / bottom`	`inset-block-start / end`	اتساق
`text-align:right`	`text-align:start`	نفس السبب
`border-left`	`border-inline-start`	نفس السبب

الأرقام والأكواد تبقى LTR داخل نص RTL. رقم الهاتف 0770 123 4567، كود البيان 1397، ورقم البوليصة BRQ-452100 كلها تحتاج direction:ltr; unicode-bidi:isolate — بدونها ينقلب ترتيب المقاطع بصريًا ويقرأ الموظف رقمًا خاطئًا.

ترتيب لوحة المفاتيح في RTL: Tab يتبع ترتيب الـDOM لا الترتيب البصري. فحين نضع «أضف للسلة» و«اطلب الآن» جنبًا إلى جنب، ترتيبهما في الـHTML يجب أن يطابق الأهمية المقروءة من اليمين لليسار.

٦ · الحركة MOTION

الرمز	المدة	الاستخدام
`--t-fast`	120ms	تحويم، ضغط، تغيّر لون
`--t-base`	180ms	ظهور بطاقة، رفع ظل
`--t-slow`	260ms	ورقة سفلية، درج جانبي، توست
`--ease`	`cubic-bezier(.2,.8,.3,1)` — خروج سريع واستقرار هادئ

كل الحركات تُلغى تحت prefers-reduced-motion. لا حركة تحمل معنى لا يوجد بدونه.

٧ · إمكانية الوصول WCAG 2.1 AA

المعيار	القرار في هذا النظام
1.4.3 تباين النص	≥ 4.5 للنص العادي، ≥ 3 للنص الكبير. الذهبي على فاتح = `#7A5E29` حصرًا.
1.4.11 تباين غير النص	حدود الحقول والأيقونات الوظيفية ≥ 3 مقابل خلفيتها.
1.4.1 اللون ليس الوسيلة الوحيدة	كل شارة حالة فيها نقطة + كلمة، وكل خطأ فيه رمز + نص.
2.1.1 لوحة المفاتيح	كل عنصر تفاعلي يُوصل بـTab؛ الأوراق والدروج تُغلق بـEsc وتُعيد التركيز لمصدر الفتح.
2.4.7 التركيز مرئي	إطار ذهبي 3px بإزاحة 2px، ولا يُلغى أبدًا. على الداكن يصير `#E6C074`.
2.5.5 منطقة اللمس	44×44px حد أدنى لكل هدف — وهذا يقلّل الطلبات الخاطئة على الهاتف قبل أن يكون مسألة امتثال.
2.4.1 تخطّي الكتل	رابط «تخطَّ إلى المحتوى» أول عنصر في الصفحة.
3.3.2 التسميات	label حقيقي لكل حقل؛ الـplaceholder مثال لا تسمية.
1.3.1 البنية	عناوين متسلسلة، جداول بـ`th`، مناطق `header/nav/main/footer`.
2.3.3 الحركة	يُحترم `prefers-reduced-motion`.

٨ · الرموز في الكود TOKENS

هذه الأسماء هي العقد بين التصميم والبرمجة. أي لون في الكود ليس رمزًا = دَين تقني.

الرمز	القيمة	الدور

نظام تصميم «الجادر الأصلي» · مرجع العرض CD-2026-014 نسخة 6 · آب 2026