④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
  · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
    跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
  · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
  · 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
    横向流程图每步写清页面／功能／操作／完成判据。
  · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
  · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
  · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。

二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
  「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
  同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
  当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。

三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。

open-design/design-systems/nvidia/DESIGN-ar.md

@@ -0,0 +1,296 @@
+# نظام التصميم مستوحى من NVIDIA
+
+> Category: الإعلام والمستهلك
+> حوسبة GPU. طاقة خضراء-سوداء، جمالية القوة التقنية.
+
+## 1. الثيم البصري والأجواء
+
+موقع NVIDIA تجربة عالية التباين تتقدم بالتكنولوجيا، تعبّر عن القوة الحوسبية الخام من خلال التحفظ في التصميم. يُبنى الصفحة على أساس الأسود الصارم (`#000000`) والأبيض (`#ffffff`)، تتخللها الخضرة المميزة لـ NVIDIA (`#76b900`) — لون محدد للغاية يعمل كبصمة للعلامة التجارية. هذا ليس الأخضر الوفير للطبيعة؛ بل هو الأخضر الكهربائي المُزاح نحو الليمون الخاص بضوء معالج GPU المُقدَّم، لون يقع بين الكارتروز والأخضر الكيلي ويُشير فوراً إلى "NVIDIA" لأي شخص في مجال التكنولوجيا.
+
+عائلة الخطوط المخصصة NVIDIA-EMEA (مع بدائل Arial و Helvetica) تخلق صوتاً طباعياً نظيفاً وصناعياً. العناوين بحجم 36px وسُمك 700 مع تباعد سطور ضيق 1.25 تخلق كتلاً كثيفة وسلطوية من النصوص. الخط يفتقر إلى الخفة الهندسية لخطوط Silicon Valley بلا ضفيرة — إنه أوروبي، براغماتي، ومركّز على الهندسة. يسير نص الجسم بحجم 15-16px، مريح للقراءة لكن غير سخي، مما يحافظ على الإحساس بأن مساحة الشاشة مُحسَّنة كذاكرة GPU.
+
+ما يميز تصميم NVIDIA عن مواقع التقنية ذات الخلفية الداكنة الأخرى هو الاستخدام المنضبط للتمييز الأخضر. يظهر `#76b900` في الحدود (`2px solid #76b900`)، وخطوط تسطير الروابط (`underline 2px rgb(118, 185, 0)`)، وأزرار CTA — لكن أبداً كخلفيات أو مساحات سطحية كبيرة في المحتوى الرئيسي. الأخضر إشارة، وليس سطحاً. مقترناً بنظام ظل عميق (`rgba(0, 0, 0, 0.3) 0px 0px 5px`) وأقطار حدود دنيا (1-2px)، يكون التأثير العام لأجهزة الهندسة الدقيقة المُقدَّمة بالبكسل.
+
+**الخصائص الرئيسية:**
+- أخضر NVIDIA (`#76b900`) كتمييز خالص — الحدود، والخطوط التحتية، والتمييزات التفاعلية فقط
+- الأسود (`#000000`) الخلفية السائدة مع النص الأبيض (`#ffffff`) على الأقسام الداكنة
+- خط NVIDIA-EMEA المخصص مع بديل Arial/Helvetica — صناعي، أوروبي، نظيف
+- تباعد سطور ضيق (1.25 للعناوين) يخلق كتلاً نصية كثيفة وسلطوية
+- أقطار حدود دنيا (1-2px) — زوايا حادة ومهندسة في جميع أنحاء الصفحة
+- أزرار ذات حدود خضراء (`2px solid #76b900`) كنمط تفاعلي أساسي
+- نظام أيقونات Font Awesome 6 Pro/Sharp بوزن 900 لأيقونات حادة
+- معمارية متعددة الأطر (PrimeReact, Fluent UI, Element Plus) تتيح مكونات تفاعلية غنية
+
+## 2. لوحة الألوان والأدوار
+
+### العلامة التجارية الأساسية
+- **أخضر NVIDIA** (`#76b900`): التوقيع — الحدود، وخطوط تسطير الروابط، ومحيطات CTA، ومؤشرات التنشيط. لا يُستخدم أبداً كتعبئة سطحية كبيرة.
+- **الأسود الحقيقي** (`#000000`): خلفية الصفحة الأساسية، والنص على الأسطح الفاتحة، والنبرة السائدة.
+- **الأبيض الخالص** (`#ffffff`): النص على الخلفيات الداكنة، وخلفيات الأقسام الفاتحة، وأسطح البطاقات.
+
+### لوحة العلامة التجارية الموسعة
+- **أخضر NVIDIA فاتح** (`#bff230`): تمييز الليمون الساطع للتمييزات وحالات التمرير.
+- **برتقالي 400** (`#df6500`): تمييز دافئ للتنبيهات، والشارات المميزة، أو السياقات المتعلقة بالطاقة.
+- **أصفر 300** (`#ef9100`): تمييز دافئ ثانوي، وتمييزات فئة المنتج.
+- **أصفر 050** (`#feeeb2`): سطح دافئ فاتح لخلفيات العناصر البارزة.
+
+### الحالة والدلالة
+- **أحمر 500** (`#e52020`): حالات الخطأ، والإجراءات المدمرة، والتنبيهات الحرجة.
+- **أحمر 800** (`#650b0b`): أحمر عميق لخلفيات التحذير الشديدة.
+- **أخضر 500** (`#3f8500`): حالات النجاح، والمؤشرات الإيجابية (أغمق من الأخضر التجاري).
+- **أزرق 700** (`#0046a4`): تمييزات معلوماتية، وبديل تمرير الروابط.
+
+### الزخرفية
+- **بنفسجي 800** (`#4d1368`): بنفسجي عميق لنهايات التدرج، وسياقات المميزة/الذكاء الاصطناعي.
+- **بنفسجي 100** (`#f9d4ff`): تلوين سطحي بنفسجي فاتح.
+- **فوشيا 700** (`#8c1c55`): تمييز غني للعروض الترويجية الخاصة أو المحتوى المميز.
+
+### المقياس المحايد
+- **رمادي 300** (`#a7a7a7`): نص صامت، وتسميات معطلة.
+- **رمادي 400** (`#898989`): نص ثانوي، وبيانات وصفية.
+- **رمادي 500** (`#757575`): نص ثالثي، وعناصر نائبة، وتذييلات.
+- **حدود رمادية** (`#5e5e5e`): حدود خفية، وخطوط فاصلة.
+- **شبه الأسود** (`#1a1a1a`): أسطح داكنة، وخلفيات بطاقات على صفحات سوداء.
+
+### الحالات التفاعلية
+- **رابط افتراضي (خلفية داكنة)** (`#ffffff`): روابط بيضاء على الخلفيات الداكنة.
+- **رابط افتراضي (خلفية فاتحة)** (`#000000`): روابط سوداء مع خط تسطير أخضر على الخلفيات الفاتحة.
+- **تمرير الرابط** (`#3860be`): تحوّل أزرق عند التمرير عبر جميع أنواع الروابط.
+- **تمرير الزر** (`#1eaedb`): تمييز زيتوني لحالات تمرير الزر.
+- **زر نشط** (`#007fff`): أزرق ساطع لحالات الزر النشطة/المضغوطة.
+- **حلقة التركيز** (`#000000 solid 2px`): مخطط أسود لتركيز لوحة المفاتيح.
+
+### الظلال والعمق
+- **ظل البطاقة** (`rgba(0, 0, 0, 0.3) 0px 0px 5px 0px`): ظل محيطي خفي للبطاقات المرفوعة.
+
+## 3. قواعد الطباعة
+
+### عائلة الخطوط
+- **الأساسية**: `NVIDIA-EMEA`، مع بدائل: `Arial, Helvetica, sans-serif`
+- **خط الأيقونات**: `Font Awesome 6 Pro` (وزن 900 للأيقونات الصلبة، 700 للعادية)
+- **أيقونة حادة**: `Font Awesome 6 Sharp` (وزن 300 للأيقونات الخفيفة، 400 للعادية)
+
+### التسلسل الهرمي
+
+| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الأحرف | ملاحظات |
+|------|------|------|--------|-------------|----------------|-------|
+| بطل العرض | NVIDIA-EMEA | 36px (2.25rem) | 700 | 1.25 (ضيق) | عادي | عناوين أقصى تأثير |
+| عنوان القسم | NVIDIA-EMEA | 24px (1.50rem) | 700 | 1.25 (ضيق) | عادي | عناوين الأقسام، وعناوين البطاقات |
+| العنوان الفرعي | NVIDIA-EMEA | 22px (1.38rem) | 400 | 1.75 (مريح) | عادي | أوصاف الميزات، والعناوين الفرعية |
+| عنوان البطاقة | NVIDIA-EMEA | 20px (1.25rem) | 700 | 1.25 (ضيق) | عادي | عناوين البطاقات والوحدات |
+| جسم كبير | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.67 (مريح) | عادي | جسم مؤكد، فقرات ريادية |
+| الجسم | NVIDIA-EMEA | 16px (1.00rem) | 400 | 1.50 | عادي | نص القراءة القياسي |
+| جسم غامق | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.50 | عادي | تسميات قوية، عناصر التنقل |
+| جسم صغير | NVIDIA-EMEA | 15px (0.94rem) | 400 | 1.67 (مريح) | عادي | محتوى ثانوي، أوصاف |
+| جسم صغير غامق | NVIDIA-EMEA | 15px (0.94rem) | 700 | 1.50 | عادي | محتوى ثانوي مؤكد |
+| زر كبير | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.25 (ضيق) | عادي | أزرار CTA الأساسية |
+| زر | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.25 (ضيق) | عادي | أزرار قياسية |
+| زر مضغوط | NVIDIA-EMEA | 14.4px (0.90rem) | 700 | 1.00 (ضيق) | 0.144px | أزرار صغيرة/مضغوطة |
+| رابط | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | عادي | روابط التنقل |
+| رابط بالأحرف الكبيرة | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | عادي | `text-transform: uppercase`، تسميات التنقل |
+| تعليق | NVIDIA-EMEA | 14px (0.88rem) | 600 | 1.50 | عادي | بيانات وصفية، طوابع زمنية |
+| تعليق صغير | NVIDIA-EMEA | 12px (0.75rem) | 400 | 1.25 (ضيق) | عادي | طباعة دقيقة، قانونية |
+| تسمية دقيقة | NVIDIA-EMEA | 10px (0.63rem) | 700 | 1.50 | عادي | `text-transform: uppercase`، شارات صغيرة |
+| دقيقة | NVIDIA-EMEA | 11px (0.69rem) | 700 | 1.00 (ضيق) | عادي | أصغر نص واجهة مستخدم |
+
+### المبادئ
+- **الغامق كصوت افتراضي**: تعتمد NVIDIA بشكل كبير على الوزن 700 للعناوين، والأزرار، والروابط، والتسميات. الوزن 400 محجوز لنص الجسم والأوصاف — كل شيء آخر غامق، يُسقط الثقة والسلطة.
+- **عناوين ضيقة، جسم مريح**: ارتفاع سطر العنوان ثابت عند 1.25 (ضيق)، بينما يرتاح نص الجسم إلى 1.50-1.67. هذا التباين يخلق كثافة بصرية في أعلى كتل المحتوى وقراءة مريحة في الفقرات.
+- **الأحرف الكبيرة للتنقل**: تسميات الروابط تستخدم `text-transform: uppercase` مع وزن 700، مما يخلق صوت تنقل يُقرأ كتسميات مواصفات الأجهزة.
+- **لا تتبع زخرفي**: تباعد الأحرف عادي في جميع أنحاء الصفحة، باستثناء الأزرار المضغوطة (0.144px). الخط نفسه يحمل الطابع الصناعي دون تلاعب.
+
+## 4. تنسيقات المكونات
+
+### الأزرار
+
+**أساسي (حد أخضر)**
+- الخلفية: `transparent`
+- النص: `#000000`
+- الحشو: 11px 13px
+- الحد: `2px solid #76b900`
+- القطر: 2px
+- الخط: 16px وزن 700
+- التمرير: خلفية `#1eaedb`، نص `#ffffff`
+- النشاط: خلفية `#007fff`، نص `#ffffff`، حد `1px solid #003eff`، scale(1)
+- التركيز: خلفية `#1eaedb`، نص `#ffffff`، مخطط `#000000 solid 2px`، تعتيم 0.9
+- الاستخدام: CTA أساسي ("تعرف أكثر"، "استكشف الحلول")
+
+**ثانوي (حد أخضر رفيع)**
+- الخلفية: شفافة
+- الحد: `1px solid #76b900`
+- القطر: 2px
+- الاستخدام: الإجراءات الثانوية، بدائل CTA
+
+**مضغوط / مضمّن**
+- الخط: 14.4px وزن 700
+- تباعد الأحرف: 0.144px
+- ارتفاع السطر: 1.00
+- الاستخدام: CTA مضمّنة، تنقل مضغوط
+
+### البطاقات والحاويات
+- الخلفية: `#ffffff` (فاتح) أو `#1a1a1a` (أقسام داكنة)
+- الحد: لا شيء (حواف نظيفة) أو `1px solid #5e5e5e`
+- القطر: 2px
+- الظل: `rgba(0, 0, 0, 0.3) 0px 0px 5px 0px` للبطاقات المرفوعة
+- التمرير: تكثيف الظل
+- الحشو: 16-24px داخلي
+
+### الروابط
+- **على خلفية داكنة**: `#ffffff`، لا خط تسطير، التمرير ينتقل إلى `#3860be`
+- **على خلفية فاتحة**: `#000000` أو `#1a1a1a`، خط تسطير `2px solid #76b900`، التمرير ينتقل إلى `#3860be`، يُزال خط التسطير
+- **روابط خضراء**: `#76b900`، التمرير ينتقل إلى `#3860be`
+- **روابط صامتة**: `#666666`، التمرير ينتقل إلى `#3860be`
+
+### التنقل
+- خلفية سوداء داكنة (`#000000`)
+- الشعار محاذاة يسرى، علامة NVIDIA الكلمية بارزة
+- الروابط: NVIDIA-EMEA 14px وزن 700 بالأحرف الكبيرة، `#ffffff`
+- التمرير: تحوّل اللون، لا تغيير في خط التسطير
+- قوائم منسدلة ضخمة لفئات المنتجات
+- ثابتة عند التمرير مع خلفية
+
+### معالجة الصور
+- عروض المنتج/GPU كصور بطولية، غالباً بالعرض الكامل
+- صور لقطات الشاشة مع ظل خفي للعمق
+- تراكبات تدرج أخضر على أقسام البطل الداكنة
+- حاويات أفاتار دائرية بقطر 50%
+
+### المكونات المميزة
+
+**بطاقات المنتج**
+- بطاقة بيضاء أو داكنة نظيفة بأقطار دنيا (2px)
+- حد تمييز أخضر أو خط تسطير على العنوان
+- نمط عنوان غامق + وصف أخف
+- CTA بحد أخضر في الأسفل
+
+**جداول المواصفات التقنية**
+- تخطيطات شبكية صناعية
+- خلفيات صفوف متبادلة (تحوّل رمادي خفي)
+- تسميات غامقة، قيم عادية
+- تمييزات خضراء للمقاييس الرئيسية
+
+**بانر الكوكيز/الموافقة**
+- وضع ثابت في الأسفل
+- أزرار مستديرة (قطر 2px)
+- معالجات حدود رمادية
+
+## 5. مبادئ التخطيط
+
+### نظام التباعد
+- الوحدة الأساسية: 8px
+- المقياس: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 15px
+- قيم الحشو الأساسية: 8px, 11px, 13px, 16px, 24px, 32px
+- تباعد الأقسام: 48-80px حشو رأسي
+
+### الشبكة والحاوية
+- أقصى عرض للمحتوى: تقريباً 1200px (محاط)
+- أقسام بطولية بعرض كامل مع نص محاط
+- أقسام الميزات: شبكات 2-3 أعمدة لبطاقات المنتجات
+- عمود واحد لمحتوى المقالات/المدونة
+- تخطيطات شريطية جانبية للتوثيق
+
+### فلسفة المساحة البيضاء
+- **كثافة هادفة**: تستخدم NVIDIA تباعداً أضيق من مواقع SaaS النموذجية، مما يعكس كثافة المحتوى التقني. المساحة البيضاء موجودة للفصل بين المفاهيم، وليس لخلق فراغ فاخر.
+- **إيقاع الأقسام**: تتناوب الأقسام الداكنة مع الأقسام البيضاء، باستخدام لون الخلفية (وليس فقط التباعد) لفصل كتل المحتوى.
+- **كثافة البطاقات**: تجلس بطاقات المنتجات بالقرب من بعضها البعض مع فجوات 16-20px، مما يخلق شعوراً بالكتالوج بدلاً من شعور المعرض.
+
+### مقياس نصف القطر للحدود
+- دقيق (1px): امتدادات مضمّنة، عناصر صغيرة
+- قياسي (2px): الأزرار، البطاقات، الحاويات، المدخلات — الافتراضي لكل شيء تقريباً
+- دائري (50%): صور الأفاتار، ومؤشرات علامات التبويب الدائرية
+
+## 6. العمق والارتفاع
+
+| المستوى | المعالجة | الاستخدام |
+|-------|-----------|-----|
+| مسطح (المستوى 0) | لا ظل | خلفيات الصفحات، النص المضمّن |
+| خفي (المستوى 1) | `rgba(0,0,0,0.3) 0px 0px 5px 0px` | البطاقات القياسية، النوافذ المنبثقة |
+| حد (المستوى 1b) | `1px solid #5e5e5e` | فواصل المحتوى، حدود الأقسام |
+| تمييز أخضر (المستوى 2) | `2px solid #76b900` | العناصر النشطة، CTAs، العناصر المحددة |
+| تركيز (إمكانية الوصول) | مخطط `2px solid #000000` | حلقة تركيز لوحة المفاتيح |
+
+**فلسفة الظل**: نظام عمق NVIDIA بسيط وعملي. هناك أساساً قيمة ظل واحدة — تمويه محيطي 5px بتعتيم 30% — تُستخدم بشكل متحفظ للبطاقات والنوافذ المنبثقة. الإشارة الأساسية للعمق ليست الظل بل _تباين الألوان_: الخلفيات السوداء بجانب الأقسام البيضاء، والحدود الخضراء على الأسطح السوداء. هذا يخلق تطبقاً بصرياً يشبه الأجهزة حيث يأتي العمق من اختلاف المواد، وليس من الضوء المحاكى.
+
+### العمق الزخرفي
+- غسالات التدرج الأخضر خلف محتوى البطل
+- تدرجات من داكن إلى أكثر داكناً (من الأسود إلى شبه الأسود) لانتقالات الأقسام
+- لا مورفيزم زجاجي أو تأثيرات ضبابية — الوضوح فوق الأجواء
+
+## 7. السلوك المتجاوب
+
+### نقاط الكسر
+| الاسم | العرض | التغييرات الرئيسية |
+|------|-------|-------------|
+| جوال صغير | <375px | عمود مفرد مضغوط، حشو مخفض |
+| جوال | 375-425px | تخطيط جوال قياسي |
+| جوال كبير | 425-600px | جوال أوسع، بعض تلميحات 2 أعمدة |
+| لوحة صغيرة | 600-768px | تبدأ شبكات عمودين |
+| لوحة | 768-1024px | شبكات بطاقات كاملة، تنقل موسع |
+| سطح مكتب | 1024-1350px | تخطيط سطح مكتب قياسي |
+| سطح مكتب كبير | >1350px | أقصى عرض للمحتوى، هوامش سخية |
+
+### أهداف اللمس
+- تستخدم الأزرار حشو 11px 13px لأهداف نقر مريحة
+- روابط التنقل بحجم 14px بالأحرف الكبيرة مع تباعد كافٍ
+- الأزرار ذات الحدود الخضراء توفر أهداف لمس عالية التباين على الخلفيات الداكنة
+- الجوال: انهيار قائمة الهمبرغر مع تراكب بالشاشة الكاملة
+
+### استراتيجية الانهيار
+- البطل: عنوان 36px يتقلص بشكل تناسبي
+- التنقل: التنقل الأفقي الكامل ينهار إلى قائمة الهمبرغر عند ~1024px
+- بطاقات المنتجات: من 3 أعمدة إلى عمودين إلى عمود واحد مكدّس
+- التذييل: شبكة متعددة الأعمدة تنهار إلى عمود واحد مكدّس
+- تباعد الأقسام: 64-80px يتقلص إلى 32-48px على الجوال
+- الصور: الحفاظ على نسبة الأبعاد، تتسع مع عرض الحاوية
+
+### سلوك الصور
+- عروض GPU/المنتج تحافظ على دقة عالية في جميع الأحجام
+- الصور البطولية تتسع بشكل تناسبي مع منفذ العرض
+- صور البطاقات تستخدم نسب أبعاد متسقة
+- الأقسام الداكنة بعرض كامل تحافظ على معالجة من حافة إلى حافة
+
+## 8. السلوك المتجاوب (موسع)
+
+### تحجيم الطباعة
+- العرض 36px يتقلص إلى ~24px على الجوال
+- عناوين الأقسام 24px تتقلص إلى ~20px على الجوال
+- نص الجسم يحافظ على 15-16px عبر جميع نقاط الكسر
+- نص الأزرار يحافظ على 16px لأهداف نقر متسقة
+
+### استراتيجية الأقسام الداكنة/الفاتحة
+- تتناوب الأقسام الداكنة (خلفية سوداء، نص أبيض) مع الأقسام الفاتحة (خلفية بيضاء، نص أسود)
+- يظل التمييز الأخضر متسقاً عبر كلا نوعي السطح
+- على الداكن: الروابط بيضاء، وخطوط التسطير خضراء
+- على الفاتح: الروابط سوداء، وخطوط التسطير خضراء
+- هذا التناوب يخلق إيقاع تمرير طبيعياً وتجميع محتوى
+
+## 9. دليل موجه الوكيل
+
+### مرجع الألوان السريع
+- التمييز الأساسي: أخضر NVIDIA (`#76b900`)
+- الخلفية الداكنة: الأسود الحقيقي (`#000000`)
+- الخلفية الفاتحة: الأبيض الخالص (`#ffffff`)
+- نص العنوان (خلفية داكنة): أبيض (`#ffffff`)
+- نص العنوان (خلفية فاتحة): أسود (`#000000`)
+- نص الجسم (خلفية فاتحة): أسود (`#000000`) أو شبه الأسود (`#1a1a1a`)
+- نص الجسم (خلفية داكنة): أبيض (`#ffffff`) أو رمادي 300 (`#a7a7a7`)
+- تمرير الرابط: أزرق (`#3860be`)
+- تمييز الحد: `2px solid #76b900`
+- تمرير الزر: زيتوني (`#1eaedb`)
+
+### أمثلة على موجهات المكونات
+- "أنشئ قسم بطل على خلفية سوداء. العنوان بحجم 36px NVIDIA-EMEA وزن 700، ارتفاع سطر 1.25، لون #ffffff. العنوان الفرعي بحجم 18px وزن 400، ارتفاع سطر 1.67، لون #a7a7a7. زر CTA بخلفية شفافة، حد 2px solid #76b900، قطر 2px، حشو 11px 13px، نص #ffffff. التمرير: خلفية #1eaedb، نص أبيض."
+- "صمم بطاقة منتج: خلفية بيضاء، قطر حد 2px، box-shadow rgba(0,0,0,0.3) 0px 0px 5px. العنوان بحجم 20px NVIDIA-EMEA وزن 700، ارتفاع سطر 1.25، لون #000000. الجسم بحجم 15px وزن 400، ارتفاع سطر 1.67، لون #757575. تمييز خط تسطير أخضر على العنوان: border-bottom 2px solid #76b900."
+- "أنشئ شريط تنقل: خلفية #000000، ثابت في الأعلى. شعار NVIDIA محاذاة يسرى. الروابط بحجم 14px NVIDIA-EMEA وزن 700 بالأحرف الكبيرة، لون #ffffff. التمرير: لون #3860be. زر CTA ذو حد أخضر محاذاة يمنى."
+- "أنشئ قسم ميزات داكن: خلفية #000000. تسمية القسم بحجم 14px وزن 700 بالأحرف الكبيرة، لون #76b900. العنوان بحجم 24px وزن 700، لون #ffffff. الوصف بحجم 16px وزن 400، لون #a7a7a7. ثلاث بطاقات منتج في صف مع فجوة 20px."
+- "صمم تذييلاً: خلفية #000000. تخطيط متعدد الأعمدة مع مجموعات روابط. الروابط بحجم 14px وزن 400، لون #a7a7a7. التمرير: لون #76b900. الشريط السفلي مع نص قانوني بحجم 12px، لون #757575."
+
+### دليل التكرار
+1. استخدم دائماً `#76b900` كتمييز، وليس كتعبئة خلفية — إنه لون إشارة للحدود وخطوط التسطير والتمييزات
+2. الأزرار شفافة بحدود خضراء افتراضياً — تظهر الخلفيات المملوءة فقط في حالات التمرير/النشاط
+3. الوزن 700 هو الصوت السائد لجميع العناصر التفاعلية وعناصر العنوان؛ 400 فقط لفقرات الجسم
+4. نصف القطر للحدود 2px لكل شيء — هذا التدوير الحاد والأدنى هو جوهر الجمالية الصناعية
+5. الأقسام الداكنة تستخدم نصاً أبيض؛ الأقسام الفاتحة تستخدم نصاً أسود — التمييز الأخضر يعمل بشكل متطابق على كليهما
+6. تمرير الرابط دائماً `#3860be` (أزرق) بغض النظر عن اللون الافتراضي للرابط
+7. ارتفاع السطر 1.25 للعناوين، 1.50-1.67 لنص الجسم — حافظ على هذا التباين للتسلسل الهرمي البصري
+8. يستخدم التنقل الأحرف الكبيرة 14px غامقة — هذه الطباعة بأسلوب تسمية الأجهزة هي جزء من صوت العلامة التجارية