workbuddy_skills/open-design/design-systems/slack/DESIGN-ar.md

نظام التصميم المستوحى من Slack

Category: الإنتاجية والبرمجيات كخدمة منصة التواصل في بيئة العمل. لون أساسي أوبيرجين، لوحة شعار متعددة النبرات، أسطح فاتحة مع شريط جانبي داكن، دافئة وودية.

1. الطابع البصري والأجواء

تبنى هوية Slack على فكرة أن العمل ينبغي أن يبدو إنسانياً بل ومرحاً بعض الشيء. السطح الأساسي فاتح — مناطق محتوى بيضاء مع شريط جانبي أوبيرجين عميق (#4A154B) — عكس الأدوات التي تُقدّم الأسطح الداكنة. هذا التباين مقصود: الشريط الجانبي هو مرساة تنقل هادئة ودائمة الحضور، بينما منطقة المحتوى مضيئة ومفتوحة.

لوحة الشعار — الأزرق والأخضر والأصفر والأحمر — تظهر أساساً في أيقونة الوسم وسياقات التسويق، وليست مبعثرة عبر واجهة المستخدم. في المنتج نفسه، يستخدم Slack نظام ألوان متحفظاً واحترافياً مع أوبيرجين كمرساة العلامة التجارية الوحيدة.

الخصائص الرئيسية:

• أسطح محتوى تُقدّم الفاتح: أبيض #FFFFFF وشبه أبيض #F8F8F8
• شريط جانبي أوبيرجين عميق #4A154B — العنصر الأكثر تميزاً في واجهة المستخدم للعلامة التجارية
• أربعة ألوان نبرة للشعار (أزرق، أخضر، أصفر، أحمر) تُستخدم باعتدال كنقاط تمييز فحسب
• Larsseit للعناوين (التسويق)، sans-serif النظامي لواجهة المستخدم
• مستدير لكن ليس كرتونياً: نصف قطر 4–8 بكسل في معظم المكونات
• كثيف لكن قابل للتنفس: صفوف رسائل مضغوطة مع تسلسل هرمي واضح للخيوط
• نبرة دافئة وتحادثية — الرموز التعبيرية والتفاعلات والرسوم التوضيحية من الدرجة الأولى

---

2. لوحة الألوان والأدوار

اللون الأساسي للعلامة التجارية

الرمز	Hex	الدور
--color-aubergine	#4A154B	خلفية الشريط الجانبي، لون العلامة التجارية الأساسي
--color-aubergine-dark	#350d36	حالات التمرير على أسطح الأوبيرجين
--color-aubergine-light	#611f69	تمييز العنصر النشط في الشريط الجانبي

ألوان النبرة في الشعار (استخدم باعتدال — للتمييز والأيقونات والتسويق فحسب)

الرمز	Hex	الاسم	الدور
--color-blue	#36C5F0	الأزرق السماوي	أيقونات القنوات، الروابط، حالات المعلومات
--color-green	#2EB67D	الأخضر الزبرجدي	حالة الاتصال، حالات النجاح
--color-yellow	#ECB22E	الذهبي	حالة الغياب، التحذيرات، التمييزات
--color-red	#E01E5A	الياقوتي	الإشعارات، الأخطاء، شارة الإشارات

السطح والخلفية

الرمز	Hex	الدور
--bg-primary	#FFFFFF	منطقة الرسائل الرئيسية، النوافذ المنبثقة
--bg-secondary	#F8F8F8	لوحات الخيوط، الأسطح الثانوية
--bg-tertiary	#F1F1F1	خلفيات الإدخال، حالات التمرير
--bg-sidebar	#4A154B	الشريط الجانبي الأيسر (أوبيرجين)
--bg-sidebar-hover	rgba(255,255,255,0.1)	تمرير عنصر الشريط الجانبي
--bg-sidebar-active	rgba(255,255,255,0.2)	العنصر النشط في الشريط الجانبي
--bg-message-hover	#F8F8F8	تمرير صف الرسالة

ألوان النص

الرمز	Hex	الدور
--text-primary	#1D1C1D	نص المحتوى الأساسي (شبه أسود)
--text-secondary	#616061	الطوابع الزمنية، التسميات المخففة
--text-sidebar	rgba(255,255,255,0.9)	أسماء القنوات في الشريط الجانبي
--text-sidebar-muted	rgba(255,255,255,0.6)	العناصر غير النشطة في الشريط الجانبي
--text-link	#1264A3	الروابط المضمّنة في الرسائل
--text-mention	#1264A3	لون نص @الإشارة

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

الرمز	Hex	الدور
--color-success	#2EB67D	إشعارات النجاح، الحالات الإيجابية
--color-warning	#ECB22E	حالات التحذير
--color-danger	#E01E5A	حالات الخطأ، الإجراءات التدميرية
--color-info	#36C5F0	التمييزات الإعلامية

الحدود والفاصل

الرمز	Hex	الدور
--border-default	#DDDDDD	الفواصل القياسية، حدود البطاقات
--border-subtle	#F1F1F1	الفواصل الخفية بين الصفوف
--border-focus	#1264A3	لون حلقة التركيز

---

3. قواعد الطباعة

الخطوط

الدور	الرسمي	البديل على الويب
عناوين العرض / التسويق	Larsseit	'Larsseit', 'Helvetica Neue', Arial, sans-serif
واجهة المستخدم / المحتوى / Chrome	Slack Lato (مخصص)	system-ui, -apple-system, BlinkMacSystemFont, sans-serif
الكود / Monospace	—	'Monaco', 'Menlo', 'Courier New', monospace

يستخدم Slack Larsseit لعناوين التسويق ونسخة Lato المخصصة لواجهة المستخدم داخل المنتج. لاستخدام الويب، يُعدّ system-ui أكثر البدائل أماناً.

مقياس الطباعة

المستوى	الحجم	الوزن	ارتفاع السطر	تباعد الحروف	الاستخدام
عرض XL	48px	800	1.1	-1px	عناوين hero التسويقية
عرض L	36px	700	1.15	-0.5px	بطولات الأقسام
عنوان 1	28px	700	1.25	normal	عناوين النوافذ المنبثقة، رؤوس الصفحات
عنوان 2	22px	700	1.3	normal	عناوين البطاقات، أقسام الإعدادات
عنوان 3	18px	700	1.35	normal	رؤوس الأقسام الفرعية
محتوى L	16px	400	1.5	normal	نص الرسالة، الأوصاف
محتوى	15px	400	1.46667	normal	نص واجهة المستخدم الافتراضي (الحجم الأساسي لـ Slack)
محتوى SM	13px	400	1.38462	normal	البيانات الوصفية الثانوية
تسمية توضيحية	12px	400	1.33	normal	الطوابع الزمنية، التلميحات
كود	12px	400	1.5	normal	الكود المضمّن، كتل الكود

قواعد الطباعة

• الحجم الأساسي لمحتوى Slack هو 15 بكسل — أصغر قليلاً من 16 بكسل لزيادة الكثافة
• القنوات غير المقروءة: وزن 700 — الغامق هو المؤشر الأساسي لعدم القراءة
• الطوابع الزمنية: 12 بكسل --text-secondary، تظهر عند التمرير فحسب
• كتل الكود: خلفية #F8F8F8، حد 1px solid #DDDDDD، border-radius 4px
• لا تستخدم أحجام خطوط أقل من 12 بكسل أبداً
• عناوين التسويق: letter-spacing -1px لأحجام العرض الكبيرة

---

4. تنسيقات المكونات

الأزرار

/* Primary */
.btn-primary {
  background: #4A154B;
  color: #FFFFFF;
  border-radius: 4px;
  padding: 0 16px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
  border: none;
}
.btn-primary:hover { background: #611f69; }

/* Secondary */
.btn-secondary {
  background: #FFFFFF;
  color: #1D1C1D;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  padding: 0 16px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
}
.btn-secondary:hover { background: #F8F8F8; }

/* Danger */
.btn-danger {
  background: #E01E5A;
  color: #FFFFFF;
  border-radius: 4px;
}
.btn-danger:hover { background: #B3114A; }

حقول الإدخال

.input {
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  color: #1D1C1D;
  font-size: 15px;
  padding: 8px 12px;
  height: 36px;
}
.input:focus {
  border-color: #1264A3;
  box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
  outline: none;
}

عنصر قناة الشريط الجانبي

.channel-item {
  height: 28px;
  padding: 0 16px;
  border-radius: 6px;
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  font-weight: 400;
}
.channel-item:hover {
  background: rgba(255,255,255,0.1);
  color: #FFFFFF;
}
.channel-item.active {
  background: rgba(255,255,255,0.2);
  color: #FFFFFF;
}
.channel-item.unread {
  color: #FFFFFF;
  font-weight: 700;
}

شارة غير المقروء

.badge {
  background: #E01E5A;
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 18px;
}

مرفقات الرسائل / البطاقات

.attachment {
  border-left: 4px solid #DDDDDD;
  background: #F8F8F8;
  border-radius: 0 4px 4px 0;
  padding: 8px 12px;
  margin: 4px 0;
}

التفاعلات

.reaction {
  border: 1px solid #DDDDDD;
  border-radius: 24px;
  background: #F8F8F8;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
}
.reaction:hover { background: #F1F1F1; }
.reaction.active {
  background: rgba(18,100,163,0.1);
  border-color: #1264A3;
}

---

5. مبادئ التخطيط

تخطيط ثلاثي الأعمدة

┌──────────────┬──────────────────────────────┬─────────────┐
│ الشريط الجانبي│        منطقة الرسائل         │   الخيط     │
│   (240px)    │          (flex: 1)           │  (400px)    │
│  #4A154B     │          #FFFFFF             │  اختياري    │
└──────────────┴──────────────────────────────┴─────────────┘

نظام التباعد (أساس 4 بكسل)

الرمز	القيمة	الاستخدام
--space-1	4px	الفجوات الضيقة
--space-2	8px	حشو المكون
--space-3	12px	حشو الإدخال
--space-4	16px	الحشو القياسي
--space-6	24px	حشو البطاقة
--space-8	32px	فجوات الأقسام

هيكل الشريط الجانبي

[اسم مساحة العمل ▼]
────────────────────
الخيوط
جميع الرسائل المباشرة
المسودات والمُرسَل
────────────────────
▼ القنوات
  # general
  # random
  # design  ● (غير مقروء)
────────────────────
▼ الرسائل المباشرة
  John Doe
  Jane Smith

محرر الرسائل

• مثبت في أسفل منطقة الرسائل
• border: 1px solid #DDDDDD، border-radius: 8px، margin: 0 16px 16px
• شريط الأدوات: رموز تعبيرية، إرفاق، تنسيق، زر إرسال

---

6. العمق والارتفاع

يستخدم Slack ظلالاً خفيفة على سطح فاتح:

المستوى	الاستخدام	الظل
مسطح	صفوف الرسائل، عناصر الشريط الجانبي	none
منخفض	البطاقات، حقول الإدخال	0 1px 3px rgba(0,0,0,0.08)
متوسط	القوائم المنسدلة، النوافذ المنبثقة	0 4px 12px rgba(0,0,0,0.12)
مرتفع	النوافذ المنبثقة الكبيرة، الحوارات	0 8px 24px rgba(0,0,0,0.15)
طبقة تغطية	خلفيات النوافذ المنبثقة	rgba(0,0,0,0.5)

---

7. ما يجب فعله وما يجب تجنبه

✅ افعل

• استخدم أوبيرجين #4A154B للشريط الجانبي — إنه العنصر الأكثر تميزاً في واجهة Slack
• احتفظ بمنطقة المحتوى الرئيسية بيضاء وفاتحة
• استخدم #1D1C1D (شبه أسود) لجميع نصوص المحتوى، وليس الأسود الصريح
• اجعل أسماء القنوات غامقة لإظهار حالة عدم القراءة — الوزن هو المؤشر
• استخدم الألوان الأربعة للنبرة للأدوار الدلالية فحسب (نجاح، تحذير، خطر، معلومات)
• طبّق border-left: 4px على مرفقات الرسائل والمدمجات
• اعرض الطوابع الزمنية عند التمرير فحسب
• استخدم #1264A3 للروابط وحالات التركيز
• احتفظ بعناصر الشريط الجانبي مضغوطة: ارتفاع 28 بكسل، border-radius 6 بكسل

❌ لا تفعل

• لا تستخدم منطقة محتوى رئيسية داكنة — Slack يُقدّم الفاتح
• لا تبعثر الأزرق/الأخضر/الأصفر/الأحمر كنبرات تزيينية
• لا تستخدم الأسود الصريح #000000 للنص
• لا تستخدم فقاعات الكلام — الرسائل صفوف مسطحة
• لا تصنع أزراراً بنصف قطر كبير — 4 بكسل هو المعيار
• لا تعرض الطوابع الزمنية بشكل دائم
• لا تستخدم الحروف الكبيرة بالكامل لأسماء القنوات
• لا تستخدم أحجام خطوط أقل من 12 بكسل

---

8. السلوك المتجاوب

نقاط الكسر

نقطة الكسر	العرض	التخطيط
الجوال	< 768px	لوحة واحدة، الشريط الجانبي كدرج أيسر
الجهاز اللوحي	768–1024px	الشريط الجانبي + منطقة الرسائل فحسب
سطح المكتب	> 1024px	تخطيط ثلاثي الأعمدة الكامل

التكيفات للجوال

• الشريط الجانبي: درج أيسر، اسحب لليمين للفتح
• شريط التبويب السفلي: الرئيسية، الرسائل المباشرة، النشاط، أنت
• لوحة الخيط: تغطية الشاشة بالكامل
• المحرر: مثبت فوق لوحة المفاتيح
• عناصر قائمة القنوات: ارتفاع منطقة اللمس 44 بكسل
• الحفاظ على شريط الرأس الأوبيرجين العلوي على الجوال

---

9. دليل مطالبات الوكيل

عند إنشاء تصميمات بأسلوب Slack، اتبع هذا النهج:

تطبيق الألوان:

اضبط background: #FFFFFF كالقماش الرئيسي. استخدم #4A154B (أوبيرجين) للشريط الجانبي. جميع النصوص الأساسية هي #1D1C1D. الروابط وحلقات التركيز تستخدم #1264A3. الألوان الأربعة للشعار — #36C5F0، #2EB67D، #ECB22E، #E01E5A — دلالية فحسب: معلومات، نجاح، تحذير، خطر.

الطباعة:

استخدم system-ui, -apple-system, sans-serif لجميع واجهات المستخدم. الحجم الأساسي هو 15 بكسل. القنوات غير المقروءة: وزن 700. نص المحتوى: وزن 400. الطوابع الزمنية: 12 بكسل #616061، عند التمرير فحسب. الكود: Monaco, Menlo, monospace، 12 بكسل، خلفية #F8F8F8.

التخطيط:

ثلاثة أعمدة: شريط جانبي أوبيرجين 240 بكسل + منطقة رسائل بيضاء مرنة + لوحة خيط اختيارية 400 بكسل. عناصر الشريط الجانبي: ارتفاع 28 بكسل، نصف قطر 6 بكسل، غامق عند عدم القراءة. المحرر: مثبت في الأسفل، border: 1px solid #DDDDDD، border-radius: 8px.

المكونات:

الأزرار: نصف قطر 4 بكسل، ارتفاع 36 بكسل، أوبيرجين أساسي. حقول الإدخال: حد 1px solid #DDDDDD، حلقة تركيز #1264A3. صفوف الرسائل: مسطحة، بلا فقاعات، صورة رمزية دائرية 36 بكسل. التفاعلات: pill border: 1px solid #DDDDDD، border-radius: 24px.

النبرة:

Slack دافئ واحترافي وإنساني. الحالات الفارغة تستخدم رسوماً توضيحية ودية. عبارات الدعوة للعمل مباشرة: "إرسال رسالة"، "ابدأ الآن". رسائل الخطأ واضحة ومفيدة. لا تثير القلق أبداً.

الأنماط المضادة التي يجب تجنبها:

لا توجد منطقة محتوى داكنة. لا توجد فقاعات كلام. لا يوجد نص أسود صريح. لا توجد نبرات متعددة الألوان مبعثرة. لا توجد أسماء قنوات بالحروف الكبيرة. لا يوجد خط أصغر من 12 بكسل. لا يوجد نصف قطر زر كبير.