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

> Category: أدوات المطورين
> منصة تُقدّم الكود في المقام الأول. كثافة وظيفية، ودقة الأزرق على الأبيض، وأسس Primer.

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

سطح GitHub مُهندَس لا مُزيَّن. كل بكسل يُعلن موقفاً صريحاً: هذه أداة لمن يهتم بالفروقات والبنى وطلبات السحب. خلفية الصفحة هي `#ffffff` نظيفة (الوضع الفاتح) أو `#0d1117` (الوضع الداكن)، وتُرتَّب المحتويات على ألواح مستطيلة كثيفة تفصل بينها حدود رفيعة كالشعرة لا فراغات سلبية. كثافة المعلومات هي العلامة التجارية — صفوف القوائم وأسطر الكود ورؤوس المستودعات وبطاقات الإشعارات كلها متقاربة حتى يتمكن المستخدم المتمرس من مسح مئة عنصر دون تمرير.

النبرة البصرية المميزة هي **الأزرق Primer** (`#0969da`) للروابط والإجراءات الرئيسية، و**الأخضر GitHub** (`#1a7f37`) للحالات المدمجة والنجاح وزر الدمج ذاته. كلاهما يبدو خافتاً نسبياً مقارنةً بأزرق وأخضر منتجات المستهلكين — مشبعٌ بما يكفي للتمييز على خلفية النص الرمادي الكثيف، ومكبوحٌ بما يكفي ليختفي في الخلفية حين تظهر عدة نسخ في إطار عرض واحد.

تستخدم الطباعة مكدس **system-ui** عبر المنتج بأكمله لعرض النصوص بوضوح على كل نظام تشغيل، إلى جانب **SFMono / Menlo / Consolas** للكود. لا يوجد خط عرض تحريري؛ صوت GitHub هو صوت النظام الذي أنت عليه بالفعل.

**الخصائص الجوهرية:**
- لوحة بيضاء حقيقية (`#ffffff`) أو أسود-كحلي غامق (`#0d1117`) — بلا دفء ولا تدرج
- حدود رمادية رفيعة (`#d0d7de`) تُحدد كل لوح وحاوية
- الأزرق Primer (`#0969da`) للروابط والإجراءات الرئيسية؛ الأخضر GitHub (`#1a7f37`) للنجاح والدمج
- system-ui للنصوص؛ SFMono للكود — لا خط ويب مخصص
- صفوف قائمة كثيفة بحشو أدنى؛ المسافات البيضاء نادرة
- أيقونات Octicon بحجم 16px / 24px — أحادية الضربة، هندسية، متسقة
- شارات حالة على شكل حبة دواء ذات دلالات لونية قوية

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

### الألوان الأساسية
- **Canvas Default** (`#ffffff`): خلفية الصفحة الرئيسية، الوضع الفاتح.
- **Canvas Subtle** (`#f6f8fa`): السطح الثانوي، الشريط الجانبي، خلفية الإدخال، شريط الرأس.
- **Canvas Inset** (`#eaeef2`): خلفية كتلة الكود، السطح الغائر.
- **Fg Default** (`#1f2328`): النص الرئيسي، العناوين، الحبر.
- **Fg Muted** (`#656d76`): النص الثانوي، التعليقات التوضيحية، مسارات الملفات.

### لون العلامة التجارية المميز
- **Primer Blue** (`#0969da`): الروابط، الدعوات للإجراء الرئيسية، حلقة التركيز — اللون التفاعلي الشامل.
- **Primer Blue Hover** (`#0550ae`): حالة التمرير/الضغط للأزرق الرئيسي.
- **Accent Subtle** (`#ddf4ff`): سطح أزرق ناعم للتنبيهات وبانرات المعلومات.

### الألوان الدلالية
- **Success / Merge Green** (`#1a7f37`): طلبات السحب المدمجة، شارات النجاح، زر الدمج.
- **Success Subtle** (`#dafbe1`): تدرج سطح النجاح.
- **Open Green** (`#1a7f37`): حالة "مفتوح" للمشكلة/طلب السحب.
- **Closed / Danger Red** (`#cf222e`): طلبات السحب المغلقة، الإجراء التدميري، خطأ التحقق.
- **Danger Subtle** (`#ffebe9`): سطح بانر الخطأ.
- **Attention / Warning Yellow** (`#9a6700`): نص التحذير على سطح كهرماني.
- **Attention Subtle** (`#fff8c5`): سطح بانر التحذير.
- **Done Purple** (`#8250df`): مدمج ومؤرشف، حالة "منجز"، شارة مميزة.
- **Sponsor Pink** (`#bf3989`): قلب الرعاة، علامة GitHub Sponsors التجارية.

### الحدود والفواصل
- **Border Default** (`#d0d7de`): الحد الرفيع القياسي، محيط اللوح.
- **Border Muted** (`#d8dee4`): الفواصل الداخلية داخل اللوح.
- **Border Subtle** (`#eaeef2`): فواصل صفوف الجدول الخافتة.

