شحن لكل مصر والإمارات — مجاني للطلبات الكبيرة ضمان على كل قطعة حتى 12 شهر ادفع كاش عند الاستلام
Design System v1.0

نظام التصميم

الألوان والخطوط والمسافات وكل المكونات بحالاتها — مأخوذة مباشرة من كود الموقع.

01 — الألوان

الأحمر لا يتعدى 10% من أي شاشة. ممنوع نص أحمر عادي على أسود (للعناوين واللمسات بس). كل النصوص بتحقق WCAG AA.

--red-600
#D7141A
الأزرار الأساسية، الأسعار، الحالات النشطة

--red-700
#B00F14
hover/pressed للأزرار

--red-50
#FDECEC
خلفيات التنبيه والبادجات

--black-900
#0E0E10
الهيدر، الفوتر، الأقسام الداكنة

--black-800
#1A1A1D
كروت داكنة

--black-700
#2B2B30
حدود على الداكن

--gray-500
#6B6B73
نص ثانوي

--gray-200
#E4E4E7
حدود على الفاتح

--gray-100
#F4F4F5
خلفيات أقسام فاتحة

--white
#FFFFFF
الخلفية الأساسية

--success
#16A34A
متوفر، مناسب لعربيتك

--warning
#F59E0B
مخزون قليل

02 — الخطوط

Cairo (AR) • Rajdhani + Inter (EN) • JetBrains Mono (codes)

Display 64/36الجير الأوتوماتيك

H1 48/30عنوان رئيسي

H2 36/26عنوان قسم

H3 24/20عنوان فرعي

H4 20/18عنوان كارت

Body L 18/16كل قطعة بتتفحص قبل ما تخرج من عندنا.

Body 16/15نص المحتوى الأساسي بارتفاع سطر 1.7 للعربي.

Small 14/13ملاحظات وتسميات

Mono6HP19 • DQ200 • 0B5 927 156 E

03 — المسافات والأشكال والظلال

4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128
radius 8 / 14 / 20 / full — shadow 1 / 2 / 3 — dark glow

04 — الأزرار

primary • secondary • ghost • whatsapp • loading • disabled • sizes S/M/L
رابط بسهم

05 — الحقول

اكتب رقم موبايل صحيح.

الموبايل بكود الدولة
الكمية

06 — البادجات والحالات

جديد استيراد مبرمج -15% الأكثر مبيعًا وصل حديثًا ATCVTDCTZFFT
متوفر باقي 1 فقط غير متوفر مناسبة لعربيتك Toyota Camry 2016 اتأكد من التوافق 6HP19 (18)
معلومة
  • رسالة خطأ واضحة باللغتين

07 — المكونات

product card • category card • vehicle finder (sidebar) • skeleton
فالفات بودي4
مش لاقي عربيتك؟ اطلبها
tabs • accordion • empty state • toast
سؤال في أكورديون

الإجابة هنا.

حالة فاضية

كل حالة فاضية فيها مخرج: طلب القطعة أو واتساب.

اتضافت للسلة
حصلت مشكلة

08 — الأيقونات

09 — الحركة

hover 150ms • UI 250ms • reveal 400–600ms • cubic-bezier(.2,.8,.2,1) • stagger 60ms • prefers-reduced-motion respected

محتاج مساعدة؟