# نظام تصميم مستوحى من Discord

> Category: إنتاجية وبرمجيات كخدمة
> منصة صوت ومحادثة. ألوان بنفسجية-زرقاء عميقة، واجهات داكنة في المقام الأول، مع لمسات مرحة للألوان المميزة.

## 1. السمة البصرية والأجواء العامة

صُمّم منتج Discord للأمسيات وجلسات الألعاب الجماعية والمحادثات الصوتية، لذا فإن الواجهة بأكملها تعتمد على الأسلوب الداكن أولاً. القماش الافتراضي هو `Background Primary` العميق (`#313338` للسمة الفاتحة، `#1e1f22` للسمة الداكنة)، مع أعمدة المحادثة المرتّبة فوق ظلال أفتح أو أغمق قليلاً للدلالة على القنوات والمواضيع الفرعية واللوحات الجانبية. اللون المميز **Blurple** (`#5865f2`) محجوز للعلامة التجارية وعناصر الحث الرئيسية على الإجراء والإشارات وعناصر "أنت" — يُستخدم بتحفّظ ليبرز على خلفية الألوان المحايدة الخافتة.

الخط المستخدم هو **gg sans** (بديل Discord المخصص لـ Whitney) للنصوص وعناصر الواجهة، بأشكال هندسية مستديرة تبدو ودية مع الحفاظ على القابلية للقراءة في الأحجام الصغيرة التي يتطلبها تطبيق المحادثة. تتدرج العناوين بشكل تصاعدي؛ وصفوف المحادثة متقاربة (4–8 بكسل بين مجموعات الرسائل) بحيث تبدو ساعات التمرير قابلة للمسح البصري.

لغة الأشكال مستديرة لكنها ليست منتفخة كالبالونات: نصف قطر 8 بكسل للبطاقات، و4 بكسل للحقول، وأشكال حبة كاملة لشارات الحالة والعلامات. تظهر أيقونات الخوادم كمربعات مستديرة بحجم 48 بكسل تتحول إلى دوائر عند التحويم — لمسة حركية صغيرة أصبحت جزءاً من هوية العلامة التجارية.

**الخصائص الرئيسية:**
- واجهات داكنة أولاً: `#1e1f22` / `#2b2d31` / `#313338` (عمق بثلاث مستويات)
- اللون البنفسجي-الأزرق `#5865f2` بوصفه اللون المشبع الوحيد في واجهة المحادثة
- خط gg sans (بأسلوب Whitney) لجميع النصوص — ودي وهندسي ومحايد
- أيقونات خوادم مربعة مستديرة (نصف قطر 16 بكسل) تتحول إلى دوائر عند التحويم
- تباعد ضيق بين صفوف المحادثة، مع مساحة داخلية سخية للألواح الجانبية
- نقاط الحالة: أخضر للمتصل، أصفر للخامل، أحمر لعدم الإزعاج، رمادي لغير المتصل
- فواصل 1 بكسل محسوبة بدقة بكسلية بلون أبيض خافت ذو شفافية منخفضة

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

### الأساسية
- **Blurple** (`#5865f2`): اللون الأساسي للعلامة التجارية، عنصر الحث الرئيسي، تمييز الإشارات.
- **Blurple Hover** (`#4752c4`): حالة التحويم والتنشيط للون Blurple.
- **Blurple Soft** (`#7289da`): اللون البنفسجي-الأزرق القديم، لون تمييز ثانوي في مواد التسويق.

### السطوح (السمة الداكنة — الافتراضية)
- **Background Tertiary** (`#1e1f22`): شريط قائمة الخوادم، أعمق خلفية.
- **Background Secondary** (`#2b2d31`): الشريط الجانبي للقنوات، الشريط الجانبي للإعدادات.
- **Background Primary** (`#313338`): واجهة المحادثة، عمود الرسائل.
- **Background Floating** (`#111214`): النوافذ المنبثقة العائمة، تلميحات الأدوات، الإكمال التلقائي.
- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): طبقة التحويم فوق الصفوف.
- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): الصف النشط.

### السطوح (السمة الفاتحة)
- **Light Bg Primary** (`#ffffff`): واجهة المحادثة في السمة الفاتحة.
- **Light Bg Secondary** (`#f2f3f5`): الشريط الجانبي في السمة الفاتحة.
- **Light Bg Tertiary** (`#e3e5e8`): أعمق سطح فاتح.

### النصوص
- **Header Primary** (`#f2f3f5`): عناوين القنوات وعناوين النوافذ المشروطة في السمة الداكنة.
- **Header Secondary** (`#b5bac1`): عناوين خافتة.
- **Text Normal** (`#dbdee1`): نص الجسم في السمة الداكنة — أبرد قليلاً من الأبيض الخالص.
- **Text Muted** (`#949ba4`): الطوابع الزمنية وأسماء الخوادم والبيانات الوصفية الثانوية.
- **Text Link** (`#00a8fc`): الروابط التشعبية في الرسائل — أزرق سماوي، مختلف عن Blurple.
- **Channels Default** (`#80848e`): اسم القناة غير النشطة في الشريط الجانبي.

### الحالة والدلالات
- **Status Online** (`#23a55a`): نقطة الاتصال، حالات النجاح.
- **Status Idle** (`#f0b232`): نقطة الخمول، الغياب.
- **Status DND** (`#f23f43`): عدم الإزعاج، يُستخدم أيضاً كلون أحمر للإجراءات التدميرية.
- **Status Streaming** (`#593695`): البنفسجي لحالة "البث".
- **Status Offline** (`#80848e`): الرمادي لحالة عدم الاتصال.
- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): طبقة بنفسجية-زرقاء خفيفة على صفوف @الإشارة.

