mirror of https://github.com/nexu-io/open-design.git synced 2026-09-20 06:15:06 +08:00

Files

T

xne998808-ai 681dacde18 feat(landing): DESIGN.md systems hub + design-token spec sheet + scenario mocks on design-system pages (#4420 )

* feat(landing): systems-page DESIGN.md/FAQ copy + design-token loader

* feat(landing): DESIGN.md+FAQ sections on systems hub, token spec sheet on detail

* feat(landing): detail-page TOC nav, token visuals, tighter spacing, unified related cards

* feat(landing): multi-scenario themed previews (web/app/slides/poster) on design-system detail

* feat(landing): localized routes for design-system detail pages (chrome i18n, DESIGN.md body stays en)

* feat(landing): theme scenario mocks from real design tokens; phone app, 16:9 slide, refined poster

* feat(landing): redesign slide mock (two-zone), sticky schema nav, contribute moved to top

* feat(landing): right-rail section nav + 2-up related cards on design-system detail

* fix(landing): localize design-system detail title suffix + keyword-rich meta description + keywords meta

* feat(landing): declutter detail header — icon-only share, move contribute callout to page bottom

* fix(landing): cancel homepage 130px section padding on detail-block (killed huge inter-section gaps)

* i18n(landing): localize design-system detail + systems-hub chrome across 17 locales

* feat(landing): locale-aware DESIGN.md body loading (DESIGN-<locale>.md) with English fallback

* i18n(design-systems): localize apple DESIGN.md body into 17 locales

* i18n(design-systems): localize stripe DESIGN.md body into 17 locales

* i18n(design-systems): localize vercel DESIGN.md body into 17 locales

* i18n(design-systems): localize notion DESIGN.md body into 17 locales

* i18n(design-systems): localize github DESIGN.md body into 17 locales

* i18n(design-systems): localize airtable DESIGN.md body into 17 locales

* i18n(design-systems): localize figma DESIGN.md body into 17 locales

* i18n(design-systems): localize openai DESIGN.md body into 17 locales

* i18n(design-systems): localize slack DESIGN.md body into 17 locales

* i18n(design-systems): localize discord DESIGN.md body into 17 locales

* i18n(design-systems): localize webflow DESIGN.md body into 17 locales

* i18n(design-systems): localize cohere DESIGN.md body into 17 locales

* i18n(design-systems): localize duolingo DESIGN.md body into 17 locales

* i18n(design-systems): localize spotify DESIGN.md body into 17 locales

* i18n(design-systems): localize shopify DESIGN.md body into 17 locales

* i18n(design-systems): localize nvidia DESIGN.md body into 17 locales

* i18n(design-systems): localize pinterest DESIGN.md body into 17 locales

* i18n(design-systems): localize uber DESIGN.md body into 17 locales

* i18n(design-systems): localize nike DESIGN.md body into 17 locales

* i18n(design-systems): localize airbnb DESIGN.md body into 17 locales

* i18n(design-systems): localize ibm DESIGN.md body into 17 locales

* i18n(design-systems): localize playstation DESIGN.md body into 17 locales

* i18n(design-systems): localize starbucks DESIGN.md body into 17 locales

* i18n(landing): localize detailSystemLabel (design-system H1/title noun) across 17 locales

* i18n(landing): localize plugins chrome (contribute callout, card CTA, search, about) across 15 remaining locales

* i18n(landing): localized card taglines + category labels for design systems (149 systems x 17 locales)

* fix(landing): suppress on-load locale auto-redirect on design-system detail pages (keep localized routes + hreflang)

* fix(landing): localize SystemCard detail link so cards on /<locale>/ stay in-locale

---------

Co-authored-by: Joey <276262049+xne998808-ai@users.noreply.github.com>

2026-06-17 15:24:58 +08:00

11 KiB

Raw Permalink Blame History

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

11 KiB Raw Permalink Blame History