admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5afeb6b78aef0dde2d29ba35a736c8b7921771d2
workbuddy_skills/open-design/design-systems/stripe/DESIGN-ar.md
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

30 KiB
Raw Blame History

نظام تصميم مستوحى من Stripe

Category: التكنولوجيا المالية والعملات المشفرة بنية تحتية للمدفوعات. تدرجات بنفسجية مميزة، وأناقة بوزن 300.

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

يُعدّ موقع Stripe المعيار الذهبي في تصميم التكنولوجيا المالية — نظام يجمع بين الطابع التقني والفخامة في آنٍ واحد، بدقة تتعايش مع الدفء. تنفتح الصفحة على لوحة بيضاء نقية (#ffffff) مع عناوين بحري عميقة (#061b31) وبنفسجي مميز (#533afd) يعمل بوصفه ارتكازاً للعلامة التجارية وإضافةً تفاعليةً في الوقت ذاته. هذا ليس البنفسجي البارد المعقم لبرامج المؤسسات؛ بل هو بنفسجي غني مشبع يوحي بالثقة والتميز. الانطباع العام هو مؤسسة مالية أُعيد تصميمها على يد دار طباعة عالمية المستوى.

خط sohne-var المتغير المخصص هو العنصر المحدِّد لهوية Stripe البصرية. كل عنصر نصي يُفعّل مجموعة الأنماط الطباعية OpenType "ss01"، التي تعدّل أشكال الحروف لتمنح إحساساً هندسياً حديثاً. عند الأحجام الكبيرة (48px–56px)، يعمل sohne-var بوزن 300 — وزن خفيف بشكل استثنائي للعناوين يُضفي سلطةً ناعمة تكاد تهمس. هذا عكس تقليد "عنوان بطولي بخط عريض"؛ عناوين Stripe تبدو واثقة دون أن تصرخ. التباعد الأحرف السالب (‑1.4px عند 56px، و‑0.96px عند 48px) يضغط النص في كتل مضغوطة مهندسة. عند الأحجام الأصغر، يستخدم النظام الوزن 300 مع تقليص متناسب للتتبع، وأرقام جدولية عبر "tnum" لعرض البيانات المالية.

ما يميّز Stripe حقاً هو نظام الظلال. بدلاً من النهج المسطح أو أحادي الطبقة الشائع في معظم المواقع، يستخدم Stripe ظلالاً متعددة الطبقات مائلة للأزرق: توليفة rgba(50,50,93,0.25) مع rgba(0,0,0,0.1) تُنتج ظلالاً ذات عمق جوي بارد يشبه عناصر تطفو في سماء الشفق. اللون الرمادي-الأزرق لظل اللون الأساسي (50,50,93) يرتبط مباشرةً بلوحة البحري-البنفسجي للعلامة التجارية، مما يجعل حتى ارتفاع العناصر يعكس الهوية البصرية.

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

  • sohne-var مع OpenType "ss01" على كل النصوص — مجموعة نمط مخصصة تُعرّف أشكال حروف العلامة التجارية
  • الوزن 300 كوزن عنوان مميز — خفيف، واثق، مخالف للتقليد
  • تباعد الأحرف السالب عند الأحجام الكبيرة (-1.4px عند 56px، مع تخفيف تدريجي نحو الأسفل)
  • ظلال متعددة الطبقات مائلة للأزرق باستخدام rgba(50,50,93,0.25) — ارتفاع يحمل لون العلامة التجارية
  • عناوين بحري عميق (#061b31) بدلاً من الأسود — دافئة، راقية، بمستوى مالي
  • نصف قطر حدود محافظ (4px–8px) — لا أشكال منسدلة، لا حدة
  • لمسات ياقوتية (#ea2261) وأرجوانية-وردية (#f96bee) للتدرج والعناصر الزخرفية
  • SourceCodePro خط أحادي التباعد المرافق للأكواد والتسميات التقنية

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

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

  • بنفسجي Stripe (#533afd): لون العلامة التجارية الأساسي، خلفيات دعوة الإجراء، نص الروابط، نقاط التفاعل. أزرق-بنفسجي مشبع يرسّخ النظام بأكمله.
  • البحري العميق (#061b31): --hds-color-heading-solid. لون العناوين الرئيسية. ليس أسود ولا رمادي — أزرق داكن جداً يضيف دفئاً وعمقاً للنص.
  • الأبيض النقي (#ffffff): خلفية الصفحة، أسطح البطاقات، نص الأزرار على الخلفيات الداكنة.

ألوان العلامة التجارية والداكنة

  • داكن العلامة التجارية (#1c1e54): --hds-color-util-brand-900. نيلي عميق للأقسام الداكنة وخلفيات التذييل واللحظات العلامة التجارية الغامرة.
  • البحري الداكن (#0d253d): --hds-color-core-neutral-975. أشد الدرجات المحايدة ظلاماً — يكاد يكون أسود لكنه ذو نبرة زرقاء لأقصى عمق دون حدة.

ألوان التأكيد

  • الياقوتي (#ea2261): --hds-color-accentColorMode-ruby-icon-solid. أحمر-وردي دافئ للأيقونات والتنبيهات وعناصر التأكيد.
  • الأرجواني-الوردي (#f96bee): --hds-color-accentColorMode-magenta-icon-gradientMiddle. وردي-بنفسجي زاهٍ للتدرجات ونقاط التمييز الزخرفية.
  • الأرجواني-الوردي الفاتح (#ffd7ef): --hds-color-util-accent-magenta-100. سطح ملوّن للبطاقات والشارات ذات الطابع الأرجواني-الوردي.

الألوان التفاعلية

  • البنفسجي الأساسي (#533afd): لون الرابط الأساسي، الحالات النشطة، العناصر المحددة.
  • البنفسجي عند التحويم (#4434d4): بنفسجي أغمق لحالات التحويم على العناصر الأساسية.
  • البنفسجي العميق (#2e2b8c): --hds-color-button-ui-iconHover. بنفسجي داكن لحالات تحويم الأيقونات.
  • البنفسجي الفاتح (#b9b9f9): --hds-color-action-bg-subduedHover. لافندر ناعم لخلفيات التحويم الخافتة.
  • البنفسجي المتوسط (#665efd): --hds-color-input-selector-text-range. لون محدد النطاق والتمييز في حقول الإدخال.

سلم الألوان المحايدة

  • العنوان (#061b31): العناوين الرئيسية، نص التنقل، التسميات القوية.
  • التسمية (#273951): --hds-color-input-text-label. تسميات النماذج والعناوين الثانوية.
  • النص الأساسي (#64748d): النصوص الثانوية، التوصيفات، التعليقات.
  • الأخضر الدال على النجاح (#15be53): شارات الحالة، مؤشرات النجاح (مع شفافية 0.2–0.4 للخلفيات والحدود).
  • نص النجاح (#108c3d): لون نص شارة النجاح.
  • الليموني (#9b6829): --hds-color-core-lemon-500. لون تأكيد للتحذيرات والنقاط المميزة.

الأسطح والحدود

  • الحد الافتراضي (#e5edf5): لون الحد القياسي للبطاقات والفواصل والحاويات.
  • الحد البنفسجي (#b9b9f9): حدود الحالة النشطة/المحددة على الأزرار وحقول الإدخال.
  • الحد البنفسجي الناعم (#d6d9fc): حدود ذات نبرة بنفسجية خفية للعناصر الثانوية.
  • الحد الأرجواني-الوردي (#ffd7ef): حدود وردية النبرة للعناصر ذات الطابع الأرجواني-الوردي.
  • الحد المتقطع (#362baa): حدود متقطعة لمناطق الإفلات والعناصر الحاملة للمحتوى.

ألوان الظلال

  • الظل الأزرق (rgba(50,50,93,0.25)): المميز — لون الظل الأساسي ذو النبرة الزرقاء.
  • الظل الأزرق الداكن (rgba(3,3,39,0.25)): ظل أزرق أعمق للعناصر المرتفعة.
  • الظل الأسود (rgba(0,0,0,0.1)): طبقة الظل الثانوية لتعزيز العمق.
  • الظل المحيطي (rgba(23,23,23,0.08)): ظل محيطي ناعم للارتفاع الطفيف.
  • الظل الرقيق (rgba(23,23,23,0.06)): ظل محيطي أدنى حدٍّ للرفع الخفيف.

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

عائلة الخطوط

  • الأساسي: sohne-var، مع خط احتياطي: SF Pro Display
  • أحادي التباعد: SourceCodePro، مع خط احتياطي: SFMono-Regular
  • ميزات OpenType: "ss01" مُفعَّل عالمياً على كل نصوص sohne-var؛ "tnum" للأرقام الجدولية في البيانات المالية والتعليقات.

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

الدور الخط الحجم الوزن ارتفاع السطر تباعد الأحرف الميزات ملاحظات
العرض الرئيسي sohne-var 56px (3.50rem) 300 1.03 (ضيق) -1.4px ss01 الحجم الأقصى، سلطة بوزن ناعم
العرض الكبير sohne-var 48px (3.00rem) 300 1.15 (ضيق) -0.96px ss01 عناوين بطولية ثانوية
عنوان القسم sohne-var 32px (2.00rem) 300 1.10 (ضيق) -0.64px ss01 عناوين أقسام الميزات
العنوان الفرعي الكبير sohne-var 26px (1.63rem) 300 1.12 (ضيق) -0.26px ss01 عناوين البطاقات والأقسام الفرعية
العنوان الفرعي sohne-var 22px (1.38rem) 300 1.10 (ضيق) -0.22px ss01 رؤوس الأقسام الأصغر
نص أساسي كبير sohne-var 18px (1.13rem) 300 1.40 عادي ss01 توصيفات الميزات، النص التمهيدي
نص أساسي sohne-var 16px (1.00rem) 300-400 1.40 عادي ss01 نص القراءة القياسي
الزر sohne-var 16px (1.00rem) 400 1.00 (ضيق) عادي ss01 نص الزر الأساسي
الزر الصغير sohne-var 14px (0.88rem) 400 1.00 (ضيق) عادي ss01 أزرار ثانوية/مضغوطة
الرابط sohne-var 14px (0.88rem) 400 1.00 (ضيق) عادي ss01 روابط التنقل
التعليق sohne-var 13px (0.81rem) 400 عادي عادي ss01 تسميات صغيرة، بيانات وصفية
التعليق الصغير sohne-var 12px (0.75rem) 300-400 1.33-1.45 عادي ss01 الطباعة الدقيقة، الطوابع الزمنية
التعليق الجدولي sohne-var 12px (0.75rem) 300-400 1.33 -0.36px tnum البيانات المالية، الأرقام
المصغّر sohne-var 10px (0.63rem) 300 1.15 (ضيق) 0.1px ss01 تسميات صغيرة جداً، علامات المحاور
المصغّر الجدولي sohne-var 10px (0.63rem) 300 1.15 (ضيق) -0.3px tnum بيانات الرسوم البيانية، الأرقام الصغيرة
النانو sohne-var 8px (0.50rem) 300 1.07 (ضيق) عادي ss01 أصغر التسميات
نص الكود SourceCodePro 12px (0.75rem) 500 2.00 (متسع) عادي -- كتل الكود، تلوين بناء الجملة
كود عريض SourceCodePro 12px (0.75rem) 700 2.00 (متسع) عادي -- كود عريض، كلمات مفتاحية
تسمية الكود SourceCodePro 12px (0.75rem) 500 2.00 (متسع) عادي uppercase تسميات تقنية
كود مصغّر SourceCodePro 9px (0.56rem) 500 1.00 (ضيق) عادي ss01 تعليقات كود صغيرة جداً

المبادئ

  • الوزن الخفيف كتوقيع: الوزن 300 عند الأحجام الكبيرة هو أكثر الخيارات الطباعية تميزاً لدى Stripe. حيث يلجأ الآخرون إلى 600–700 لاستقطاب الانتباه، يستخدم Stripe الخفة كرفاهية — النص واثق جداً لدرجة أنه لا يحتاج إلى الثقل ليكون ذا سلطة.
  • ss01 في كل مكان: مجموعة الأنماط الطباعية "ss01" غير قابلة للتفاوض. تعدّل حروفاً محددة (على الأرجح أشكالاً بديلة لـ a وg وl) لتُنتج طابعاً هندسياً معاصراً عبر كل نصوص sohne-var.
  • وضعان لـ OpenType: "ss01" لنصوص العرض والنص الأساسي، و"tnum" للأرقام الجدولية في البيانات المالية. لا يتداخلان أبداً — الرقم في الفقرة يستخدم ss01، والرقم في جدول البيانات يستخدم tnum.
  • تتبع تدريجي: يتضيق تباعد الأحرف تناسبياً مع الحجم: -1.4px عند 56px، و-0.96px عند 48px، و-0.64px عند 32px، و-0.26px عند 26px، وعادي عند 16px وما دونه.
  • بساطة الوزنَين: بشكل أساسي 300 (النص الأساسي والعناوين) و400 (واجهة المستخدم/الأزرار). لا وزن عريض (700) في الخط الأساسي — يستخدم SourceCodePro 500/700 للتمييز في الكود.

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

الأزرار

البنفسجي الأساسي

  • الخلفية: #533afd
  • النص: #ffffff
  • الحشو: 8px 16px
  • نصف القطر: 4px
  • الخط: 16px sohne-var وزن 400، "ss01"
  • عند التحويم: خلفية #4434d4
  • الاستخدام: دعوة الإجراء الأساسية ("ابدأ الآن"، "تواصل مع المبيعات")

شفاف / محدد

  • الخلفية: شفاف
  • النص: #533afd
  • الحشو: 8px 16px
  • نصف القطر: 4px
  • الحد: 1px solid #b9b9f9
  • الخط: 16px sohne-var وزن 400، "ss01"
  • عند التحويم: الخلفية تنتقل إلى rgba(83,58,253,0.05)
  • الاستخدام: الإجراءات الثانوية

معلوماتي شفاف

  • الخلفية: شفاف
  • النص: #2874ad
  • الحشو: 8px 16px
  • نصف القطر: 4px
  • الحد: 1px solid rgba(43,145,223,0.2)
  • الاستخدام: الإجراءات من المستوى الثالث/المعلوماتي

محايد شفاف

  • الخلفية: شفاف (rgba(255,255,255,0))
  • النص: rgba(16,16,16,0.3)
  • الحشو: 8px 16px
  • نصف القطر: 4px
  • الإطار: 1px solid rgb(212,222,233)
  • الاستخدام: الإجراءات المعطلة أو الخافتة

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

  • الخلفية: #ffffff
  • الحد: 1px solid #e5edf5 (قياسي) أو 1px solid #061b31 (تأكيد داكن)
  • نصف القطر: 4px (ضيق)، 5px (قياسي)، 6px (مريح)، 8px (مميز)
  • الظل (قياسي): rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px
  • الظل (محيطي): rgba(23,23,23,0.08) 0px 15px 35px 0px
  • عند التحويم: يتكثف الظل، مع إضافة الطبقة ذات النبرة الزرقاء في الغالب

الشارات والعلامات والحبوب

حبة محايدة

  • الخلفية: #ffffff
  • النص: #000000
  • الحشو: 0px 6px
  • نصف القطر: 4px
  • الحد: 1px solid #f6f9fc
  • الخط: 11px وزن 400

شارة النجاح

  • الخلفية: rgba(21,190,83,0.2)
  • النص: #108c3d
  • الحشو: 1px 6px
  • نصف القطر: 4px
  • الحد: 1px solid rgba(21,190,83,0.4)
  • الخط: 10px وزن 300

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

  • الحد: 1px solid #e5edf5
  • نصف القطر: 4px
  • التركيز: 1px solid #533afd أو حلقة بنفسجية
  • التسمية: #273951، 14px sohne-var
  • النص: #061b31
  • النص الظلي: #64748d

التنقل

  • تنقل أفقي نظيف على خلفية بيضاء، ثابت مع تأثير ضبابية الخلفية
  • الشعار محاذٍ لليسار
  • الروابط: sohne-var 14px وزن 400، نص #061b31 مع "ss01"
  • نصف القطر: 6px على حاوية التنقل
  • دعوة الإجراء: زر بنفسجي محاذٍ لليمين ("تسجيل الدخول"، "ابدأ الآن")
  • الجوال: زر قائمة هامبرغر بنصف قطر 6px

العناصر الزخرفية

الحدود المتقطعة

  • 1px dashed #362baa (بنفسجي) لمناطق الحمل/الإفلات والعناصر الحاملة للمحتوى
  • 1px dashed #ffd7ef (أرجواني-وردي) للحدود الزخرفية ذات الطابع الأرجواني-الوردي

لمسات التدرج

  • تدرجات من الياقوتي إلى الأرجواني-الوردي (#ea2261 إلى #f96bee) لزخارف القسم البطولي
  • الأقسام الداكنة للعلامة التجارية تستخدم خلفيات #1c1e54 مع نص أبيض

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

نظام التباعد

  • الوحدة الأساسية: 8px
  • السلم: 1px، 2px، 4px، 6px، 8px، 10px، 11px، 12px، 14px، 16px، 18px، 20px
  • ملاحظة: السلم كثيف عند الأحجام الصغيرة (كل 2px من 4 إلى 12)، مما يعكس توجه Stripe نحو واجهة مستخدم دقيقة للبيانات المالية

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

  • الحد الأقصى لعرض المحتوى: حوالي 1080px
  • القسم البطولي: عمود واحد مركزي مع حشو سخي وعناوين خفيفة الوزن
  • أقسام الميزات: شبكات من عمودين إلى ثلاثة لبطاقات الميزات
  • أقسام داكنة بعرض كامل بخلفية #1c1e54 للانغماس في العلامة التجارية
  • معاينات الكود/لوحة التحكم كبطاقات مضمنة بظلال ذات نبرة زرقاء

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

  • تباعد دقيق: خلافاً للفراغ الشاسع في الأنظمة التقليلية، يستخدم Stripe مسافات بيضاء مقيسة وهادفة. كل فجوة خيار طباعي متعمد.
  • بيانات كثيفة، إطار سخي: عروض البيانات المالية (الجداول، الرسوم البيانية) مضغوطة بشكل وثيق، لكن الإطار المحيط بها واسع بسخاء. هذا يخلق إحساساً بالكثافة المتحكم بها — كجدول بيانات منظم تنظيماً جيداً في إطار جميل.
  • إيقاع الأقسام: تتعاقب الأقسام البيضاء مع الأقسام الداكنة للعلامة التجارية (#1c1e54)، مما يخلق إيقاعاً دراماتيكياً من الفاتح والداكن يمنع الرتابة دون إدخال ألوان عشوائية.

سلم نصف قطر الحدود

  • مصغّر (1px): عناصر دقيقة، تقريب خفي
  • قياسي (4px): الأزرار، الإدخالات، الشارات، البطاقات — الأكثر استخداماً
  • مريح (5px): حاويات البطاقات القياسية
  • متسع (6px): التنقل، العناصر التفاعلية الأكبر
  • كبير (8px): البطاقات المميزة، العناصر البطولية
  • مركب: 0px 0px 6px 6px للحاويات المستديرة من الأسفل (لوحات علامات التبويب، أذيال القوائم المنسدلة)

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

المستوى المعالجة الاستخدام
مسطح (المستوى 0) لا ظل خلفية الصفحة، النص المضمن
محيطي (المستوى 1) rgba(23,23,23,0.06) 0px 3px 6px رفع بطاقة خفي، تلميحات التحويم
قياسي (المستوى 2) rgba(23,23,23,0.08) 0px 15px 35px البطاقات القياسية، لوحات المحتوى
مرتفع (المستوى 3) rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px البطاقات المميزة، القوائم المنسدلة، النوافح
عميق (المستوى 4) rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px النوافذ المنبثقة، اللوحات العائمة
حلقة (إمكانية الوصول) 2px solid #533afd outline حلقة تركيز لوحة المفاتيح

فلسفة الظلال: نظام ظلال Stripe مبني على مبدأ العمق اللوني. حيث تستخدم معظم أنظمة التصميم ظلالاً رمادية أو سوداء محايدة، فإن لون ظل Stripe الأساسي (rgba(50,50,93,0.25)) هو رمادي-أزرق عميق يتردد صداه مع لوحة البحري للعلامة التجارية. هذا يُنشئ ظلالاً لا تضيف العمق فحسب — بل تضيف أجواء العلامة التجارية. يقرن النهج متعدد الطبقات هذا الظل ذا النبرة الزرقاء بطبقة ثانوية سوداء نقية (rgba(0,0,0,0.1)) بإزاحة مختلفة، مما يُنشئ عمقاً يشبه التأثير المتتالي حيث يجلس الظل المُعلَّم بالعلامة التجارية أبعد من العنصر والظل المحايد أقرب. القيم السالبة للانتشار (-30px، -18px) تضمن ألا تمتد الظلال خارج بصمة العنصر أفقياً، مع إبقاء الارتفاع عمودياً ومنضبطاً.

العمق الزخرفي

  • الأقسام الداكنة للعلامة التجارية (#1c1e54) تُنشئ عمقاً غامراً من خلال تباين لون الخلفية
  • طبقات التدرج مع انتقالات من الياقوتي إلى الأرجواني-الوردي لزخارف القسم البطولي
  • لون الظل rgba(0,55,112,0.08) (--hds-color-shadow-sm-top) لظلال الحافة العلوية على العناصر الثابتة

7. ما يجب فعله وما يجب تجنبه

ما يجب فعله

  • استخدم sohne-var مع "ss01" على كل عنصر نصي — مجموعة الأنماط الطباعية هي العلامة التجارية ذاتها
  • استخدم الوزن 300 لجميع العناوين والنص الأساسي — الخفة هي التوقيع
  • طبّق الظلال ذات النبرة الزرقاء (rgba(50,50,93,0.25)) على جميع العناصر المرتفعة
  • استخدم #061b31 (البحري العميق) للعناوين بدلاً من #000000 — الدفء مهم
  • أبقِ نصف قطر الحدود بين 4px–8px — التقريب المحافظ متعمد
  • استخدم "tnum" لأي عرض لأرقام جدولية/مالية
  • ضع الظلال في طبقات: ذو نبرة زرقاء في البعيد + محايد في القريب للعمق التتالي
  • استخدم البنفسجي #533afd كلون تفاعلي/دعوة إجراء أساسي

ما يجب تجنبه

  • لا تستخدم الوزن 600–700 لعناوين sohne-var — الوزن 300 هو صوت العلامة التجارية
  • لا تستخدم نصف قطر حدود كبيراً (12px+، الأشكال المنسدلة) على البطاقات أو الأزرار — Stripe محافظ في هذا
  • لا تستخدم ظلالاً رمادية محايدة — اصبغها دائماً بالأزرق (rgba(50,50,93,...))
  • لا تتخطَّ "ss01" على أي نص sohne-var — الحروف البديلة هي التي تُعرّف الشخصية
  • لا تستخدم الأسود النقي (#000000) للعناوين — استخدم دائماً #061b31 البحري العميق
  • لا تستخدم ألوان التأكيد الدافئة (البرتقالي، الأصفر) للعناصر التفاعلية — البنفسجي هو الأساسي
  • لا تُطبّق تباعد أحرف موجباً عند الأحجام الكبيرة — Stripe يتتبع بإحكام
  • لا تستخدم ألوان التأكيد الأرجواني-الوردي/الياقوتي للأزرار أو الروابط — هي للزخرفة/التدرج فقط

8. السلوك التكيفي

نقاط الكسر

الاسم العرض التغييرات الرئيسية
الجوال <640px عمود واحد، أحجام عناوين مخفضة، بطاقات متراكمة
الجهاز اللوحي 640-1024px شبكات من عمودين، حشو معتدل
سطح المكتب 1024-1280px تخطيط كامل، شبكات ميزات من 3 أعمدة
سطح المكتب الكبير >1280px محتوى مركزي مع هوامش سخية

أهداف اللمس

  • تستخدم الأزرار حشواً مريحاً (8px–16px رأسياً)
  • روابط التنقل بحجم 14px مع تباعد مناسب
  • الشارات لها حشو أفقي 6px كحد أدنى لأهداف النقر
  • زر قائمة التنقل للجوال بنصف قطر 6px

استراتيجية الانهيار

  • القسم البطولي: 56px للعرض -> 32px على الجوال، مع الحفاظ على الوزن 300
  • التنقل: روابط أفقية + دعوات الإجراء -> زر قائمة هامبرغر
  • بطاقات الميزات: 3 أعمدة -> 2 أعمدة -> عمود واحد متراكم
  • الأقسام الداكنة للعلامة التجارية: الحفاظ على المعالجة بعرض كامل مع تقليل الحشو الداخلي
  • جداول البيانات المالية: تمرير أفقي على الجوال
  • تباعد الأقسام: 64px+ -> 40px على الجوال
  • سلم الطباعة يتضيق: أحجام 56px -> 48px -> 32px للقسم البطولي عبر نقاط الكسر

سلوك الصور

  • لقطات شاشة لوحة التحكم/المنتج تحافظ على الظل ذي النبرة الزرقاء في جميع الأحجام
  • الزخارف التدرجية للقسم البطولي تُبسَّط على الجوال
  • كتل الكود تحافظ على معالجة SourceCodePro، وقد تتمرر أفقياً
  • صور البطاقات تحافظ على نصف قطر حدود متسق بين 4px–6px

9. دليل الأوامر للوكيل

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

  • دعوة الإجراء الأساسية: البنفسجي Stripe (#533afd)
  • التحويم على دعوة الإجراء: البنفسجي الداكن (#4434d4)
  • الخلفية: الأبيض النقي (#ffffff)
  • نص العنوان: البحري العميق (#061b31)
  • نص الجسم: الأردوازي (#64748d)
  • نص التسمية: الأردوازي الداكن (#273951)
  • الحد: الأزرق الناعم (#e5edf5)
  • الرابط: البنفسجي Stripe (#533afd)
  • القسم الداكن: داكن العلامة التجارية (#1c1e54)
  • النجاح: الأخضر (#15be53)
  • التأكيد الزخرفي: الياقوتي (#ea2261)، الأرجواني-الوردي (#f96bee)

أمثلة على أوامر المكونات

  • "أنشئ قسماً بطولياً على خلفية بيضاء. العنوان بحجم 48px sohne-var وزن 300، ارتفاع سطر 1.15، تباعد أحرف -0.96px، لون #061b31، font-feature-settings 'ss01'. العنوان الفرعي بحجم 18px وزن 300، ارتفاع سطر 1.40، لون #64748d. زر دعوة إجراء بنفسجي (#533afd، نصف قطر 4px، حشو 8px 16px، نص أبيض) وزر شفاف (شفاف، حد 1px solid #b9b9f9، نص #533afd، نصف قطر 4px)."
  • "صمّم بطاقة: خلفية بيضاء، حد 1px solid #e5edf5، نصف قطر 6px. الظل: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px. العنوان بحجم 22px sohne-var وزن 300، تباعد أحرف -0.22px، لون #061b31، 'ss01'. النص الأساسي بحجم 16px وزن 300، #64748d."
  • "ابنِ شارة نجاح: خلفية rgba(21,190,83,0.2)، نص #108c3d، نصف قطر 4px، حشو 1px 6px، 10px sohne-var وزن 300، حد 1px solid rgba(21,190,83,0.4)."
  • "أنشئ تنقلاً: رأس أبيض ثابت مع backdrop-filter blur(12px). sohne-var 14px وزن 400 للروابط، نص #061b31، 'ss01'. دعوة إجراء بنفسجية 'ابدأ الآن' محاذية لليمين (خلفية #533afd، نص أبيض، نصف قطر 4px). حاوية التنقل بنصف قطر 6px."
  • "صمّم قسماً داكناً للعلامة التجارية: خلفية #1c1e54، نص أبيض. العنوان بحجم 32px sohne-var وزن 300، تباعد أحرف -0.64px، 'ss01'. النص الأساسي بحجم 16px وزن 300، rgba(255,255,255,0.7). البطاقات بداخله بحد rgba(255,255,255,0.1) ونصف قطر 6px."

دليل التكرار

  1. فعّل دائماً font-feature-settings: "ss01" على نص sohne-var — هذا هو الحمض النووي الطباعي للعلامة التجارية
  2. الوزن 300 هو الافتراضي؛ استخدم 400 فقط للأزرار/الروابط/التنقل
  3. صيغة الظل: rgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2 حيث Y1/B1 أكبر (ظل بعيد) وY2/B2 أصغر (ظل قريب)
  4. لون العنوان #061b31 (البحري العميق)، النص الأساسي #64748d (الأردوازي)، التسميات #273951 (الأردوازي الداكن)
  5. نصف قطر الحدود يبقى في نطاق 4px–8px — لا تستخدم أبداً الأشكال المنسدلة أو التقريب الكبير
  6. استخدم "tnum" لأي أرقام في الجداول أو الرسوم البيانية أو العروض المالية
  7. الأقسام الداكنة تستخدم #1c1e54 — ليس أسود، ليس رمادي، بل نيلي عميق للعلامة التجارية
  8. SourceCodePro للكود بحجم 12px/500 مع ارتفاع سطر 2.00 (متسع جداً لسهولة القراءة)
Reference in new issue View Git Blame Copy Permalink