### الحدود والفواصل
- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): الفاصل القياسي في السمة الداكنة.
- **Border Subtle** (`#3f4147`): فاصل صلب للبطاقات.

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

### عائلة الخطوط
- **النص / الواجهة / العناوين**: `gg sans`، مع الخطوط الاحتياطية: `"Helvetica Neue", Helvetica, Arial, sans-serif`
- **العرض (قديم / Whitney)**: `Whitney`، مع الخط الاحتياطي: `gg sans`
- **الكود / الخط أحادي العرض**: `"gg mono"`، مع الخطوط الاحتياطية: `Consolas, Andale Mono, Courier New, Courier, monospace`

### التسلسل الهرمي

| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الحروف | ملاحظات |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | بطل التسويق |
| Page Heading | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | عناوين الإعدادات/الملف الشخصي |
| Channel Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`، عنوان القناة |
| Message Body | gg sans | 16px (1rem) | 400 | 1.375 | normal | نص المحادثة القياسي |
| Username | gg sans | 16px (1rem) | 500 | 1.25 | normal | مؤلف الرسالة |
| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | "اليوم الساعة 4:32 م" |
| Sidebar Channel | gg sans | 16px (1rem) | 500 | 1.25 | normal | صفوف قائمة القنوات |
| Server Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | عنوان الخادم |
| Caption / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | نص الحالة، علامة التعديل |
| Code Inline | gg mono | 0.875em | 400 | inherit | normal | `كود` مضمّن |
| Code Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | كتلة ```ثلاثي الأسوار``` |

### المبادئ
- **الهندسة الودية**: يحل gg sans محل Whitney بنهايات مستديرة على a/g/s — تسعى العلامة التجارية إلى الدفء دون المساس بوضوح القراءة.
- **التباين بالوزن لا باللون**: يأتي التسلسل الهرمي من تدرجات الوزن 400→500→600→700→800؛ تبقى الواجهة محايدة.
- **نص الجسم 16 بكسل**: لا تنخفض رسائل المحادثة عن 16 بكسل. تأتي الكثافة من ارتفاع السطر (1.375)، وليس حجم الخط.

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

### الأزرار

**الأساسي**
- الخلفية: `#5865f2`
- النص: `#ffffff`
- الحشو: 8px 16px
- نصف القطر: 4px
- التحويم: `#4752c4`
- الاستخدام: عناصر الحث الرئيسية، "متابعة"، "الانضمام إلى الخادم"

**الثانوي**
- الخلفية: `#4e5058`
- النص: `#ffffff`
- الحشو: 8px 16px
- نصف القطر: 4px
- التحويم: `#6d6f78`

**الثالثي / الخفي (بأسلوب الرابط)**
- الخلفية: transparent
- النص: `#dbdee1`
- التحويم: نص مسطّر، بدون تغيير في الخلفية

**التدمير**
- الخلفية: `#da373c`
- النص: `#ffffff`
- التحويم: `#a12d2f`

### حقول الإدخال
- الخلفية: `#1e1f22`
- النص: `#dbdee1`
- الحد: 1px solid `#1e1f22`
- نصف القطر: 4px
- الحشو: 10px 12px
- التركيز: حد بلون `#5865f2`

### أيقونات الخوادم
- الحجم: 48×48 بكسل
- نصف القطر: 16 بكسل (مربع مستدير) افتراضياً؛ ينتقل إلى 50% عند التحويم والتنشيط.
- الحالة النشطة: حبة بيضاء عرضها 4 بكسل على الحافة اليسرى من عمود الأيقونات.

### نقاط الحالة
- الحجم: 10×10 بكسل
- الحد: 3px solid background-tertiary (يخلق تأثير "الشق")
- الموضع: أسفل يمين الصورة الرمزية.

### البطاقات / التضمينات
- الخلفية: `#2b2d31` (داكن) أو `#f2f3f5` (فاتح)
- الحد الأيسر: 4px solid لون تمييز التضمين.
- نصف القطر: 4px
- الحشو: 8px 16px

### حبة الإشارة
- الخلفية: `rgba(88, 101, 242, 0.3)`
- النص: `#c9cdfb`
- الحشو: 0 2px
- نصف القطر: 3px

## 5. التباعد والتخطيط

- **الوحدة الأساسية**: 4 بكسل. السلّم: 4، 8، 12، 16، 20، 24، 32، 40.
- **شريط الخوادم**: عرضه 72 بكسل، ثابت.
- **الشريط الجانبي للقنوات**: عرضه 240 بكسل.
- **قائمة الأعضاء**: عرضها 240 بكسل على سطح المكتب.
- **عمود المحادثة**: مرن، بحد أدنى 380 بكسل.

## 6. الحركة والانتقالات

- **المدة**: 200 مللي ثانية للتحويم؛ 350 مللي ثانية لتحول الأيقونة إلى دائرة؛ 80 مللي ثانية لتلاشي تلميح الأداة.
- **التسهيل**: `cubic-bezier(0.215, 0.61, 0.355, 1)` لتحول الأيقونة (سريع ثم استقرار).
- **نبضة الإشعار**: 1.4 ثانية ease-in-out infinite على مؤشر الإشارة غير المقروءة.

## 7. ضوابط الاستخدام

- احتفظ بالغلاف الداكن والكثافة المدمجة وتسلسل إجراءات اللون Blurple معاً؛ استخدام Blurple في تخطيط تسويقي فاتح يكسر الإحساس بمنتج Discord.
- ابنِ الواجهات كثيفة التنقل حول الأشرطة والألواح الجانبية وأعمدة المحادثة، بدلاً من البطاقات الزخرفية المنعزلة.
- استخدم لغة الأيقونة المربعة المستديرة ونقطة الحالة عند تمثيل الأشخاص أو الخوادم أو الحضور النشط.