### الوضع الداكن
- **Dark Canvas** (`#0d1117`): خلفية الصفحة الداكنة.
- **Dark Surface** (`#161b22`): الشريط الجانبي، الرأس، السطح الثانوي.
- **Dark Border** (`#30363d`): الحد القياسي في الوضع الداكن.
- **Dark Fg** (`#e6edf3`): النص الرئيسي على الداكن.

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

### عائلة الخطوط
- **النص الأساسي / الواجهة**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
- **الكود / أحادي العرض**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
- **الرموز التعبيرية**: `"Apple Color Emoji", "Segoe UI Emoji"`

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

| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الحروف | ملاحظات |
|------|------|------|--------|-------------|----------------|-------|
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | رأس المستودع، عنوان التسويق الرئيسي |
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | عنوان الصفحة |
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | عنوان القسم |
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | عنوان القسم الفرعي، رأس اللوح |
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | حجم النص الافتراضي — ليس 16px |
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | التعليقات التوضيحية، بيانات الملف |
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | كتل الكود، الفروق |
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | امتدادات `code` المضمنة |

### المبادئ
- **النص الأساسي 14px لا 16px**: كثافة النثر في GitHub هي هويته. يُقرأ المنتج بـ14px لاحتواء مزيد من الصفوف في إطار العرض.
- **الوزن ثنائي**: 400 للكل افتراضياً؛ 600 للعناوين والتأكيد. لا 500، لا 700.
- **خطوط النظام دائماً**: لا تُحمّل خط ويب للواجهة — يجب أن يُعرض النص فورياً على الاتصالات البطيئة.

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

### الأزرار

**الأساسي (أخضر)**
- الخلفية: `#1f883d`
- النص: `#ffffff`
- الحد: 1px solid `rgba(31, 35, 40, 0.15)`
- الحشو: 5px 16px
- نصف القطر: 6px
- الظل: `0 1px 0 rgba(31,35,40,0.1)`
- عند التمرير: خلفية `#1a7f37`
- الاستخدام: "إنشاء مستودع"، "دمج طلب السحب"

**الافتراضي**
- الخلفية: `#f6f8fa`
- النص: `#1f2328`
- الحد: 1px solid `#d0d7de`
- الحشو: 5px 16px
- نصف القطر: 6px
- عند التمرير: خلفية `#f3f4f6`، حد `#d0d7de`

**محدد الخطوط (نمط رابط أزرق)**
- الخلفية: `#ffffff`
- النص: `#0969da`
- الحد: 1px solid `#d0d7de`
- عند التمرير: خلفية `#0969da`، نص `#ffffff`

**الخطر**
- الخلفية: `#ffffff`
- النص: `#cf222e`
- الحد: 1px solid `#d0d7de`
- عند التمرير: خلفية `#a40e26`، نص `#ffffff`، حد `#a40e26`

### البطاقات / الصناديق
- الخلفية: `#ffffff`
- الحد: 1px solid `#d0d7de`
- نصف القطر: 6px
- الحشو: 16px (الرأس) + 16px (الجسم)
- للرأس شريط `#f6f8fa` مع حد سفلي.

### حقول الإدخال
- الخلفية: `#ffffff`
- الحد: 1px solid `#d0d7de`
- نصف القطر: 6px
- الحشو: 5px 12px
- عند التركيز: حد `#0969da`، حلقة `0 0 0 3px rgba(9,105,218,0.3)`

### شارات الحالة (مشكلة / طلب سحب)
- **مفتوح**: خلفية `#1a7f37`، نص أبيض، حشو 4px 10px، نصف قطر 9999px.
- **مغلق**: خلفية `#cf222e`، نص أبيض.
- **مدمج**: خلفية `#8250df`، نص أبيض.
- **مسودة**: خلفية `#6e7781`، نص أبيض.

### التسميات (وسوم على المشكلات/طلبات السحب)
- الحشو: 0 7px
- نصف القطر: 9999px
- الخط: 12px / 500
- الخلفية والنص برمجيان (لون التسمية ← نص محسوب للتباين).

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

- **الوحدة الأساسية**: 4px. مقياس التباعد: 4، 8، 12، 16، 24، 32، 40، 48.
- **أقصى عرض للصفحة**: 1280px (`Container-xl`).
- **الشريط الجانبي**: 296px على سطح المكتب، ينهار أسفل 1012px.
- **حشو الصف**: 16px أفقي، 12px رأسي (القوائم كثيفة بالتصميم).

## 6. الحركة

- **المدة**: 80ms للتمرير؛ 200ms لفتح القائمة/المنبثق.
- **التخفيف**: `ease-out` للفتح، `ease-in` للإغلاق.
- **المتجنب**: تحريك تحميل الصفحة، التأثير المتوازي، التفاعلات الدقيقة الدائمة. الأشياء تظهر؛ لا تؤدي عروضاً.

## 7. قيود الاستخدام

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