admin
5afeb6b78a
一、④段整套同步（用户选候选 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。
270 lines
21 KiB
Markdown
270 lines
21 KiB
Markdown
# نظام تصميم مستوحى من Cohere
|
|
|
|
> Category: ذكاء اصطناعي ونماذج لغوية كبيرة
|
|
> منصة ذكاء اصطناعي للمؤسسات. تدرجات لونية نابضة بالحياة، وجماليات لوحة تحكم غنية بالبيانات.
|
|
|
|
## 1. الثيم البصري والأجواء العامة
|
|
|
|
واجهة Cohere عبارة عن لوحة تحكم مؤسسية مصقولة — واثقة ونظيفة، مصممة لتجعل الذكاء الاصطناعي يبدو بنية تحتية جادة لا لعبة استهلاكية. التجربة تقوم على خلفية بيضاء ناصعة تُنظَّم فيها المحتويات داخل بطاقات ذات حواف مدوّرة بسخاء (نصف قطر 22px) تُوجِد لغة تضمين عضوية تشبه الغيوم. هذا الموقع يخاطب المديرين التقنيين ومهندسي البنية التحتية المؤسسية: احترافي دون برود، ومتطور دون تعقيد.
|
|
|
|
لغة التصميم تجمع بين عالمين من خلال نظام ثنائي الخطوط: CohereText، خط عرض serif مخصص بتتبع ضيق، يمنح العناوين ثقلاً يشبه بيانات التكنولوجيا، فيما تتولى Unica77 Cohere Web كل النصوص الأساسية وعناصر الواجهة بدقة هندسية سويسرية. هذا الثنائي بين الـ serif والـ sans يُنتج شخصية "السلطة الواثقة تلتقي بوضوح الهندسة" التي تعكس بدقة منصة ذكاء اصطناعي مؤسسية.
|
|
|
|
يُستخدم اللون بقدر شديد من الضبط — الواجهة تعتمد بالكامل تقريباً على الأسود والأبيض مع حدود رمادية باردة (`#d9d9dd`، `#e5e7eb`). يظهر البنفسجي-البنفسجي الغامق فقط في الأقسام الفوتوغرافية البطولية والأقسام المتدرجة والأزرق التفاعلي (`#1863dc`) الذي يشير إلى حالات التمرير والتركيز. هذا الضبط اللوني يعني أن اللون حين يظهر — في لقطات المنتج وصور الشركات والقسم البنفسجي الغامق — يحمل أقصى ثقل بصري.
|
|
|
|
**الخصائص الجوهرية:**
|
|
- خلفية بيضاء ناصعة مع حدود تضمين رمادية باردة
|
|
- نصف قطر حدود 22px — الاستدارة المميزة لـ "بطاقة Cohere"
|
|
- خطان مخصصان: CohereText (serif للعرض) + Unica77 (sans للجسم)
|
|
- ضبط لوني بمستوى مؤسسي: أسود وأبيض ورماديات باردة مع لمسة بنفسجية-زرقاء خفية
|
|
- أقسام بطولية بنفسجية/غامقة توفر تباينًا بصريًا درامياً
|
|
- أزرار شفافة تتحول إلى اللون الأزرق عند التمرير
|
|
- تصوير فوتوغرافي مؤسسي يُظهر تطبيقات متنوعة في العالم الحقيقي
|
|
- CohereMono للشيفرات والتسميات التقنية مع تحويلات للحروف الكبيرة
|
|
|
|
## 2. لوحة الألوان وأدوارها
|
|
|
|
### الألوان الأساسية
|
|
- **Cohere Black** (`#000000`): نص العناوين الرئيسية والعناصر ذات التأثير الأقصى.
|
|
- **Near Black** (`#212121`): لون الروابط الأساسية في الجسم — أكثر ليونة قليلاً من الأسود الخالص.
|
|
- **Deep Dark** (`#17171c`): أسود قريب بلمسة زرقاء للتنقل ونصوص الأقسام الداكنة.
|
|
|
|
### الألوان الثانوية والمميزة
|
|
- **Interaction Blue** (`#1863dc`): لون التمييز التفاعلي الأساسي — يظهر عند التمرير على الأزرار وحالات التركيز والروابط النشطة. اللون الوحيد للإجراءات اللونية.
|
|
- **Ring Blue** (`#4c6ee6` بنسبة 50%): لون حلقة Tailwind لمؤشرات تركيز لوحة المفاتيح.
|
|
- **Focus Purple** (`#9b60aa`): لون حدود تركيز الإدخال — بنفسجي مكتوم.
|
|
|
|
### الأسطح والخلفيات
|
|
- **Pure White** (`#ffffff`): خلفية الصفحة الأساسية وسطح البطاقة.
|
|
- **Snow** (`#fafafa`): أسطح مرفوعة خفية وخلفيات الأقسام الفاتحة.
|
|
- **Lightest Gray** (`#f2f2f2`): حدود البطاقات وأخف خطوط التضمين.
|
|
|
|
### المحايدات والنصوص
|
|
- **Muted Slate** (`#93939f`): روابط التذييل والنصوص الثانوية المُخفتة — رمادي بارد النبرة مع مسحة زرقاء-بنفسجية خفيفة.
|
|
- **Border Cool** (`#d9d9dd`): حدود الأقسام وعناصر القائمة القياسية — رمادي بارد بمسحة بنفسجية خفيفة.
|
|
- **Border Light** (`#e5e7eb`): نوع أفتح من الحدود — gray-200 القياسي في Tailwind.
|
|
|
|
### نظام التدرجات اللونية
|
|
- **النطاق البطولي البنفسجي-البنفسجي**: أقسام بتدرج بنفسجي غامق توفر تباينًا بصريًا درامياً مقابل الخلفية البيضاء. تظهر كنطاقات بالعرض الكامل تضم لقطات المنتج والرسائل الجوهرية.
|
|
- **تدرج التذييل الغامق**: تنتقل الصفحة عبر بنفسجي غامق/فحمي إلى التذييل الأسود، مما يُوجِد تأثير "الغسق".
|
|
|
|
## 3. قواعد الطباعة
|
|
|
|
### مجموعة الخطوط
|
|
- **العرض**: `CohereText`، مع البدائل: `Space Grotesk, Inter, ui-sans-serif, system-ui`
|
|
- **الجسم / الواجهة**: `Unica77 Cohere Web`، مع البدائل: `Inter, Arial, ui-sans-serif, system-ui`
|
|
- **الشيفرة**: `CohereMono`، مع البدائل: `Arial, ui-sans-serif, system-ui`
|
|
- **الأيقونات**: `CohereIconDefault` (خط أيقونات مخصص)
|
|
|
|
### التسلسل الهرمي
|
|
|
|
| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تتبع الأحرف | ملاحظات |
|
|
|------|------|------|--------|-------------|----------------|-------|
|
|
| عرض / بطولي | CohereText | 72px (4.5rem) | 400 | 1.00 (ضيق) | -1.44px | أقصى تأثير، سلطة الـ serif |
|
|
| عرض ثانوي | CohereText | 60px (3.75rem) | 400 | 1.00 (ضيق) | -1.2px | عناوين الأقسام الكبيرة |
|
|
| عنوان قسم | Unica77 | 48px (3rem) | 400 | 1.20 (ضيق) | -0.48px | عناوين أقسام الميزات |
|
|
| عنوان فرعي | Unica77 | 32px (2rem) | 400 | 1.20 (ضيق) | -0.32px | عناوين البطاقات وأسماء الميزات |
|
|
| عنوان ميزة | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | عناوين الأقسام الأصغر |
|
|
| جسم كبير | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | الفقرات التمهيدية |
|
|
| جسم / زر | Unica77 | 16px (1rem) | 400 | 1.50 | normal | الجسم القياسي ونص الزر |
|
|
| زر متوسط | Unica77 | 14px (0.88rem) | 500 | 1.71 (مريح) | normal | أزرار أصغر وتسميات مُبرزة |
|
|
| تعليق | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | البيانات الوصفية والأوصاف |
|
|
| تسمية بالحروف الكبيرة | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | تسميات الأقسام بالحروف الكبيرة |
|
|
| صغير | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | أصغر النصوص وروابط التذييل |
|
|
| شيفرة مصغرة | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | تسميات شيفرة صغيرة بالحروف الكبيرة |
|
|
|
|
### المبادئ
|
|
- **الـ serif للإعلان، والـ sans للأداء الوظيفي**: يحمل CohereText صوت العلامة التجارية على مستوى العرض — نهايات الـ serif تمنح العناوين سلطة الأبحاث المنشورة. تتولى Unica77 كل شيء وظيفي بحياد هندسي سويسري.
|
|
- **تتبع سلبي عند الأحجام الكبيرة**: يستخدم CohereText تتبعاً من -1.2px إلى -1.44px عند 60–72px، مما يُوجِد كتل نصية كثيفة ومؤثرة.
|
|
- **وزن جسم واحد**: تقريباً كل استخدام Unica77 بوزن 400. يظهر الوزن 500 فقط لتمييز الأزرار الصغيرة. يعتمد النظام على الحجم والمسافات، لا على تباين الوزن.
|
|
- **تسميات الشيفرة بالحروف الكبيرة**: يستخدم CohereMono الحروف الكبيرة مع تتبع موجب (0.16–0.28px) للعلامات التقنية وعلامات الأقسام.
|
|
|
|
## 4. تنسيقات المكونات
|
|
|
|
### الأزرار
|
|
|
|
**شفاف / Ghost**
|
|
- الخلفية: شفاف (`rgba(255, 255, 255, 0)`)
|
|
- النص: Cohere Black (`#000000`)
|
|
- لا حدود مرئية
|
|
- التمرير: ينتقل النص إلى Interaction Blue (`#1863dc`) بشفافية 0.8
|
|
- التركيز: حدود صلبة 2px بلون Interaction Blue
|
|
- النمط الأساسي للأزرار — غير مرئي حتى التفاعل معه
|
|
|
|
**داكن صلب**
|
|
- الخلفية: داكن/أسود
|
|
- النص: Pure White
|
|
- للدعوة إلى الإجراء على الأسطح الفاتحة
|
|
- على شكل حبة دواء أو نصف قطر قياسي
|
|
|
|
**بحدود**
|
|
- تضمين قائم على الحدود
|
|
- يُستخدم في الإجراءات الثانوية
|
|
|
|
### البطاقات والحاويات
|
|
- الخلفية: Pure White (`#ffffff`)
|
|
- الحدود: خط رفيع Lightest Gray (`1px solid #f2f2f2`) للبطاقات الخفية؛ Cool Border (`#d9d9dd`) للمُبرزة
|
|
- نصف القطر: **22px** — نصف القطر المميز لـ Cohere للبطاقات والصور والحاويات الحوارية الأساسية. أيضاً 4px و8px و16px و20px للعناصر الأصغر
|
|
- الظل: ضئيل — يعتمد Cohere على لون الخلفية والحدود بدلاً من الظلال
|
|
- خاص: نصف قطر `0px 0px 22px 22px` (تدوير من الأسفل فقط) لحاويات الأقسام
|
|
- الحوار: نصف قطر 8px لصناديق التوافق/الحوار
|
|
|
|
### الإدخالات والنماذج
|
|
- النص: أبيض على خلفية داكنة، أسود على خلفية فاتحة
|
|
- حدود التركيز: Focus Purple (`#9b60aa`) بسماكة `1px solid`
|
|
- ظل التركيز: حلقة حمراء (`rgb(179, 0, 0) 0px 0px 0px 2px`) — على الأرجح للإشارة إلى حالة الخطأ
|
|
- حدود التركيز الخارجية: Interaction Blue صلب 2px
|
|
|
|
### التنقل
|
|
- تنقل أفقي نظيف على خلفية بيضاء أو داكنة
|
|
- الشعار: wordmark Cohere (SVG مخصص)
|
|
- الروابط: نص داكن بحجم 16px من Unica77
|
|
- دعوة إلى الإجراء: زر داكن صلب
|
|
- الجوال: يتقلص إلى قائمة hamburger
|
|
|
|
### معالجة الصور
|
|
- تصوير فوتوغرافي مؤسسي بموضوعات وبيئات متنوعة
|
|
- تصوير بطولي مصبوغ بالبنفسجي للأقسام الدرامية
|
|
- لقطات شاشة واجهة المنتج على خلفيات داكنة
|
|
- صور بنصف قطر 22px متوافق مع نظام البطاقات
|
|
- أقسام بتدرج بنفسجي بالعرض الكامل
|
|
|
|
### المكونات المميزة
|
|
|
|
**نظام بطاقة 22px**
|
|
- نصف القطر 22px هو البصمة البصرية لـ Cohere
|
|
- جميع البطاقات والصور والحاويات الأساسية تستخدم هذا نصف القطر
|
|
- يُوجِد ليونة عضوية تشبه الغيوم تميّزها عن النصف القطر النموذجي 8–12px
|
|
|
|
**شريط الثقة المؤسسي**
|
|
- شعارات الشركات معروضة في شريط أفقي
|
|
- يُظهر التبني المؤسسي
|
|
- معالجة نظيفة أحادية اللون للشعارات
|
|
|
|
**النطاقات البطولية البنفسجية**
|
|
- أقسام بنفسجية غامقة بالعرض الكامل تحتضن عروض المنتج
|
|
- توفر انقطاعات بصرية درامية في تدفق الصفحة البيضاء
|
|
- تطفو لقطات شاشة المنتج داخل البيئة البنفسجية
|
|
|
|
**علامات الشيفرة بالحروف الكبيرة**
|
|
- CohereMono بحروف كبيرة مع تتبع الأحرف
|
|
- تُستخدم كعلامات أقسام وتسميات تصنيف
|
|
- تُوجِد تسلسلاً هرمياً للمعلومات تقنياً ومنظماً
|
|
|
|
## 5. مبادئ التخطيط
|
|
|
|
### نظام التباعد
|
|
- الوحدة الأساسية: 8px
|
|
- المقياس: 2px و6px و8px و10px و12px و16px و20px و22px و24px و28px و32px و36px و40px و56px و60px
|
|
- تتفاوت حشوة الزر حسب النوع
|
|
- الحشوة الداخلية للبطاقة: تقريباً 24–32px
|
|
- التباعد العمودي للأقسام: سخي (56–60px بين الأقسام)
|
|
|
|
### الشبكة والحاوية
|
|
- أقصى عرض للحاوية: حتى 2560px (عريض جداً) مع تحجيم متجاوب
|
|
- البطولي: توسيط مع طباعة درامية
|
|
- أقسام الميزات: شبكات بطاقات متعددة الأعمدة
|
|
- الأقسام المؤسسية: نطاقات بنفسجية بالعرض الكامل
|
|
- 26 نقطة توقف مكتشفة — نظام تجاوب دقيق للغاية
|
|
|
|
### فلسفة المساحة البيضاء
|
|
- **وضوح مؤسسي**: يُقدّم كل قسم قضية واحدة واضحة مع مساحة تنفس بينها.
|
|
- **التصوير الفوتوغرافي كمحور**: توفر الأقسام الفوتوغرافية الكبيرة اهتماماً بصرياً دون الحاجة إلى عناصر تصميم زخرفية.
|
|
- **تجميع البطاقات**: تُجمَّع المحتويات المترابطة في بطاقات بنصف قطر 22px، مما يُوجِد مجموعات معلومات طبيعية.
|
|
|
|
### مقياس نصف القطر
|
|
- حاد (4px): عناصر التنقل والعلامات الصغيرة والترقيم
|
|
- مريح (8px): صناديق الحوار والحاويات الثانوية والبطاقات الصغيرة
|
|
- سخي (16px): الحاويات المميزة والبطاقات المتوسطة
|
|
- كبير (20px): بطاقات الميزات الكبيرة
|
|
- مميز (22px): البطاقات الأساسية وصور البطل والحاويات الرئيسية — نصف القطر الخاص بـ Cohere
|
|
- حبة دواء (9999px): الأزرار والعلامات ومؤشرات الحالة
|
|
|
|
## 6. العمق والارتفاع
|
|
|
|
| المستوى | المعالجة | الاستخدام |
|
|
|-------|-----------|-----|
|
|
| مسطح (المستوى 0) | لا ظل ولا حدود | خلفية الصفحة وكتل النص |
|
|
| بحدود (المستوى 1) | `1px solid #f2f2f2` أو `#d9d9dd` | البطاقات القياسية وفواصل القوائم |
|
|
| نطاق بنفسجي (المستوى 2) | خلفية بنفسجية غامقة بالعرض الكامل | الأقسام البطولية وعروض الميزات |
|
|
|
|
**فلسفة الظلال**: Cohere خالٍ من الظلال تقريباً. يُعبَّر عن العمق من خلال **تباين لون الخلفية** (بطاقات بيضاء على نطاقات بنفسجية، وسطح أبيض على Snow) و**تضمين الحدود** (حدود رمادية باردة) و**التناوب الدرامي بين الأقسام الفاتحة والداكنة**. حين تحتاج العناصر إلى ارتفاع، تُحققه بكونها بيضاء على داكن لا من خلال ظلال.
|
|
|
|
## 7. ما يجب فعله وما يجب تجنبه
|
|
|
|
### يجب فعله
|
|
- استخدم نصف قطر 22px على جميع البطاقات والحاويات الأساسية — إنها البصمة البصرية
|
|
- استخدم CohereText للعناوين الكبيرة (72px، 60px) مع تتبع سلبي للأحرف
|
|
- استخدم Unica77 لكل نص الجسم وعناصر الواجهة بوزن 400
|
|
- حافظ على اللوحة بالأسود والأبيض مع حدود رمادية باردة
|
|
- استخدم Interaction Blue (#1863dc) فقط لحالات التمرير/التركيز التفاعلية
|
|
- استخدم الأقسام البنفسجية الغامقة للانقطاعات البصرية الدرامية وعروض المنتج
|
|
- طبّق الحروف الكبيرة + تتبع الأحرف على CohereMono لتسميات الأقسام
|
|
- حافظ على تصوير فوتوغرافي مناسب للمؤسسات بموضوعات متنوعة
|
|
|
|
### يجب تجنبه
|
|
- لا تستخدم نصف قطر غير 22px على البطاقات الأساسية — نصف القطر المميز مهم
|
|
- لا تُدخل ألواناً دافئة — اللوحة باردة النبرة بشكل صارم
|
|
- لا تستخدم ظلالاً ثقيلة — العمق يأتي من تباين اللون والحدود
|
|
- لا تستخدم وزن عريض (700+) على نص الجسم — النطاق هو 400–500
|
|
- لا تتخطَّ التسلسل الهرمي للخطوط serif/sans — CohereText للعناوين، Unica77 للجسم
|
|
- لا تستخدم البنفسجي كلون سطح للبطاقات — البنفسجي محجوز للأقسام الكاملة العرض
|
|
- لا تقلل تباعد الأقسام عن 40px — تخطيطات المؤسسات تحتاج مساحة تنفس
|
|
- لا تضع زخرفة على الأزرار بشكل افتراضي — الشفاف/Ghost هو الحالة الأساسية
|
|
|
|
## 8. السلوك التجاوبي
|
|
|
|
### نقاط التوقف
|
|
| الاسم | العرض | التغييرات الجوهرية |
|
|
|------|-------|-------------|
|
|
| جوال صغير | <425px | تخطيط مضغوط وتباعد ضئيل |
|
|
| جوال | 425–640px | عمود واحد وبطاقات متراكمة |
|
|
| جوال كبير | 640–768px | تعديلات تباعد بسيطة |
|
|
| لوحي | 768–1024px | بدء الشبكات ذات العمودين |
|
|
| سطح المكتب | 1024–1440px | تخطيط متعدد الأعمدة الكامل |
|
|
| سطح مكتب كبير | 1440–2560px | أقصى عرض للحاوية |
|
|
|
|
*26 نقطة توقف مكتشفة — من أكثر المواقع دقةً في التجاوب في مجموعة البيانات.*
|
|
|
|
### أهداف اللمس
|
|
- أزرار بحجم مناسب للتفاعل باللمس
|
|
- روابط تنقل بتباعد مريح
|
|
- أسطح البطاقات كأهداف لمس
|
|
|
|
### استراتيجية الطي
|
|
- **التنقل**: ينطوي التنقل الكامل إلى قائمة hamburger
|
|
- **شبكات الميزات**: متعددة الأعمدة ← عمودان ← عمود واحد
|
|
- **نص البطولي**: 72px ← 48px ← 32px تحجيم تدريجي
|
|
- **الأقسام البنفسجية**: تحافظ على العرض الكامل مع تراكم المحتوى
|
|
- **شبكات البطاقات**: 3 ← 2 ← 1 عمود
|
|
|
|
### سلوك الصور
|
|
- تتحجم الصور الفوتوغرافية بنسبة متناسبة داخل حاويات بنصف قطر 22px
|
|
- تحافظ لقطات شاشة المنتج على نسبة العرض إلى الارتفاع
|
|
- تتحجم الأقسام البنفسجية الخلفية بنسبة متناسبة
|
|
|
|
## 9. دليل موجّه الوكيل
|
|
|
|
### مرجع سريع للألوان
|
|
- النص الأساسي: "Cohere Black (#000000)"
|
|
- خلفية الصفحة: "Pure White (#ffffff)"
|
|
- النص الثانوي: "Near Black (#212121)"
|
|
- لون التمرير المميز: "Interaction Blue (#1863dc)"
|
|
- النص المخفت: "Muted Slate (#93939f)"
|
|
- حدود البطاقات: "Lightest Gray (#f2f2f2)"
|
|
- حدود الأقسام: "Border Cool (#d9d9dd)"
|
|
|
|
### أمثلة على موجّهات المكونات
|
|
- "أنشئ قسماً بطولياً على Pure White (#ffffff) مع CohereText بحجم 72px وزن 400، ارتفاع سطر 1.0، تتبع أحرف -1.44px. نص Cohere Black. العنوان الفرعي بـ Unica77 بحجم 18px وزن 400، ارتفاع سطر 1.4."
|
|
- "صمم بطاقة ميزات بنصف قطر 22px، حدود 1px solid Lightest Gray (#f2f2f2) على أبيض. العنوان بـ Unica77 بحجم 32px، تتبع أحرف -0.32px. الجسم بـ Unica77 بحجم 16px، Muted Slate (#93939f)."
|
|
- "أنشئ زراً شفافاً: خلفية شفافة، نص Cohere Black بـ Unica77 بحجم 16px. عند التمرير، ينتقل النص إلى Interaction Blue (#1863dc) بشفافية 0.8. التركيز: حدود خارجية 2px solid Interaction Blue."
|
|
- "أنشئ قسماً بنفسجياً غامقاً بالعرض الكامل مع نص أبيض. CohereText بحجم 60px للعنوان. تطفو لقطة شاشة المنتج بداخله بنصف قطر 22px."
|
|
- "صمم تسمية قسم بـ CohereMono بحجم 14px، حروف كبيرة، تتبع أحرف 0.28px. نص Muted Slate (#93939f)."
|
|
|
|
### دليل التكرار
|
|
1. ركّز على مكوّن واحد في كل مرة
|
|
2. استخدم دائماً نصف قطر 22px للبطاقات الأساسية — "استدارة بطاقة Cohere"
|
|
3. حدد الخط — CohereText للعناوين، Unica77 للجسم، CohereMono للتسميات
|
|
4. العناصر التفاعلية تستخدم Interaction Blue (#1863dc) عند التمرير فقط
|
|
5. حافظ على الأسطح بيضاء مع حدود رمادية باردة — لا نبرات دافئة
|
|
6. البنفسجي للأقسام الكاملة العرض، لا لخلفيات البطاقات أبداً
|