0 Fork 0

Files

T

admin 5afeb6b78a ④段整套同步（六节＋ 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。

2026-10-15 21:17:28 +08:00

27 KiB

Raw Blame History

Design System Inspired by IBM

Category: وسائل الإعلام والمستهلكين تكنولوجيا المؤسسات. نظام تصميم Carbon، لوحة ألوان زرقاء منظمة.

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

يُجسِّد موقع IBM رقمياً سلطة المؤسسة المبنية على نظام Carbon Design System — لغة تصميم منظمة بمنهجية دقيقة لدرجة أنها تبدو كمواصفة هندسية مُقدَّمة في صورة صفحة ويب. تقوم الصفحة على ثنائية صارمة: قماش أبيض ناصع (#ffffff) مع نص شبه أسود (#161616)، تُكسره لهجة موحَّدة لا تتزعزع — IBM Blue 60 (#0f62fe). هذا ليس تبسيطاً مرحاً على طراز شركات التكنولوجيا الناشئة؛ بل هو دقة مؤسسية تتكثف في كل بكسل. كل عنصر يقع ضمن شبكة 2x الصارمة لـ Carbon، وكل لون يُعيَّن إلى رمز دلالي، وكل قيمة تباعد تنجذب إلى الوحدة الأساسية 8px.

تُمثّل عائلة خطوط IBM Plex العمود الفقري للنظام. يمنح IBM Plex Sans بالوزن الخفيف (300) في عناوين العرض جودةً هوائية غير متوقعة، شبه رقيقة عند الأحجام الكبيرة — نقطة توازن مقصودة في مواجهة ثقل IBM المؤسسي. عند أحجام النص الأساسي، يُدخل الوزن العادي (400) مع تتبع الحروف بمقدار 0.16px على تعليقات 14px ذلك التتبع الدقيق المُتناهي الصغر الذي يجعل نص Carbon يبدو مُهندَساً لا مُصمَّماً. يخدم IBM Plex Mono الأكواد والبيانات والتسميات التقنية، مُكتملاً ثالوث العائلة جنباً إلى جنب مع IBM Plex Serif النادر الظهور.

ما يُميَّز به هوية IBM البصرية — بعيداً عن الأسلوب الأحادي اللون المُضاف إليه الأزرق — هو الاعتماد على نظام رموز مكوّنات Carbon. كل حالة تفاعلية تُعيَّن إلى خاصية CSS مخصصة بادئتها --cds- (Carbon Design System). الأزرار لا تحتوي على ألوان مُضمَّنة؛ بل تُشير إلى --cds-button-primary و--cds-button-primary-hover و--cds-button-primary-active. هذه البنية المُرمَّزة تعني أن الطبقة البصرية بأكملها ما هي إلا غلاف رفيع فوق أساس بالغ المنهجية — المكافئ التصميمي لواجهة برمجية محكمة التنميط.

الخصائص الرئيسية:

IBM Plex Sans بالوزن 300 (Light) للعرض — رصانة مؤسسية عبر ضبط النفس الطباعي
IBM Plex Mono للمحتوى البرمجي والتقني مع تتبع حروف ثابت 0.16px عند الأحجام الصغيرة
لون تمييزي واحد: IBM Blue 60 (#0f62fe) — لكل عنصر تفاعلي، لكل دعوة للتصرف، لكل رابط
نظام رموز Carbon (--cds-*) يُشغِّل جميع الألوان الدلالية، مُتيحاً التبديل بين السمات على مستوى المتغيرات
شبكة تباعد 8px مع التزام صارم — لا قيم اعتباطية، كل شيء منتظم
بطاقات مسطحة بلا حدود على سطح Gray 10 بـ#f4f4f4 — العمق عبر تراكب ألوان الخلفية، لا الظلال
حقول إدخال بحدود سفلية فقط (لا مُؤطَّرة) — نمط النموذج المميز لـ Carbon
border-radius بقيمة 0px على الأزرار الرئيسية — مستطيلة بلا مواربة، بلا تليين

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

الألوان الرئيسية

IBM Blue 60 (#0f62fe): اللون التفاعلي الوحيد. الأزرار الرئيسية والروابط وحالات التركيز والمؤشرات النشطة. هذا هو التدرج اللوني الوحيد في لوحة واجهة المستخدم الجوهرية.
الأبيض (#ffffff): خلفية الصفحة، أسطح البطاقات، نص الزر على الأزرق، --cds-background.
Gray 100 (#161616): النص الرئيسي، العناوين، خلفيات الأسطح الداكنة، شريط التنقل، التذييل. --cds-text-primary.

التدرج المحايد (عائلة الرمادي)

Gray 100 (#161616): النص الرئيسي، العناوين، الواجهة الداكنة، خلفية التذييل.
Gray 90 (#262626): الأسطح الداكنة الثانوية، حالات التمرير على الخلفيات الداكنة.
Gray 80 (#393939): الأسطح الداكنة الثالثية، الحالات النشطة.
Gray 70 (#525252): النص الثانوي، النص المساعد، الأوصاف. --cds-text-secondary.
Gray 60 (#6f6f6f): نص العنصر النائب، النص المعطَّل.
Gray 50 (#8d8d8d): الأيقونات المعطَّلة، التسميات الخافتة.
Gray 30 (#c6c6c6): الحدود، خطوط الفاصل، الحدود السفلية لحقول الإدخال. --cds-border-subtle.
Gray 20 (#e0e0e0): الحدود الخفيفة، محيطات البطاقات.
Gray 10 (#f4f4f4): خلفية السطح الثانوية، تعبئة البطاقات، الصفوف المتعاقبة. --cds-layer-01.
Gray 10 Hover (#e8e8e8): حالة التمرير لأسطح Gray 10.

التفاعلية

Blue 60 (#0f62fe): التفاعل الرئيسي — الأزرار والروابط والتركيز. --cds-link-primary، --cds-button-primary.
Blue 70 (#0043ce): حالة تمرير الرابط. --cds-link-primary-hover.
Blue 80 (#002d9c): الحالة النشطة/المضغوطة للعناصر الزرقاء.
Blue 10 (#edf5ff): سطح ذو صبغة زرقاء، خلفية الصف المحدد.
Focus Blue (#0f62fe): --cds-focus — حد داخلي 2px على العناصر المُركَّزة.
Focus Inset (#ffffff): --cds-focus-inset — حلقة داخلية بيضاء للتركيز على الخلفيات الداكنة.

الدعم والحالات

Red 60 (#da1e28): الخطأ، الخطر. --cds-support-error.
Green 50 (#24a148): النجاح. --cds-support-success.
Yellow 30 (#f1c21b): التحذير. --cds-support-warning.
Blue 60 (#0f62fe): المعلوماتي. --cds-support-info.

السمة الداكنة (سمة Gray 100)

الخلفية: Gray 100 (#161616). --cds-background.
Layer 01: Gray 90 (#262626). أسطح البطاقات والحاويات.
Layer 02: Gray 80 (#393939). الأسطح المرتفعة.
النص الرئيسي: Gray 10 (#f4f4f4). --cds-text-primary.
النص الثانوي: Gray 30 (#c6c6c6). --cds-text-secondary.
الحد الخفيف: Gray 80 (#393939). --cds-border-subtle.
التفاعلية: Blue 40 (#78a9ff). تنتقل الروابط والعناصر التفاعلية إلى درجة أفتح لتحقيق التباين.

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

عائلة الخطوط

الرئيسي: IBM Plex Sans، مع البدائل: Helvetica Neue, Arial, sans-serif
الأحادي العرض: IBM Plex Mono، مع البدائل: Menlo, Courier, monospace
الواجهة (استخدام محدود): IBM Plex Serif، للسياقات التحريرية والتعبيرية
خط الأيقونات: ibm_icons — حروف أيقونية خاصة بحجم 20px

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

الدور	الخط	الحجم	الوزن	ارتفاع السطر	تتبع الحروف	ملاحظات
Display 01	IBM Plex Sans	60px (3.75rem)	300 (Light)	1.17 (70px)	0	أقصى تأثير، وزن خفيف للأناقة
Display 02	IBM Plex Sans	48px (3.00rem)	300 (Light)	1.17 (56px)	0	الهيرو الثانوي، البديل المتجاوب
Heading 01	IBM Plex Sans	42px (2.63rem)	300 (Light)	1.19 (50px)	0	عنوان تعبيري
Heading 02	IBM Plex Sans	32px (2.00rem)	400 (Regular)	1.25 (40px)	0	عناوين الأقسام
Heading 03	IBM Plex Sans	24px (1.50rem)	400 (Regular)	1.33 (32px)	0	عناوين الأقسام الفرعية
Heading 04	IBM Plex Sans	20px (1.25rem)	600 (Semibold)	1.40 (28px)	0	عناوين البطاقات، رؤوس الميزات
Heading 05	IBM Plex Sans	20px (1.25rem)	400 (Regular)	1.40 (28px)	0	عناوين بطاقات أخف وزناً
Body Long 01	IBM Plex Sans	16px (1.00rem)	400 (Regular)	1.50 (24px)	0	نص القراءة القياسي
Body Long 02	IBM Plex Sans	16px (1.00rem)	600 (Semibold)	1.50 (24px)	0	النص الأساسي المُبرَز، التسميات
Body Short 01	IBM Plex Sans	14px (0.88rem)	400 (Regular)	1.29 (18px)	0.16px	النص المضغوط، التعليقات
Body Short 02	IBM Plex Sans	14px (0.88rem)	600 (Semibold)	1.29 (18px)	0.16px	التعليقات الغامقة، عناصر التنقل
Caption 01	IBM Plex Sans	12px (0.75rem)	400 (Regular)	1.33 (16px)	0.32px	البيانات الوصفية، الطوابع الزمنية
Code 01	IBM Plex Mono	14px (0.88rem)	400 (Regular)	1.43 (20px)	0.16px	الكود المضمَّن، الطرفية
Code 02	IBM Plex Mono	16px (1.00rem)	400 (Regular)	1.50 (24px)	0	كتل الكود
Mono Display	IBM Plex Mono	42px (2.63rem)	400 (Regular)	1.19 (50px)	0	زخرفي أحادي العرض للهيرو

المبادئ

الوزن الخفيف عند أحجام العرض: تستخدم مجموعة الطباعة التعبيرية في Carbon الوزن 300 (Light) عند 42px فما فوق. يخلق ذلك توتراً مميزاً — المحتوى يتحدث بسلطة مؤسسية بينما تهمس الأحرف بخفة طباعية.
التتبع الدقيق عند الأحجام الصغيرة: تتبع حروف 0.16px عند 14px و0.32px عند 12px. هذه القيم التي تبدو ضئيلة هي السلاح السري لـ Carbon في قرائية الأحجام المضغوطة — تفتح أحرف IBM Plex الضيقة بمقدار كافٍ تماماً.
ثلاثة أوزان وظيفية: 300 (عرض/تعبيري)، 400 (نص أساسي/قراءة)، 600 (تأكيد/تسميات واجهة المستخدم). الوزن 700 غائب عمداً من مقياس الطباعة في الإنتاج.
الإنتاجي مقابل التعبيري: المجموعات الإنتاجية تستخدم ارتفاعات أسطر أكثر إحكاماً (1.29) لواجهات المستخدم الكثيفة. المجموعات التعبيرية تتنفس أكثر (1.40-1.50) للمحتوى التسويقي والتحريري.

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

الأزرار

الزر الرئيسي (الأزرق)

الخلفية: #0f62fe (Blue 60) → --cds-button-primary
النص: #ffffff (أبيض)
الحشو: 14px 63px 14px 15px (غير متماثل — مساحة للأيقونة التالية)
الحد: 1px solid transparent
Border-radius: 0px (مستطيل حاد — الطابع المميز لـ Carbon)
الارتفاع: 48px (افتراضي)، 40px (مضغوط)، 64px (تعبيري)
التمرير: #0353e9 (Blue 60 Hover) → --cds-button-primary-hover
النشط: #002d9c (Blue 80) → --cds-button-primary-active
التركيز: 2px solid #0f62fe داخلي + 1px solid #ffffff داخلي

الزر الثانوي (الرمادي)

الخلفية: #393939 (Gray 80)
النص: #ffffff
التمرير: #4c4c4c (Gray 70)
النشط: #6f6f6f (Gray 60)
نفس الحشو/نصف القطر للزر الرئيسي

الزر الثالثي (الأزرق الشفاف)

الخلفية: transparent
النص: #0f62fe (Blue 60)
الحد: 1px solid #0f62fe
التمرير: نص #0353e9 + صبغة خلفية Blue 10
Border-radius: 0px

الزر الشبحي

الخلفية: transparent
النص: #0f62fe (Blue 60)
الحشو: 14px 16px
الحد: لا يوجد
التمرير: صبغة خلفية #e8e8e8

زر الخطر

الخلفية: #da1e28 (Red 60)
النص: #ffffff
التمرير: #b81921 (Red 70)

البطاقات والحاويات

الخلفية: #ffffff على السمة البيضاء، #f4f4f4 (Gray 10) للبطاقات المرتفعة
الحد: لا يوجد (تصميم مسطح — لا حدود ولا ظلال على معظم البطاقات)
Border-radius: 0px (مطابقاً لجماليات الزر المستطيل)
التمرير: تنتقل الخلفية إلى #e8e8e8 (Gray 10 Hover) للبطاقات القابلة للنقر
حشو المحتوى: 16px
الفصل: تراكب ألوان الخلفية (أبيض → رمادي 10 → أبيض) بدلاً من الظلال

حقول الإدخال والنماذج

الخلفية: #f4f4f4 (Gray 10) — --cds-field
النص: #161616 (Gray 100)
الحشو: 0px 16px (أفقي فقط)
الارتفاع: 40px (افتراضي)، 48px (كبير)
الحد: لا يوجد على الجانبين/الأعلى — 2px solid transparent في الأسفل
الحد السفلي النشط: 2px solid #161616 (Gray 100)
التركيز: حد سفلي 2px solid #0f62fe (Blue 60) — --cds-focus
الخطأ: حد سفلي 2px solid #da1e28 (Red 60)
التسمية: 12px IBM Plex Sans، تتبع 0.32px، Gray 70
النص المساعد: 12px، Gray 60
العنصر النائب: Gray 60 (#6f6f6f)
Border-radius: 0px (أعلى) — حقول الإدخال ذات زوايا حادة

التنقل

الخلفية: #161616 (Gray 100) — رأس صفحة داكن بعرض كامل
الارتفاع: 48px
الشعار: شعار IBM ذو 8 أشرطة، أبيض على داكن، محاذى لليسار
الروابط: 14px IBM Plex Sans، وزن 400، #c6c6c6 (Gray 30) افتراضي
تمرير الرابط: نص #ffffff
الرابط النشط: #ffffff مع مؤشر حد سفلي
محوِّل المنصة: تبويبات أفقية محاذية لليسار
البحث: حقل بحث منزلق يُفعَّل بالأيقونة
الجوال: قائمة همبرغر مع لوحة تنزلق من اليسار

الروابط

الافتراضي: #0f62fe (Blue 60) بلا خط تحتي
التمرير: #0043ce (Blue 70) مع خط تحتي
المزار: يبقى Blue 60 (لا تغيير في حالة الزيارة)
الروابط المضمَّنة: مُسطَّرة بشكل افتراضي في نص الجسم

المكونات المميزة

كتلة المحتوى (الهيرو/الميزة)

أشرطة خلفية بيضاء/رمادية-10 متعاقبة بعرض كامل
عنوان محاذٍ لليسار بنوع عرض 60px أو 48px
دعوة للتصرف كزر أزرق رئيسي مع أيقونة سهم
الصورة/الرسم التوضيحي محاذٍ لليمين أو أسفل على الجوال

الإطار (البطاقة القابلة للنقر)

الخلفية: #f4f4f4 أو #ffffff
تمرير بحد سفلي بعرض كامل أو تحول في الخلفية
أيقونة سهم في أسفل اليمين عند التمرير
لا ظل — المسطحية هي الهوية

الوسم / التسمية

الخلفية: لون سياقي بشفافية 10% (مثل Blue 10، Red 10)
النص: اللون المقابل من الدرجة 60
الحشو: 4px 8px
Border-radius: 24px (شكل حبة — استثناء لقاعدة 0px)
الخط: 12px وزن 400

شريط الإشعار

شريط بعرض كامل، خلفية Blue 60 أو Gray 100 عادةً
نص أبيض، 14px
أيقونة الإغلاق/الرفض محاذية لليمين

5. مبادئ التخطيط

نظام التباعد

الوحدة الأساسية: 8px (شبكة Carbon 2x)
مقياس تباعد المكونات: 2px، 4px، 8px، 12px، 16px، 24px، 32px، 40px، 48px
مقياس تباعد التخطيط: 16px، 24px، 32px، 48px، 64px، 80px، 96px، 160px
الوحدة الصغرى: 8px (أصغر تباعد قابل للاستخدام)
الحشو داخل المكونات: 16px عادةً
الفجوة بين البطاقات/الإطارات: 1px (خيط رفيع) أو 16px (قياسي)

الشبكة والحاوية

شبكة 16 عموداً (نظام شبكة Carbon 2x)
أقصى عرض للمحتوى: 1584px (أقصى نقطة توقف)
فراغات الأعمدة: 32px (16px على الجوال)
الهامش: 16px (جوال)، 32px (جهاز لوحي فما فوق)
يمتد المحتوى عادةً على 8-12 عموداً لطول أسطر مقروء
أقسام ممتدة بالكامل تتعاقب مع محتوى محدود

فلسفة المسافات البيضاء

الكثافة الوظيفية: تُفضِّل Carbon الكثافة الإنتاجية على المسافات البيضاء الواسعة. الأقسام مُحكمة التعبئة مقارنة بأنظمة تصميم المستهلكين — وهذا يعكس الحمض النووي المؤسسي لـ IBM.
التقسيم بألوان الخلفية: بدلاً من حشو ضخم بين الأقسام، تستخدم IBM ألوان خلفية متعاقبة (أبيض → رمادي 10 → أبيض) لإنشاء فصل بصري بأدنى مساحة عمودية.
إيقاع 48px ثابت: تستخدم انتقالات الأقسام الرئيسية تباعداً عمودياً 48px. يمكن أن تستخدم أقسام الهيرو 80px–96px.

مقياس نصف القطر

0px: الأزرار الرئيسية، حقول الإدخال، الإطارات، البطاقات — المعالجة السائدة. Carbon مستطيل في جوهره.
2px: أحياناً على العناصر التفاعلية الصغيرة (الوسوم)
24px: الوسوم/التسميات (شكل حبة — الاستثناء المستدير الوحيد)
50%: دوائر الصورة الرمزية، حاويات الأيقونات

6. العمق والارتفاع

المستوى	المعالجة	الاستخدام
مسطح (المستوى 0)	لا ظل، خلفية `#ffffff`	سطح الصفحة الافتراضي
Layer 01	لا ظل، خلفية `#f4f4f4`	البطاقات، الإطارات، الأقسام المتعاقبة
Layer 02	لا ظل، خلفية `#e0e0e0`	اللوحات المرتفعة ضمن Layer 01
مرفوع	`0 2px 6px rgba(0,0,0,0.3)`	القوائم المنسدلة، التلميحات، قوائم الفائض
تراكب	`0 2px 6px rgba(0,0,0,0.3)` + شاشة داكنة	مربعات الحوار المشروطة، اللوحات الجانبية
تركيز	`2px solid #0f62fe` داخلي + `1px solid #ffffff`	حلقة تركيز لوحة المفاتيح
الحد السفلي	`2px solid #161616` على الحافة السفلية	حقل الإدخال النشط، مؤشر التبويب النشط

فلسفة الظل: Carbon متعمِّد في تجنُّب الظلال. تحقق IBM العمق بشكل رئيسي من خلال تراكب ألوان الخلفية — تراص الأسطح بدرجات رمادية أكثر قتامة تدريجياً بدلاً من إضافة ظلال للصندوق. يُنشئ ذلك جمالية مسطحة مستوحاة من الطباعة حيث يُعبَّر عن التسلسل الهرمي من خلال قيمة اللون، لا من خلال محاكاة الضوء. تُخصَّص الظلال حصراً للعناصر العائمة (القوائم المنسدلة، التلميحات، النوافذ المشروطة) حيث يتداخل العنصر فعلياً مع المحتوى. هذا التحفظ يمنح الظل النادر تأثيراً ذا معنى — حين يعوم شيء ما في Carbon، فذلك يعني شيئاً.

7. ما يجب وما لا يجب

يجب

استخدام IBM Plex Sans بالوزن 300 لأحجام العرض (42px+) — الخفة مقصودة
تطبيق تتبع حروف 0.16px على نص الجسم بـ14px و0.32px على تعليقات 12px
استخدام border-radius بقيمة 0px على الأزرار وحقول الإدخال والبطاقات والإطارات — المستطيلات هي النظام
الإشارة إلى أسماء رموز --cds-* عند التنفيذ (مثل --cds-button-primary، --cds-text-primary)
استخدام تراكب ألوان الخلفية (أبيض → رمادي 10 → رمادي 20) للعمق بدلاً من الظلال
استخدام الحد السفلي (لا الصندوق) لمؤشرات حقل الإدخال
الحفاظ على ارتفاع الزر الافتراضي 48px والحشو غير المتماثل لاستيعاب الأيقونة
تطبيق Blue 60 (#0f62fe) كلون تمييزي وحيد — أزرق واحد يحكمها جميعاً

لا يجب

لا تُدوِّر زوايا الأزرار — نصف القطر 0px هو هوية Carbon
لا تستخدم الظلال على البطاقات أو الإطارات — المسطحية هي المقصود
لا تُدخِل ألوان تمييزية إضافية — نظام IBM أحادي اللون + الأزرق
لا تستخدم الوزن 700 (غامق) — المقياس يتوقف عند 600 (شبه غامق)
لا تُضِف تتبع حروف لنص حجم العرض — التتبع مخصص فقط لـ14px فما دون
لا تُؤطِّر حقول الإدخال بحدود كاملة — حقول إدخال Carbon تستخدم الحد السفلي فقط
لا تستخدم خلفيات متدرجة — أسطح IBM مسطحة وألوان صلبة
لا تحيد عن شبكة التباعد 8px — يجب أن تكون كل قيمة قابلة للقسمة على 8 (مع 2px و4px للتعديلات الدقيقة)

8. السلوك المتجاوب

نقاط التوقف

الاسم	العرض	التغييرات الرئيسية
Small (sm)	320px	عمود واحد، تنقل همبرغر، هوامش 16px
Medium (md)	672px	بدء شبكات عمودين، محتوى موسَّع
Large (lg)	1056px	التنقل الكامل مرئي، شبكات 3-4 أعمدة
X-Large (xlg)	1312px	أقصى كثافة للمحتوى، تخطيطات عريضة
Max	1584px	أقصى عرض للمحتوى، في المنتصف مع هوامش

أهداف اللمس

ارتفاع الزر: 48px افتراضي، 40px على الأقل (مضغوط)
روابط التنقل: ارتفاع صف 48px للمس
ارتفاع حقل الإدخال: 40px افتراضي، 48px كبير
أزرار الأيقونات: هدف لمس مربع 48px
عناصر القائمة على الجوال: صفوف بعرض كامل 48px

استراتيجية الطي

الهيرو: عرض 60px → 42px → عنوان 32px مع ضيق نافذة العرض
التنقل: رأس صفحة أفقي كامل → همبرغر مع لوحة منزلقة
الشبكة: 4 أعمدة → عمودان → عمود واحد
الإطارات/البطاقات: شبكة أفقية → تراص عمودي
الصور: الحفاظ على نسبة الارتفاع إلى العرض، max-width 100%
التذييل: مجموعات روابط متعددة الأعمدة → عمود واحد متراص
حشو الأقسام: 48px → 32px → 16px

سلوك الصور

صور متجاوبة مع max-width: 100%
رسوم توضيحية للمنتج تتوسع بشكل متناسب
يمكن أن تنتقل صور الهيرو من جنباً إلى جنب إلى تراص أسفل
تصورات البيانات تحافظ على نسبة الارتفاع إلى العرض مع تمرير أفقي على الجوال

9. دليل موجِّهات الوكيل

مرجع سريع للألوان

دعوة التصرف الرئيسية: IBM Blue 60 (#0f62fe)
الخلفية: أبيض (#ffffff)
نص العنوان: Gray 100 (#161616)
نص الجسم: Gray 100 (#161616)
النص الثانوي: Gray 70 (#525252)
السطح/البطاقة: Gray 10 (#f4f4f4)
الحد: Gray 30 (#c6c6c6)
الرابط: Blue 60 (#0f62fe)
تمرير الرابط: Blue 70 (#0043ce)
حلقة التركيز: Blue 60 (#0f62fe)
الخطأ: Red 60 (#da1e28)
النجاح: Green 50 (#24a148)

أمثلة موجِّهات المكونات

"أنشئ قسم هيرو على خلفية بيضاء. عنوان بحجم 60px IBM Plex Sans وزن 300، line-height 1.17، لون #161616. عنوان فرعي بحجم 16px وزن 400، line-height 1.50، لون #525252، max-width 640px. زر دعوة للتصرف أزرق (خلفية #0f62fe، نص #ffffff، border-radius 0px، ارتفاع 48px، حشو 14px 63px 14px 15px)."
"صمِّم إطار بطاقة: خلفية #f4f4f4، border-radius 0px، حشو 16px. عنوان بحجم 20px IBM Plex Sans وزن 600، line-height 1.40، لون #161616. الجسم بحجم 14px وزن 400، letter-spacing 0.16px، line-height 1.29، لون #525252. التمرير: تنتقل الخلفية إلى #e8e8e8."
"ابنِ حقل نموذج: خلفية #f4f4f4، border-radius 0px، ارتفاع 40px، حشو أفقي 16px. تسمية في الأعلى بحجم 12px وزن 400، letter-spacing 0.32px، لون #525252. الحد السفلي: 2px solid transparent افتراضي، 2px solid #0f62fe عند التركيز. العنصر النائب: #6f6f6f."
"أنشئ شريط تنقل داكن: خلفية #161616، ارتفاع 48px. شعار IBM أبيض محاذٍ لليسار. روابط بحجم 14px IBM Plex Sans وزن 400، لون #c6c6c6. التمرير: نص #ffffff. النشط: #ffffff مع حد سفلي 2px."
"ابنِ مكوِّن وسم: خلفية Blue 10 (#edf5ff)، نص Blue 60 (#0f62fe)، حشو 4px 8px، border-radius 24px، 12px IBM Plex Sans وزن 400."

دليل التكرار

استخدم دائماً border-radius بقيمة 0px على الأزرار وحقول الإدخال والبطاقات — هذا غير قابل للتفاوض في Carbon
تتبع الحروف فقط عند الأحجام الصغيرة: 0.16px عند 14px، 0.32px عند 12px — أبداً على نص العرض
ثلاثة أوزان: 300 (عرض)، 400 (جسم)، 600 (تأكيد) — لا غامق
Blue 60 هو اللون التمييزي الوحيد — لا تُدخِل ألوان تمييزية ثانوية
العمق يأتي من تراكب ألوان الخلفية (أبيض → #f4f4f4 → #e0e0e0)، لا من الظلال
حقول الإدخال لها حد سفلي فقط، لا تُؤطَّر بالكامل أبداً
استخدم بادئة --cds- لتسمية الرموز للحفاظ على التوافق مع Carbon
48px هو الارتفاع العالمي للعناصر التفاعلية

27 KiB Raw Blame History