Locate Manifesto

دليل الكويت – نظام الألوان | Kuwait Directory Color Manifesto
النسخة 1.0 – مايو 2025

نظام الألوان الشامل
دليل الكويت للإعلانات

المرجع الوحيد لجميع قرارات الألوان عبر كل قسم ومشروع. مبني على نظام MZ Design Manifesto مع تكييف كامل للغة العربية واتجاه RTL.

مجموعات الألوان الثلاثة

🔵 الأساسي — الأزرق الداكن (Primary Navy Blue)

اللون الرئيسي للعلامة التجارية / الأزرار الرئيسية / الحالات النشطة / هوية العلامة

primary-100
#E8EEF3
خلفيات الشارات
primary-200
#B8C9D9
لمسات خفيفة
primary-300
#7A9ABF
أزرار خفيفة
primary-400 ★
#2C4563
الزر الرئيسي
primary-500
#233952
حالة التمرير
primary-600
#1A2B3D
أقسام داكنة
primary-700
#0F1920
خلفية عميقة
🟠 اللون المميز — البرتقالي الدافئ (Accent Warm Orange)

الأيقونات / النجوم / الشارات / التمييزات / الزخرفة فقط – ليس للخلفيات الكبيرة أو الأزرار

accent-100
#FEF3E7
خلفية الشارة
accent-200
#FCD9A8
أيقونات النجوم
accent-300 ★
#F5A623
اللون الرئيسي
accent-400
#D98E1C
التسطير
accent-500
#B87616
نص داكن
accent-600
#8A5710
نص الشارة
accent-700
#5C3A0B
نص عميق
⬜ المحايد — الرمادي الدافئ (Neutral Warm Gray)

جميع النصوص / الحدود / خلفيات البطاقات / خلفيات الأقسام – العمود الفقري للموقع

neutral-100 ★
#F7F8FA
خلفية القسم
neutral-200
#E5E7EB
خلفية بديلة
neutral-300 ★
#D1D5DB
حدود البطاقة
neutral-400
#9CA3AF
حدود قوية
neutral-500 ★
#6B7280
نص ثانوي
neutral-600 ★
#4B5563
نص الجسم
neutral-900 ★
#1F2937
العناوين

القواعد الـ 11 غير القابلة للتفاوض

يجب أن يمر كل قرار عبر هذه القواعد قبل الإطلاق. لا استثناءات.

1

الخلفيات (Backgrounds)

✓ قسم عادي → neutral-100

✓ قسم بديل → أبيض

✓ فاصل CTA → primary-600

✕ أبدًا البرتقالي (accent) كخلفية

background: var(–mz-neutral-100); /* ✓ */ background: var(–mz-bg-white); /* ✓ */ background: var(–mz-accent-300); /* ✕ NEVER */
2

النصوص (Text)

✓ عنوان → neutral-900

✓ فقرة → neutral-600

✓ ثانوي → neutral-500

✕ أبدًا اللون الأساسي (primary) لأي نص

color: var(–mz-neutral-900); /* Headings ✓ */ color: var(–mz-neutral-600); /* Body ✓ */ color: var(–mz-primary-400); /* ✕ NEVER for text */
3

الأزرار (Buttons)

✓ رئيسي → primary-400 bg + نص أبيض

✓ ثانوي → حدود + خلفية خفيفة فقط

✕ زر رئيسي واحد فقط لكل قسم

✕ أبدًا البرتقالي (accent) كلون زر

.btn-primary { background: var(–mz-primary-400); /* ✓ */ } .btn-wrong { background: var(–mz-accent-300); /* ✕ NEVER */ }
4

استخدام اللون المميز (Accent)

✓ أيقونات، نجوم، شارات، تسطير

✓ كلمة واحدة مميزة في العنوان

✕ أبدًا فقرات نصية كاملة

✕ أبدًا مساحات خلفية كبيرة

✕ أبدًا أزرار من أي نوع

5

البطاقات (Cards)

✓ خلفية → دائمًا بيضاء

✓ حدود → neutral-300

✓ عنوان → neutral-900

✓ نص → neutral-600

✕ أبدًا اللون الأساسي (primary) لخلفية البطاقة

.card { background: var(–mz-bg-white); /* ✓ ALWAYS */ border: 1px solid var(–mz-neutral-300); }
6

التسلسل الهرمي (Hierarchy)

مهم → primary | محتوى → neutral | تفاصيل → secondary neutral | لمسات → accent

7

ميزانية الألوان (Color Budget)

✓ primary → حد أقصى 1-2 لكل قسم

✓ accent → حد أقصى 1-2 لكل قسم

✓ neutral → غير محدود

✕ 3+ عناصر ملونة في قسم واحد

8

تنوع الأقسام (Section Variation)

