/design-systems/github/DESIGN-ar.md

نظام تصميم مستوحى من 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.
• استخدم الأخضر لإجراءات المستودع البنّاءة، والأزرق للروابط والتركيز، والأحمر/البنفسجي/الرمادي فقط لحالات المشكلات وطلبات السحب وسير العمل.
• فضّل الواجهة الهادئة والحدود الصريحة والتباعد المضغوط على الظلال الزخرفية أو البطاقات الكبيرة بأسلوب التسويق.