الأساسيات
الأيقونات
نظام أيقونات واحد لكل عائلة ميركاتو: أيقونات جوجل الرسمية (Material Symbols) بأسلوب Rounded ووزن 400، بأسلوبين فقط: عادي (مفرّغ) ومملوء. مستضافة ذاتيا وتُعرَض بالحرف الرمزي. لا نرسم أيقونة أبدا.
القاعدة
كل أيقونة في النظام تأتي من مكتبة Material Symbols الرسمية من جوجل، بأسلوب Rounded ووزن 400. لا نرسم مسارات SVG يدوية، ولا نخلط مجموعات مختلفة. هذا يضمن وزنا بصريا موحّدا وتناسقا كاملا بين التطبيقات الستة.
كيف نعرضها
الأسلوبان
لكل أيقونة أسلوبان: العادي (مفرّغ) للحالة الافتراضية والخاملة، والمملوء للحالة النشطة أو المختارة أو الحالة الصلبة. نفس الاسم، نفس الوزن، يتغيّر التعبئة فقط.
| الأيقونة | عادي | مملوء |
|---|---|---|
| homeالرئيسية | ||
| favoriteالمفضّلة | ||
| starالتقييم | ||
| notificationsالتنبيهات | ||
| shopping_cartالسلة | ||
| sellالمنتجات |
المكتبة (98)
المكتبة المشتركة الكاملة المستخدمة عبر عائلة المنتجات (Agent وسلامتي وB2B وinsight)، مجمّعة حسب الوظيفة. الاسم أسفل كل أيقونة هو الحرف الرمزي الذي يُكتب في الكود؛ انسخه بزر النسخ، أو نزّل ملف الـSVG بزر التنزيل.
التنقّل والهيكل
التجارة والكتالوج
الطلبات والفوترة
العملاء والفرق
التواصل والتنبيهات
الإجراءات والحالة
الرمز العلامي
استثناء واحد: عملة ميركاتو. هذا رمز علامي خاص، لا يأتي من مكتبة الأيقونات ولا يُعاد رسمه. يحمل لون العلامة الكهرماني الثابت ويُشحن دائما كهذا الشكل المتجهي بالضبط، حيثما تظهر النقاط أو الرصيد.
عملة ميركاتو
/brand/mercato-coin.svg · #FFAA00
رمز علامي، ليس من Material Symbols.
الأحجام
سلّم أحجام محدود يتماشى مع طبقتي المسافات والخطوط. الأيقونة تأخذ حجمها من font-size ولونها من النص المحيط.
| الحجم | معاينة | الاستخدام |
|---|---|---|
| 18px | داخل النص والشارات | |
| 20px | الأزرار وحقول الإدخال | |
| 24px | أزرار الأيقونات والتنقّل | |
| 28px | بطاقات الإحصاء والعناوين |
افعل ولا تفعل
- اختر دائما من Material Symbols الرسمية، أسلوب Rounded ووزن 400.
- استخدم المملوء للحالة النشطة أو المختارة، والعادي لغيرها.
- اضبط الحجم بـ font-size واللون بـ currentColor ليرث لون النص.
- لا ترسم أيقونة بمسار SVG يدوي أبدا.
- لا تخلط مجموعات أيقونات أو أوزانا مختلفة في الشاشة نفسها.
- لا تعتمد على الأيقونة وحدها لنقل حالة؛ أضف تسمية أو لونا.
إمكانية الوصول
- الأيقونة الزخرفية بجانب نص تأخذ aria-hidden، فلا يكرّرها قارئ الشاشة.
- الأيقونة التي تقف وحدها كإجراء (زر أيقونة) تأخذ aria-label عربية واضحة.
- لا تنقل الحالة باللون أو التعبئة وحدهما؛ أرفق نصا كلما دلّت على معنى.