استخدم الدرجات: 100 / 200 / 300 / 600

نفس الدرجة = نفس الغرض دائمًا

100 = لون خلفية خفيف | 600 = خلفية قسم داكن

9

الأقسام الداكنة (Dark Sections)

✓ تُستخدم للـ CTA أو الفاصل البصري

✓ مرة واحدة كحد أقصى لكل 3-4 أقسام

✓ نص: عناوين بيضاء + neutral-300

✓ زر: primary-300 أو أبيض

10

حالات التمرير (Hover States)

✓ زر رئيسي → درجة أغمق + رفع

✓ زر شبح → تظهر خلفية neutral-100

✓ بطاقات → ظل + translateY(-2px)

✕ تغيير جذري في اللون عند التمرير

.btn-primary:hover { background: var(–mz-primary-500); /* One stop darker */ transform: translateY(-1px); }
⭐

القاعدة الذهبية (Golden Rule)

✓ مهم → primary

✓ نص → neutral

✓ انتباه → accent

عرض المكونات

الأزرار (Buttons)
بطاقات الأقسام (Category Cards)
🏠
عقارات
5 إعلانات
🚗
سيارات
8 إعلانات
🍽️
مطاعم
4 إعلانات
🏥
خدمات طبية
6 إعلانات
بطاقات المحتوى (Content Cards)
عقارات ★★★★★

شقة فاخرة في السالمية

شقة مكونة من 3 غرف نوم و2 حمام مع إطلالة رائعة على البحر. موقع مميز بالقرب من جميع الخدمات.

منذ ساعتين • السالمية
سيارات مميّز

تويوتا كامري 2023

سيارة بحالة ممتازة، صيانة دورية منتظمة، تأمين شامل ساري المفعول.

منذ 3 ساعات • حولي
مطاعم ★★★★☆

مطعم الكويت التقليدي

أشهى المأكولات الكويتية الأصيلة، أجواء عائلية راقية، خدمة ممتازة.

منذ يوم • المنقف
الشارات والأيقونات (Badges & Icons)
جديد مميّز
🏠
⭐
★★★★★

ابدأ رحلتك مع دليل الكويت اليوم

انضم إلى آلاف المستخدمين الذين يثقون بدليل الكويت للعثور على أفضل الخدمات والإعلانات في دولة الكويت.

متغيرات CSS (CSS Variables)

انسخ والصق هذا الكود في ملف CSS الخاص بك 

:root {
  /* Primary — Navy Blue (الأزرق الداكن) */
  --mz-primary-100: #E8EEF3;
  --mz-primary-200: #B8C9D9;
  --mz-primary-300: #7A9ABF;
  --mz-primary-400: #2C4563; /* ★ Main brand */
  --mz-primary-500: #233952; /* Hover */
  --mz-primary-600: #1A2B3D; /* Dark sections */
  --mz-primary-700: #0F1920;
  
  /* Accent — Warm Orange (البرتقالي الدافئ) */
  --mz-accent-100: #FEF3E7;
  --mz-accent-200: #FCD9A8;
  --mz-accent-300: #F5A623; /* ★ Main accent */
  --mz-accent-400: #D98E1C;
  --mz-accent-500: #B87616;
  --mz-accent-600: #8A5710;
  --mz-accent-700: #5C3A0B;
  
  /* Neutral — Warm Gray (الرمادي الدافئ) */
  --mz-neutral-100: #F7F8FA; /* Section bg */
  --mz-neutral-200: #E5E7EB;
  --mz-neutral-300: #D1D5DB; /* Borders */
  --mz-neutral-400: #9CA3AF;
  --mz-neutral-500: #6B7280; /* Secondary text */
  --mz-neutral-600: #4B5563; /* Body text */
  --mz-neutral-900: #1F2937; /* Headings */
  
  /* Semantic */
  --mz-bg-white: #FFFFFF;
  
  /* Shadows */
  --mz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --mz-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --mz-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

المبادئ الأساسية

⚡ اجعل المحايد محايدًا

ألوان الشعار (primary + accent) تتعامل مع هوية العلامة التجارية. الألوان المحايدة توفر مساحة للتنفس وسهولة القراءة. المواقع التي تلوّن كل شيء تبدو فوضوية.

🎯 قاعدة واحد لكل قسم

زر رئيسي واحد فقط (primary-400) لكل قسم. استخدم الأزرار الثانوية (ghost) للإجراءات الإضافية. هذا يخلق تسلسلًا هرميًا واضحًا.

🚫 البرتقالي ليس للأزرار

اللون المميز (accent) هو للزينة فقط: أيقونات، نجوم، شارات. أبدًا للأزرار أو الخلفيات الكبيرة. هذا يحافظ على التمييز البصري.