نظام التصميم

الألوان

• --black · #000000خلفية الصفحاتالنص الأبيض ⁦21:1⁩
• --volt · #ECF234الإجراء الأساسي والمكعبات المميزة فقطعلى الأسود ⁦17.3:1⁩ · أبداً كنص على الأبيض (⁦1.2:1⁩)
• --white · #FFFFFFالنص الأساسيعلى الأسود ⁦21:1⁩
• --mute · #A6A6A6النص الثانوي (على الأسود فقط)على الأسود ⁦8.6:1⁩ · على السطح ⁦7.6:1⁩
• --surface · #141414اللوحات والنماذجالأصفر عليه ⁦15.2:1⁩
• --line · #2A2A2Aالفواصل والحدودزخرفي (⁦1.5:1⁩)
• --danger · #FF7A6Bأخطاء النماذجعلى الأسود ⁦8.2:1⁩ · على السطح ⁦7.2:1⁩

الخط والأحجام

Tajawal 400 / 500 / 700 / 900 من brand/fonts — بدون Google Fonts. الأرقام والكلمات اللاتينية داخل النص العربي معزولة: هاتف +963 945 006 797، جهاز Autel، الساعة 09:00.

h1 · 76 / 40px

مركز صيانة متكامل

h2 · 48px

خدماتنا

h3 · 34px

فحص كهربائي بأحدث الأجهزة

h4 · 24px

ماذا تشمل الخدمة

lead · 20px

احجز موعدك خلال دقيقة واحصل على تأكيد عبر واتساب.

body · 17px

نعمل من السبت إلى الخميس، والطوارئ عبر الهاتف حتى منتصف الليل.

عادي 400متوسط 500عريض 700أسود 900

المسافات والزوايا

• 8px
• 16px
• 24px
• 32px
• 48px
• 64px
• 80px

زوايا: 12px للعناصر التفاعلية، 20–24px للوحات. هامش الصفحة 72px على الحاسوب و16px على الموبايل.

الأزرار

زر أساسي واحد فقط في كل شاشة. الأصفر للإجراء الأساسي والحالة النشطة.

حقول الإدخال

البطاقات

المكعبات المميزة والحركة

حركة واحدة فقط عند أول تحميل للموقع: تنزلق المكعبات ثم «يضيء» الشعار في الترويسة. لا تتكرر عند التنقل، وتُلغى كلياً عند تفعيل «تقليل الحركة» في النظام. تُستخدم المكعبات مرة واحدة في الشاشة (الواجهة، رأس الحجز، صفحة 404).

الأيقونات

• phone
• whatsapp
• calendar
• clock
• map-pin
• facebook
• menu
• close
• arrow-forward
• check

الترويسة والتذييل والشريط السفلي

الترويسة والتذييل حول هذه الصفحة حقيقيان. صغّر النافذة إلى 375px لترى القائمة المنسدلة والشريط السفلي الثابت (اتصال · واتساب · احجز موعد).