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

> Category: الإنتاجية والبرمجيات كخدمة
> منصة تعلّم اللغات. الأخضر البومي الزاهي، الظلال السميكة، البهجة المحوّلة إلى ألعاب.

## 1. الثيم البصري والأجواء

Duolingo هو تحويل الألعاب إلى لغة بصرية. الواجهة زاهية بجرأة واضحة، مع **الأخضر البومي** (`#58cc02`) كلون رئيسي للعلامة التجارية، وظل سفلي سميك بارتفاع 4px على كل عنصر تفاعلي يشبه زر ثلاثي الأبعاد ينتظر الضغط عليه. الصفحة بيضاء (`#ffffff`) مع حدود سميكة 2–3px بلون رمادي داكن (`#e5e5e5`)، ويُقرأ النظام بأكمله كتطبيق iOS من عام 2015 أُعيد توليده بتدرج هرمي أفضل.

تستخدم الطباعة **Feather Bold** (خط مستدير مخصص بلا أسنان) لعناصر الواجهة و**Mona Sans** (أو Inter) لمحتوى النص. أحجام العرض كبيرة وواثقة — Duolingo لا يهمس أبدًا. غالبًا ما تحمل العناوين خطًا أخضر تحتها أو تجلس على حبة خضراء، وتظهر تميمة Duo (بومة خضراء) كشخصية توضيحية نشطة، لا كشعار ثابت.

لغة الأشكال ودية: نصف قطر 16–20px على البطاقات، 12px على الأزرار، 9999px على الشرائح وأشرطة التقدم. الأيقونات مملوءة، مستديرة، ومشفّرة بالألوان حسب المهارة — لكل سطح درس زوج ألوان يمكن التعرف عليه فورًا.

**الخصائص الرئيسية:**
- الأخضر البومي (`#58cc02`) كلون مهيمن للعلامة التجارية، يُستخدم في أكثر من 30% من السطح
- ظل سفلي سميك 4px على كل زر (خاصية "الضغط اللمسي")
- حدود صلبة 2–3px، لا خطوط رفيعة أبدًا
- Feather Bold (عرض مستدير) + Mona Sans (المحتوى)
- نص كبير وواثق — أحجام العرض تبدأ من 48px وتتصاعد
- التميمة كشخصية: تظهر بومة Duo في الإعداد الأولي، الأخطاء، التتاليات
- البرتقالي للتتاليات (`#ff9600`) والزهري الجوهرة (`#ce82ff`) كألوان ثانوية للعلامة التجارية

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

### الأساسية
- **الأخضر البومي** (`#58cc02`): الأساسي للعلامة التجارية، CTA الرئيسي، الإجابة الصحيحة.
- **الأخضر البومي العميق** (`#58a700`): لون الضغط/الظل لأزرار خضراء.
- **الأخضر البومي الفاتح** (`#89e219`): التمرير فوقه، التعبئات الخفيفة.
- **الأخضر البومي الباهت** (`#dbf8c5`): سطح خفيف، لافتة النجاح.

### النبرات الثانوية
- **البرتقالي للتتاليات** (`#ff9600`): عداد التتاليات، أيقونة اللهب، الطاقة المميزة.
- **البرتقالي العميق للتتاليات** (`#cc7a00`): البرتقالي عند الضغط.
- **الزهري الجوهرة** (`#ce82ff`): عملة الجواهر، Super Duolingo.
- **الأزرق الثعبان** (`#1cb0f6`): زر التلميح، رابط المعلومات.
- **الأحمر الكاردينالي** (`#ff4b4b`): إجابة خاطئة، فقدان حياة.
- **الأصفر النحلة** (`#ffc800`): شارة المحترفين، الإنجاز.

### السطح
- **الثلج** (`#ffffff`): الخلفية الأساسية.
- **الثعبان** (`#f7f7f7`): فاصل الأقسام، السطح الثانوي.
- **البجعة** (`#e5e5e5`): خلفية معطّلة، كتلة مضمّنة.
- **الذئب** (`#777777`): فاصل داكن، نص ثانوي.

### الحبر والنص
- **أسود الثعبان** (`#3c3c3c`): النص الأساسي.
- **الذئب** (`#777777`): النص الثانوي، التعليقات التوضيحية.
- **الأرنب** (`#afafaf`): معطّل، عنصر نائب.

### الحدود
- **البجعة** (`#e5e5e5`): حد قياسي 2px.
- **الأرنب** (`#afafaf`): حد مؤكد عند التمرير.

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

### عائلة الخطوط
- **العرض / واجهة المستخدم / العناوين**: `Feather Bold`، مع بديل: `'DIN Round Pro', 'Helvetica Neue', sans-serif`
- **المحتوى / النص الطويل**: `Mona Sans`، مع بديل: `'Helvetica Neue', system-ui, sans-serif`
- **الكود (نادر، المدارس/الإدارة)**: `JetBrains Mono`، مع بديل: `ui-monospace, Menlo, monospace`

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

| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الأحرف | ملاحظات |
|------|------|------|--------|-------------|----------------|-------|
| العرض | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | بطل الإعداد الأولي |
| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | عنوان الصفحة |
| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | عنوان القسم |
| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | عنوان البطاقة، صف الدرس |
| محتوى كبير | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | تلميح الدرس، التعليمات |
| المحتوى | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | النثر القياسي |
| التعليق التوضيحي | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | عداد XP، البيانات الوصفية |
| الزر | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | تسمية الزر القياسية |
| التتالي | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | رقم التتالي، على اللهب |

### المبادئ
- **800 هو الافتراضي**: يعمل Feather Bold بوزن 800 على العناوين والأزرار. يبدو 700 ضعيفًا في هذا النظام.
- **نص كبير**: أحجام العناوين أكبر بنسبة 25–40% من العلامات التجارية النموذجية للمنتجات — الثقة كهوية.
- **أحرف مستديرة**: لكل رمز نهايات ناعمة؛ ستؤدي الأحرف المسنّنة إلى كسر عقد الودية.

## 4. تصميم المكونات

### الأزرار

**الأساسي (الأخضر البومي)**
- الخلفية: `#58cc02`
- النص: `#ffffff`
- الحشو: 14px 24px
- الزاوية: 16px
- Border-bottom: 4px solid `#58a700` (الظل السميك)
- التمرير فوقه: خلفية `#89e219`
- النشط: translate-y 4px، border-bottom 0 (الزر "ينضغط")
- الاستخدام: "متابعة"، "تحقق"، CTA الرئيسي.

**الثانوي (أبيض مع ظل سفلي)**
- الخلفية: `#ffffff`
- النص: `#777777`
- الحد: 2px solid `#e5e5e5`
- Border-bottom: 4px solid `#e5e5e5`
- الزاوية: 16px
- الحشو: 14px 24px
- التمرير فوقه: النص `#3c3c3c`، الحد `#afafaf`

**برتقالي التتاليات**
- الخلفية: `#ff9600`
- النص: `#ffffff`
- Border-bottom: 4px solid `#cc7a00`
- الاستخدام: هدف التتالي، "ابدأ التتالي"

**الخطأ (الأحمر الكاردينالي)**
- الخلفية: `#ff4b4b`
- النص: `#ffffff`
- Border-bottom: 4px solid `#cc3b3b`
- الاستخدام: تغذية راجعة للإجابة الخاطئة.

### البطاقات / بلاطات الدرس
- الخلفية: `#ffffff`
- الحد: 2px solid `#e5e5e5`
- Border-bottom: 4px solid `#e5e5e5`
- الزاوية: 16px
- الحشو: 16px
- التمرير فوقه: رفع 2px، ظل `0 4px 0 #d7d7d7`

### عقدة شجرة المهارات (فقاعة الدرس)
- الحجم: 80×72px
- الخلفية: لون المهارة مظلّل (أخضر للنشط، رمادي للمقفل)
- Border-bottom: 6px solid متغير أغمق
- الزاوية: 50% (دائري)
- النشط: ينبض 1.0 → 1.05 كل 1.6s

### حقول الإدخال
- الخلفية: `#ffffff`
- الحد: 2px solid `#e5e5e5`
- الزاوية: 12px
- الحشو: 12px 16px
- التركيز: حد `#1cb0f6` (أزرق الثعبان)، حلقة `0 0 0 3px rgba(28, 176, 246, 0.2)`

### شريط التقدم
- المسار: `#e5e5e5`
- التعبئة: `#58cc02` (أو `#ff9600` للتتالي)
- الزاوية: 9999px
- الارتفاع: 16px
- تعبئة متحركة: 320ms ease-out عند الزيادة.

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

- **الوحدة الأساسية**: 4px. المقياس: 4، 8، 12، 16، 24، 32، 48، 64.
- **الحاوية**: حد أقصى 1080px، هامش 24px.
- **عمود شجرة الدروس**: عرض 320px؛ محاذاة مركزية على سطح المكتب.

## 6. الحركة

- **المدة**: 180ms لضغط الزر؛ 320ms لفتح قفل عقدة المهارة؛ 1.6s لنبضة العقدة النشطة.
- **التسهيل**: `cubic-bezier(0.34, 1.56, 0.64, 1)` (back-out، تجاوز طفيف) لفتح الأقفال.
- **التميمة**: تومض Duo كل 4–6s، وتقفز عند معالم التتاليات (480ms ease-out نابض).

## 7. إرشادات الاستخدام

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