admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f2d07b47adde0ca4a04e3af461a1c48e9917cc2d
workbuddy_skills/open-design/design-systems/starbucks/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

52 KiB
Raw Blame History

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

Category: التجارة الإلكترونية والتجزئة علامة تجارية عالمية لبيع القهوة بالتجزئة. نظام أخضر رباعي المستويات، لوحة كريمية دافئة، أزرار بيضاوية كاملة الاستدارة.

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

نظام تصميم Starbucks هو واجهة متجر دافئة وواثقة تحمل اللون الأخضر المأخوذ من مريلة الباريستا على كل سطح. تتناوب اللوحة بين كريم محايد دافئ (#f2f0eb) وأبيض خزفي فاتر (#edebe9) — ألوان تحاكي مواد المتجر الفعلية: مناديل الورق وجدران المقهى ونهايات الخشب — فيما يُرسّخ الأخضر المميز لـ Starbucks (#006241) حضور العلامة التجارية على الشرائح البطولية ونداءات الإجراء وتجربة Rewards. يأتي الأخضر في أربعة درجات محسوبة (Starbucks وAccent وHouse وUplift) كلٌّ منها مخصصة لدور سطح محدد، ولا يظهر الذهبي (#cba258) إلا في مناسبات احتفالية لحالة Rewards — لا كلون تمييزي عام.

تحمل الطباعة معظم صوت العلامة التجارية. تنتشر خط SoDoSans المخصص (الحصري لـ Starbucks) على كل سطح تقريبًا بتتبع ضيق يبلغ -0.16px — يُقرأ بثقة وودية لا بصرامة مجلة الموضة. ما يلفت الانتباه: تنتقل صفحة Rewards إلى خط serif دافئ ("Lander Tall", "Iowan Old Style", Georgia) لحظات العنوانين المحددة، معكسةً بلطف الحنين لمقهى اللوحة الطباشيرية. أما صفحات Careers فتستخدم خطًا مكتوبًا بخط اليد ("Kalam", "Comic Sans MS", cursive) للمسات الاسم الشخصي على الكوب. ثلاثة خطوط، ثلاثة سياقات — النظام منضبط في توقيت ظهور كل منها.

تتنفس الأسطح من خلال الهندسة المستديرة. كل زر عبارة عن بيضاوي كامل بنصف قطر 50px. تأخذ البطاقات مستطيلًا مستديرًا بـ 12px. زر "Frap" العائم لإتمام الطلب — زر دائري بقطر 56px بلون Green Accent (#00754A) — هو الحركة المميزة للمنتج في العمق: يطفو في أسفل اليمين مع مجموعة ظلال متكدسة (0 0 6px rgba(0,0,0,0.24) قاعدية + 0 8px 12px rgba(0,0,0,0.14) محيطية) ويضغط عبر scale(0.95) عند الضغط. الارتفاعات في العموم مكبوحة — ظلال البطاقات تبقى بألفا همس 0.14/0.24، ويحصل شريط التنقل العام على مجموعة ظلال ثلاثية الطبقات الهادئة. يبدو النظام بأكمله كلوحة إشارات مقهى نظيفة: واضحة ودافئة وبلا صراخ.

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

  • نظام العلامة التجارية الخضراء الرباعي المستويات (Starbucks / Accent / House / Uplift) كل منها مخصص لدور سطح مميز — لا يوجد "أخضر علامة تجارية" واحد
  • الذهبي محجوز فقط للحظات الاحتفالية لحالة Rewards؛ لا يُستخدم كلون تمييزي عام أبدًا
  • لوحة محايدة دافئة (#f2f0eb / #edebe9) بدلًا من الأبيض الناصع — تحاكي مواد المقهى
  • خط مخصص حصري (SoDoSans) بتتبع ضيق -0.16px كصوت شامل
  • تبديلات الخط حسب السياق: serif (Lander Tall) لـ Rewards، وسكريبت (Kalam) لأسماء الأكواب في Careers
  • أزرار بيضاوية كاملة (50px نصف قطر) شاملة، scale(0.95) عند الضغط كالتفاعل الدقيق المميز
  • زر "Frap" الدائري العائم (56px، حشو Green Accent، مجموعة ظلال متكدسة) — عنصر الارتفاع المميز للمنتج
  • أسطح بطاقات الهدايا مصممة كـ منتج فيزيائي مصوَّر — كل بطاقة صورة فوتوغرافية مُوضَّحة مميزة لا رسومًا متولَّدة
  • نصف قطر البطاقة 12px + ظلال ناعمة جدًا تبقي بطاقات المحتوى مسطحة مع لمسة ارتفاع خفيفة
  • مقياس تباعد قائم على rem مرتكز على 1.6rem (~16px) = --space-3، يرتقي إلى 6.4rem (~64px)

إيقاع الصفحة بكتل الألوان: بطولي كريمي → أقسام محتوى بيضاء → شريط مميز أخضر داكن (#1E3932) بنص أبيض → منطقة أدوات كريمية → تذييل أخضر داكن (#1E3932) بنص ذهبي/أبيض — إطار داكن كالإسبريسو حول الجسم المضيء.

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

الصفحات المصدر المحللة: الصفحة الرئيسية، rewards، بطاقات الهدايا، تفاصيل المنتج (مشروب الطاقة الوردي Pink Energy Drink)، تغذية المنتج (Cold Brew).

الأساسية

  • Starbucks Green (#006241): الأخضر التاريخي للعلامة التجارية. يُستخدم في عناوين h1 والرؤوس الرئيسية للأقسام في صفحة Rewards وكإشارة العلامة التجارية الرئيسية كلما احتيج إلى لون مهيمن واحد.
  • Green Accent (#00754A): أخضر أكثر إشراقًا ونضارة. لون نداء الإجراء الأساسي المملوء ("Explore our afternoon menu"، "See the spring menu") وحشو زر Frap الدائري العائم.
  • House Green (#1E3932): الأخضر الداكن شبه الأسود للعلامة التجارية. سطح التذييل، خلفيات الشرائط المميزة، الأسطح الداكنة لحالة Rewards، وشريط البطولي "Free coffee is just the beginning" في صفحة Rewards.
  • Green Uplift (#2b5148): أخضر داكن متوسط ثانوي يُستخدم باعتدال في العناصر الزخرفية ولحظات التدرج الداكن.
  • Green Light (#d4e9e2): غسالة نعناعية شاحبة تُستخدم لصبغات حالة صحة النماذج وأسطح الأدوات الخضراء الفاتحة.

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

  • Gold (#cba258): محجوز تقريبًا حصرًا للمناسبات الاحتفالية لحالة Rewards — تسميات الفئة الذهبية، وشارات الشراكة (SkyMiles، Bonvoy)، والعناصر التي تشعر بالفخامة. ليس لونًا عامًا للعلامة التجارية أبدًا.
  • Gold Light (#dfc49d): ذهبي أخف لغسالات الخلفية في الأقسام الذهبية.
  • Gold Lightest (#faf6ee): غسالة سطح صفحة كريمية ذهبية تُستخدم تحت أقسام الشراكة في صفحة Rewards — تربط اللون التمييزي الذهبي بالنظام المحايد الدافئ.

الأسطح والخلفيات

  • White (#ffffff): السطح الأساسي للبطاقات والنوافذ المنبثقة. أيضًا حشو البطاقة في بلاطات بطاقات الهدايا.
  • Neutral Cool (#f9f9f9): سطح رمادي بارد خفيف يُستخدم في القوائم المنسدلة (القائمة المنسدلة "Account")، وأغلفة بطاقات النماذج، والحاويات الأدواتية الهادئة.
  • Neutral Warm (#f2f0eb): اللون الكريمي الدافئ — لوحة الصفحة الأساسية لمناطق أدوات Rewards والشرائط البطولية.
  • Ceramic (#edebe9): كريم أكثر دفئًا/قتامة قليلًا لفواصل المناطق وغسالات أقسام الصفحة الناعمة وشريط شراكة Rewards.
  • Black (#000000): حبر داكن محجوز لشريط نداء الإجراء الداكن في أعلى الصفحة ("Join now") وأزرار تسجيل الدخول عالية التباين في شريط التنقل العلوي.

المحايدات والنصوص

  • Text Black (rgba(0, 0, 0, 0.87)): لون النص الأساسي للعناوين والجسم على الأسطح الفاتحة. ليس أسودًا نقيًا — أسود بشفافية 87% يبدو أدفأ.
  • Text Black Soft (rgba(0, 0, 0, 0.58)): النص الثانوي/البيانات الوصفية على الأسطح الفاتحة.
  • Text White (rgba(255, 255, 255, 1)): لون النص الأساسي للعناوين والجسم على الأسطح الخضراء الداكنة.
  • Text White Soft (rgba(255, 255, 255, 0.70)): النص الثانوي على الأسطح الخضراء الداكنة — أوصاف روابط التذييل ونص الترجمة.
  • Rewards Green (#33433d): أخضر رمادي مخصص معتدل يُستخدم فقط في كتل النص في صفحة Rewards — لون قراءة "أكثر أثرية" قليلًا من Text Black يشير إلى "سطح المكافأة" دون استخدام Starbucks Green الكامل.

الدلالية والتمييزية

  • Red (#c82014): حالة الخطأ والإجراء المدمر (نموذج غير صالح، إجراءات مدمرة).
  • Yellow (#fbbc05): حالة التحذير، لمسة العلامة التجارية القديمة.
  • Green Light (#d4e9e2 بشفافية 33% = hsl(160 32% 87% / 33%)): خلفية صبغة حقل النموذج الصالح.
  • Red Tint (hsl(4 82% 43% / 5%)): صبغة الحقل غير الصالح في النماذج.

سلالم الشفافية الأسود/الأبيض

مقياسان شفافان متوازيان للتراكب والنص الثانوي:

  • rgba(0,0,0,0.06) إلى rgba(0,0,0,0.90) بخطوات 10% — للتراكبات الداكنة على الأسطح الفاتحة
  • rgba(255,255,255,0.10) إلى rgba(255,255,255,0.90) بخطوات 10% — للتراكبات الفاتحة على الأسطح الداكنة

نظام التدرجات

لم يُلاحظ أي رمز تدرج هيكلي. التسلسل الهرمي للأسطح قائم على كتل الألوان الصلبة بالكامل — يعتمد النظام على لوحة أسطح الكريم/الأخضر الخماسية بدلًا من التدرجات.

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

عائلة الخطوط

  • الأساسي: SoDoSans, "Helvetica Neue", Helvetica, Arial, sans-serif — خط الشركة المخصص الحصري لـ Starbucks، يُستخدم على كل سطح تقريبًا
  • بديل التحميل: "Helvetica Neue", Helvetica, Arial, sans-serif — ما يراه المستخدمون قبل تحميل SoDoSans
  • Rewards Serif: "Lander Tall", "Iowan Old Style", Georgia, serif — يُستخدم في لحظات عناوين صفحة Rewards المحددة لمنح شعور تحريري دافئ
  • Careers Script: "Kalam", "Comic Sans MS", cursive — يُستخدم حصرًا للمسات زخرفية "اسم الكوب" في صفحات Careers، في إشارة إلى الأسماء المكتوبة بخط اليد على أكواب Starbucks

لا توجد مجموعات أسلوبية OpenType مُفعَّلة صراحةً عند :root.

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

الدور الحجم الوزن ارتفاع السطر تتبع الأحرف ملاحظات
Display (text-10) 5.0rem / 80px 400–600 1.2 -0.16px أكبر عرض بطولي لـ Rewards
Jumbo (text-9) 3.6rem / 58px 400–600 1.2 -0.16px عناوين البطولي الثانوية
Hero Large (text-8) 2.8rem / 45px 400–600 1.2–1.5 -0.16px عناوين أقسام الصفحة الرئيسية
H1 24px 600 36px -0.16px عنوان أساسي بلون Starbucks Green
H2 24px 400 36px -0.16px عنوان قسم بوزن عادي بلون Text Black
Body Large 19px 400–600 33.25px (~1.75) -0.16px نص مقدمة البطولي، جسم الشريط المميز
Body (text-3) 1.6rem / 16px 400 1.5 (24px) -0.01em نص الجسم الافتراضي
Small (text-2) 1.4rem / ~14px 400–600 1.5 -0.01em تسميات الأزرار، البيانات الوصفية، تسميات النماذج
Micro (text-1) 1.3rem / ~13px 400 1.5 -0.01em حالة التسمية العائمة النشطة، نص صغير للترجمة
Button Label 14–16px 400–600 1.2 -0.01em جميع تسميات أزرار البيضاوي

رموز تتبع الأحرف:

  • letterSpacingNormal: -0.01em (الافتراضي — ضيق ومميز)
  • letterSpacingLoose: 0.1em (أحرف كبيرة مؤكدة)
  • letterSpacingLooser: 0.15em (تسميات بأسلوب الأحرف الكبيرة، تأكيد قصوى)

رموز ارتفاع السطر:

  • lineHeightNormal: 1.5 (الجسم)
  • lineHeightCompact: 1.2 (العرض/الأزرار)

المبادئ

  • التتبع السلبي الضيق (-0.01em) يُطبَّق بشكل شبه شامل — يُقرأ المنتج بالكامل بشكل مضغوط قليلًا، مما يمنح SoDoSans حضوره الواثق دون الشعور بالانضغاط.
  • تحولات الوزن تحمل التسلسل الهرمي، لا تحولات الحجم. H1 وH2 يتشاركان نفس حجم 24px/36px؛ فقط الوزن (600 مقابل 400) واللون (Starbucks-Green مقابل Text Black) يفرق بينهما.
  • رموز الحجم تستخدم rem، مرتكزة على 1rem = 10px في هذا الموقع (عبر خدعة font-size: 62.5% في الجذر). لذا 1.6rem = 16px، 2.4rem = 24px، إلخ. المقياس دلالي (textSize-1 إلى textSize-10)، وليس قيم بكسل اعتباطية.
  • تبديلات الخط الخاصة بالسياق — serif في Rewards، سكريبت في Careers — متعمدة ومحلية. لا تمزجهما مطلقًا مع الـ sans الأساسي داخل نفس السطح.
  • نص الجسم لا يكون أبدًا أسودًا نقيًا — يجلس عند rgba(0,0,0,0.87) ليتناسب مع درجة حرارة اللوحة المحايدة الدافئة.

ملاحظة حول بدائل الخطوط

SoDoSans حصري لـ Starbucks (مرخص من House Industries، غير متاح للعموم). بدائل مفتوحة المصدر معقولة:

  • Inter (Google Fonts) — نسب هندسية إنسانية مشابهة، مجموعة أوزان واسعة
  • Manrope — أكثر دورانًا قليلًا، شعور واثق مشابه
  • Nunito Sans — أدفأ، جيد كبديل لعلامة تجارية "مقهى"

عند الاستبدال، تحقق من أن التتبع الضيق -0.01em / -0.16px لا يزال يُقرأ جيدًا؛ بعض الخطوط مفتوحة المصدر تحتاج -0.005em بدلًا من ذلك.

Lander Tall (serif الـ Rewards) مخصص — بدائل مفتوحة المصدر: Iowan Old Style (موجود في بديل الاحتياط)، Lora، أو Source Serif Pro. Kalam (سكريبت Careers) متاح مباشرة على Google Fonts.

4. أنماط المكونات

الأزرار

1. مملوء أساسي — "Explore our afternoon menu / Sign up for free"

  • الخلفية: #00754A (Green Accent)
  • النص: #ffffff
  • الحدود: 1px solid #00754A
  • نصف القطر: 50px (بيضاوي كامل)
  • التبطين: 7px 16px
  • الخط: SoDoSans، 16px، وزن 600، تتبع أحرف -0.01em
  • الحالة النشطة: transform: scale(0.95) عبر --buttonActiveScale
  • الانتقال: all 0.2s ease

2. محيط أساسي — "Give them a try / Start an order"

  • الخلفية: شفافة
  • النص: #00754A (Green Accent)
  • الحدود: 1px solid #00754A
  • نفس نصف القطر/التبطين/الحالة النشطة/الانتقال كالمملوء الأساسي

3. مملوء أسود — "Join now"

  • الخلفية: #000000
  • النص: #ffffff
  • الحدود: 1px solid #000000
  • نصف القطر: 50px، التبطين: 7px 16px
  • الخط: 14px، وزن 600
  • يُستخدم في شريط الانضمام أعلى الصفحة ولحظات التحويل المشابهة

4. محيط داكن — "Sign in"

  • الخلفية: شفافة
  • النص: rgba(0, 0, 0, 0.87) (Text Black)
  • الحدود: 1px solid rgba(0, 0, 0, 0.87)
  • نصف القطر: 50px، التبطين: 7px 16px
  • الخط: 14px، وزن 600

5. أخضر على أخضر معكوس — "See the spring menu"

  • الخلفية: #ffffff
  • النص: #00754A
  • الحدود: 1px solid #ffffff
  • يُستخدم عندما يكون السطح خلف الزر شريط House Green الأخضر الداكن — زر أبيض بنص أخضر بدلًا من بيضاوي أخضر مملوء على خلفية خضراء

6. محيط على داكن — "Learn more / Order now"

  • الخلفية: شفافة
  • النص: #ffffff
  • الحدود: 1px solid #ffffff
  • يُستخدم على الشرائط المميزة الخضراء الداكنة كإجراء ثانوي مقترن بنداء إجراء مملوء أبيض

7. موافقة الموافقة (متغير أخضر داكن)

  • الخلفية: rgb(0, 130, 72) (متغير أخضر محدد يُستخدم في وحدة موافقة ملفات تعريف الارتباط)
  • النص: #ffffff
  • بلا حدود، نصف القطر 50px، تبطين 7px 16px، 14px / وزن 400
  • أكثر إشراقًا قليلًا من Green Accent — محجوز لإجراء الموافقة في شريط الموافقة

8. Frap — زر الطلب الدائري العائم

  • الخلفية: #00754A (Green Accent)
  • الأيقونة: #ffffff
  • الحجم: 5.6rem / 56px (قياسي)، 4rem / 40px (متغير مصغر)
  • نصف القطر: 50% (دائرة كاملة)
  • موضع ثابت أسفل اليمين، إزاحة لمس -0.8rem لراحة الضغط الإضافية
  • مجموعة الظلال: قاعدية 0 0 6px rgba(0,0,0,0.24) + محيطية 0 8px 12px rgba(0,0,0,0.14)
  • الحالة النشطة: تتلاشى الظل المحيطية إلى 0 8px 12px rgba(0,0,0,0)
  • هذا هو عنصر الارتفاع المميز للمنتج — يطفو فوق كل سطح مُمرَّر

9. تبويب تغذية راجعة بالعرض الكامل — "Provide feedback"

  • الخلفية: #00754A
  • النص: #ffffff
  • نصف القطر: 12px 12px 0px 0px (مستدير في الأعلى فقط)
  • التبطين: 8px 16px
  • الخط: 14px، وزن 400
  • موضع ثابت داخل أسفل اليمين، ملتصق بحافة نافذة العرض

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

بطاقة المحتوى (افتراضية)

  • الخلفية: #ffffff (--cardBackgroundColor)
  • نصف القطر: 12px (--cardBorderRadius)
  • الظل: 0px 0px .5px 0px rgba(0,0,0,0.14), 0px 1px 1px 0px rgba(0,0,0,0.24) (--cardBoxShadow)
  • تُستخدم لـ: البطاقات المميزة، بلاطات عناصر القائمة، لوحات حالة Rewards

بلاطة بطاقة الهدية

  • الخلفية: التصوير الفوتوغرافي المُوضَّح يملأ البطاقة (بلا خلفية صلبة)
  • نصف القطر: مشابه للبطاقات (~12px، أكثر إحكامًا قليلًا عند الزوايا)
  • الظل: أخف من بطاقة المحتوى الافتراضية — تُعامَل كبطاقات فيزيائية على اللوحة
  • مُصنَّفة حسب الفئة فوق شبكة البطاقة (Spring، Thank You، Birthday، Celebration، Mother's Day، Appreciation، Encouragement، Milestones، Anytime)

بطاقات حالة Rewards (توقيع صفحة Rewards)

  • شبكة ثلاثة أعمدة: Bronze / Gold / Silver — كل منها لوح أخضر داكن (#1E3932) مع:
    • حلقة رأس بتدرج/لون ملون
    • شارة "Level" مرقمة
    • عنوان الحالة بوزن SoDoSans الكبير 600
    • قائمة النجوم/المزايا بنص أبيض/أبيض شفاف
    • عنوان تقدم في الأسفل "As you earn more stars…"

بطاقة الشراكة (Rewards)

  • الخلفية: #faf6ee (Gold Lightest) سطح كريمي دافئ
  • المحتوى: شعارات الشريك ("SkyMiles"، "Bonvoy") في المنتصف مع نص وصفي أدناه
  • نصف القطر والظل تتبع مواصفة البطاقة الافتراضية

قائمة منسدلة (قائمة Account المنسدلة، التنقل العلوي)

  • الخلفية: #f9f9f9 (Neutral Cool)
  • عناصر القائمة بحجم 24px / وزن 400 بلون Text Black
  • بلا حدود — فقط تحول سطح الخلفية عن شريط التنقل الأبيض

نافذة منبثقة

  • التبطين: 2.4rem (--modalPadding)
  • التبطين العلوي: 8.8rem (--modalTopPadding) — يترك مساحة لزر الإغلاق/الرأس
  • إجمالي التبطين الرأسي: 11.2rem
  • نصف القطر يرث من مواصفة البطاقة (12px)

المدخلات والنماذج

مدخل التسمية العائمة

  • تطفو التسمية فوق حافة المدخل عند التركيز/الملء
  • حجم خط التسمية في سطح المكتب: 1.9rem افتراضي، ينتقل إلى 1.4rem عند النشاط
  • حجم خط التسمية في الجوال: 1.6rem افتراضي، ينتقل إلى 1.3rem نشط
  • الإزاحة الأفقية للتسمية: 12px من اليسار
  • ترجمة التسمية النشطة: لأعلى إلى -12px مع ترجمة Y -50%
  • تبطين الحقل: 12px
  • التبطين الأفقي للنموذج: 1.6rem
  • التحقق: الحقل الصالح يحصل على صبغة rgba(green-light, 0.33)؛ الحقل غير الصالح يحصل على صبغة rgba(red, 0.05)
  • الانتقال: 0.3s option-label-marker-expansion cubic-bezier(0.32, 2.32, 0.61, 0.27) على المدخل المحدد

أيقونة الخيار (مربع اختيار/زر راديو)

  • التبطين: 3px داخلي
  • يستخدم منحنى cubic-bezier للمدخل المحدد أعلاه (منحنى "نابض" قليلًا بتجاوز 2.32)

التنقل

شريط التنقل العام (الشريط العلوي)

  • موضع ثابت بارتفاعات تدريجية: 64px xs → 72px جوال → 83px جهاز لوحي → 99px سطح مكتب
  • مجموعة الظلال: 0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07) — ارتفاع ناعم ثلاثي الطبقات
  • يسار: شعار Starbucks الكلامي، بإزاحة 99px (md) / 131px (lg) من الحافة اليسرى
  • روابط أساسية inline بـ SoDoSans وزن 400–600: Menu · Rewards · Gift Cards
  • يمين: رابط "Find a store" + Sign in (محيط) + Join now (مملوء أسود)

شريط التنقل الفرعي (الشريط الثاني، مثلًا داخل Rewards)

  • الارتفاع: 53px (شريط تنقل فرعي عام) / 48px (شريط تنقل فرعي داخلي)
  • عادةً مجموعة تبويبات أفقية تحت شريط التنقل العام

تنقل الجوال

  • ينهار إلى درج hamburger أسفل نقطة كسر الجهاز اللوحي
  • زر Frap العائم يستمر في أسفل اليمين بغض النظر عن حالة التنقل

معالجة الصور

  • تصوير بطولي: صور المنتجات (مشروبات في كوب زجاجي شفاف بخلفيات ملونة — مرجاني، حكيمي، كهرماني دافئ) تشغل ~40vw من تخطيط البطولي المنقسم؛ النص يشغل الـ 60vw الأخرى (--headerCrateProportion: 40vw / --contentCrateProportion: 60vw)
  • رسوم بطاقات الهدايا التوضيحية: كل بطاقة صورة فوتوغرافية موضحة مميزة (طابع مطلي، مظهر مرسوم باليد، لوح ألوان دافئة). لا رسوم متولدة عامة أبدًا.
  • تصوير احتفالات Rewards: صور فوتوغرافية لشاشات تطبيق Starbucks Rewards محمولة باليد، تراكيب بزاوية — تصوير المنتج في السياق.
  • صور مصغرة للقائمة: تصوير مربع أو 4:3 للمنتج بخلفيات بيضاء/كريمية نظيفة، ظل ناعم خفيف حول الكوب.
  • تلاشي ظهور الصورة: انتقال opacity 0.3s ease-in عند تحميل الصورة (--imageFadeTransition).

الشريط المميز (شريط البطولي الأخضر الداكن)

شريط بعرض كامل #1E3932 (House Green) مع:

  • يسار: عنوان أبيض + عنوان فرعي + صف نداء إجراء
  • يمين: تصوير فوتوغرافي للمنتج أو رسم توضيحي
  • نسبة التقسيم ~40/60 أو 50/50 حسب القسم
  • نص أبيض بالكامل مع rgba(255,255,255,0.70) للنسخة الثانوية
  • نداءات الإجراء تتبع نمط أخضر على أخضر معكوس (مملوء أبيض) + محيط على داكن (حدود بيضاء) المزدوج

الموسع / الأكورديون

  • المدة: 300ms (--expanderDuration)
  • منحنى التوقيت: cubic-bezier(0.25, 0.46, 0.45, 0.94) — تسارع خروج محسوب
  • يُستخدم لأقسام الأسئلة الشائعة في صفحات Rewards وبطاقات الهدايا

وحدة موافقة ملفات تعريف الارتباط

بطاقة نموذج منبثق أخضر داكن في أعلى الصفحة مع زرَّي "Agree" (مملوء أخضر) و"Manage preferences" (محيط). تظهر عند الزيارة الأولى؛ قابلة للإغلاق.

مكونات تفاصيل المنتج (مجموعة توقيع PDP)

مجموعة مكونات متكررة تُستخدم في صفحات منتج القائمة (مثل /menu/product/40498/iced لتفاصيل مشروب، /menu/product/.../nutrition للمعلومات الغذائية). تُوسّع هذه المكونات مخزون المكونات دون تغيير الرموز.

محدد خيارات الحجم

  • صف أفقي من 4 أزرار أيقونة كوب (Tall / Grande / Venti / Trenta)
  • كل عنصر: أيقونة صورة ظلية للكوب في الأعلى، اسم الحجم أدناه (16/700 بلون Starbucks-Green)، تعليق الأوقية السائلة (13/400 بلون Text Black Soft)
  • الحالة النشطة: حلقة محيط دائرية خضراء (2px solid #00754A) حول أيقونة الكوب المحددة
  • غير نشط: بلا حلقة، نفس الطباعة
  • صف بالعرض الكامل، تباعد متساوٍ
  • نصف قطر الحاوية: 12px أو مسطح؛ الأيقونات الفردية دائرية 50%
  • التبطين: 16px 24px داخلي

تحديد الإضافة/الحليب (مستطيل محيط)

  • الخلفية: #ffffff
  • الحدود: 1px solid #d6dbde (Input Border)
  • نصف القطر: 4px
  • بالعرض الكامل في عموده
  • تسمية عائمة فوق الحد العلوي: "Add-ins" / "Milk" / "Add-ins" — 13/700 بلون Text Black، أحرف كبيرة، تتبع 0.325px
  • القيمة المعروضة في المنتصف (مثل "Ice"، "Coconut"، "Strawberry Fruit Inclusions scoop"): 16/400 Text Black
  • أيقونة chevron-down على اليمين بلون Text Black Soft
  • التركيز: تنتقل الحدود إلى Green Accent (#00754A)

خطوة رقمية

  • مدمجة داخل صف Add-in عند الحاجة إلى كمية (مثل Strawberry Fruit Inclusions scoop)
  • زر − + رقم العدد + زر +، جميعها inline على يمين التسمية
  • الأزرار: دائرية 32×32px مع حدود 1px solid #d6dbde، أيقونة رمادية محايدة
  • رقم العدد: 16/700 Text Black في المنتصف

زر التخصيص

  • الخلفية: #ffffff
  • النص: #00754A (Green Accent)
  • الحدود: 1.5px solid #00754A
  • نصف القطر: 50px (بيضاوي كامل)
  • التبطين: 14px 40px (أكبر بشكل سخي من البيضاويات الافتراضية — هذا إجراء أساسي ثانوي)
  • التسمية: "Customize" مع أيقونة بريق ذهبي ✨ مدمجة على اليسار
  • يُستخدم لـ: الدخول إلى تدفق تخصيص المشروب بعد اختيار الحجم/الحليب

زر الإضافة إلى الطلب (PDP)

  • الخلفية: #00754A (Green Accent)
  • النص: #ffffff
  • نصف القطر: 50px
  • التبطين: 14px 32px
  • مثبت في أعلى يمين بطاقة المنتج و/أو محاذى لليمين داخل شريط توفر المتجر
  • نفس سلوك scale(0.95) النشط كباقي نداءات الإجراء الأساسية

بيضاوي تكلفة Rewards — "200★ item"

  • الخلفية: شفافة
  • الحدود: 1px solid #cba258 (Gold)
  • النص: #cba258 (Gold)
  • نصف القطر: 50px (بيضاوي كامل)
  • التبطين: 4px 12px
  • المحتوى: "200★ item" حيث ★ رمز نجمة مملوءة صغيرة — يشير إلى نجوم Rewards المطلوبة لاسترداد هذا العنصر
  • الخط: Proxima Nova 13/700 بتتبع 0.5px
  • يُستخدم فقط على المنتجات القابلة للاسترداد عبر Rewards

شريط وصف المنتج

  • شريط أخضر داكن بالعرض الكامل (#1E3932 House Green)
  • يحتوي من الأعلى إلى الأسفل على:
    1. بيضاوي تكلفة Rewards (ذهبي) إن وُجد
    2. نص وصف المنتج الجسمي بالأبيض (16/400/1.5)
    3. ملخص غذائي inline ("140 calories, 25g sugar, 2.5g fat") مع تلميح أيقونة المعلومات — 14/700 أبيض
    4. زر بيضاوي "Full nutrition & ingredients list" محيط أبيض على أخضر
  • التبطين: 32px رأسي
  • يظهر أسفل شريط رأس المنتج الأساسي

جدول المكونات / التغذية

  • تخطيط عمودين في صفحة التغذية
  • العمود الأيسر: رأس "Ingredients" + قائمة أو نص مؤقت "Not available for this item" بفقرة توضيحية بلون Text Black Soft 14/400
  • العمود الأيمن: رأس "Nutrition" + صفوف تسمية/قيمة
  • كل صف: تسمية المغذيات (Proxima Nova 14/400) على اليسار، القيمة (مثل "140 calories"، "25g"، "205 mg**") على اليمين، مفصولة بخط شعري 1px solid #e7e7e7 أدناه
  • حاشية لعلامات الكافيين/النجمة بخط 13/400 Text Black Soft في الأسفل
  • نمط قابل لإعادة الاستخدام لجداول الحقائق الغذائية المتوافقة مع اللوائح

محدد توفر المتجر

  • يظهر على الشريط المميز الأخضر الداكن فوق صف خيارات الحجم
  • مستطيل مستدير بالعرض الكامل بداخل أبيض شفاف
  • النص: "For item availability, choose a store" بالأبيض، 14/400
  • الجانب الأيمن: قدرة chevron-down + أيقونة SVG حقيبة تسوق بمحيط أبيض
  • نصف القطر: 4px
  • الارتفاع: ~48px

مسار التنقل في PDP

  • مسار "Menu / Refreshers / Pink Energy Drink" فوق عنوان المنتج
  • الفاصل: حرف / بلون Text Black Soft
  • الصفحة الحالية غير مرتبطة، الصفحات السابقة روابط خضراء مؤكدة مسطرة
  • الخط: 14/400 Proxima Nova
  • يظهر في جميع صفحات PDP

رابط Chevron الخلفي (صفحات تغذية PDP / الصفحات الفرعية التفصيلية)

  • رابط نص "← Back" فوق عناوين الأقسام في صفحة التغذية
  • النص بلون Green Accent (#00754A) 14/700 Proxima Nova
  • Chevron يسار < بنفس اللون الأخضر
  • بديل عن مسار التنقل الكامل في الصفحات الفرعية العميقة

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

نظام التباعد

مقياس دلالي قائم على rem (مرتكز 1rem = 10px):

الرمز Rem البكسل الاستخدام النموذجي
--space-1 0.4rem 4px أضيق تبطين inline
--space-2 0.8rem 8px فجوة صغيرة، التبطين الرأسي للزر
--space-3 1.6rem 16px افتراضي — تبطين البطاقة، الحارة الخارجية xs
--space-4 2.4rem 24px تباعد داخلي للقسم، الحارة الخارجية md
--space-5 3.2rem 32px تباعد رئيسي بين الأقسام
--space-6 4rem 40px فجوات كبيرة، حارة خارجية lg، منصة الرأس
--space-7 4.8rem 48px تباعد القسم إلى القسم
--space-8 5.6rem 56px تنفس واسع جدًا — ارتفاع Frap
--space-9 6.4rem 64px أوسع تبطين للقسم

رموز الحارة:

  • --outerGutter: 1.6rem (16px، افتراضي / جوال)
  • --outerGutterMedium: 2.4rem (24px، جهاز لوحي)
  • --outerGutterLarge: 4.0rem (40px، سطح مكتب)

الثابت الإيقاعي الشامل: 1.6rem (16px) يظهر في كل صفحة كالحارة الخارجية الافتراضية، وأساس تبطين البطاقة، وحجم نص الجسم 3 — أكثر وحدة تباعد في النظام تكرارًا.

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

  • مقياس عرض العمود: --columnWidthSmall: 343px / Medium: 500px / Large: 720px / XLarge: 1440px
  • شبكة بطاقات الهدايا تستخدم شبكة متجاوبة من 3 إلى 5 بلاطات بعرض ~343px
  • قسم حالة Rewards: 3 ألواح خضراء داكنة عند نقاط الكسر lg+
  • البطولي: تقسيم غير متماثل 40% (صورة) / 60% (محتوى) عبر --headerCrateProportion / --contentCrateProportion

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

تحمل المسافة البيضاء شعور "الوفرة في المقهى." يميل تبطين الأقسام إلى السخاء (40–64px). تُفصَل كتل المحتوى بمسافة بيضاء لا بفواصل. اللوحة الكريمية (#f2f0eb) هي بحد ذاتها نفَس بصري بين البطاقات البيضاء والشرائط الخضراء المميزة.

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

القيمة الاستخدام
12px البطاقات، النوافذ المنبثقة، بلاطات عناصر القائمة (--cardBorderRadius)
12px 12px 0 0 تبويب التغذية الراجعة بالعرض الكامل (مستدير في الأعلى فقط)
50px جميع الأزرار — نصف قطر البيضاوي الكامل (--buttonBorderRadius)
50% الأيقونات الدائرية، زر Frap العائم، صور مصغرة للصور الرمزية
خاص 3.3333%/5.298% بيضاوي لنماذج Starbucks-Visa-Card (--svcRoundedCorners)

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

المستوى المعالجة الاستخدام
البطاقة 0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24) بطاقات المحتوى الافتراضية — ظل مزدوج ناعم كالهمس
شريط التنقل العام 0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07) ارتفاع ناعم ثلاثي الطبقات على الشريط العلوي الثابت
قاعدة Frap 0 0 6px rgba(0,0,0,0.24) هالة قاعدية حول زر نداء الإجراء الدائري العائم
Frap المحيطي 0 8px 12px rgba(0,0,0,0.14) محيطي اتجاهي متكدس — يطفو Frap للأمام
بطاقة الهدية ظل إسقاط خفيف حول الصورة الفوتوغرافية المُوضَّحة شعور البطاقة الفيزيائية لبلاطات الهدايا
بطاقة Starbucks (SVC) drop-shadow(0 4px 1px rgba(0,0,0,0.11)) drop-shadow(0 0 2px rgba(0,0,0,0.24)) ظلال SVG متكدسة لمرئيات بطاقة Starbucks

فلسفة الظل: ناعمة كالهمس، متكدسة على الصلب — لا يلجأ النظام أبدًا إلى ظل إسقاط واحد ثقيل. بدلًا من ذلك، يكدس 2-3 ظلال منخفضة الألفا بإزاحات مختلفة لمحاكاة الإضاءة المحيطية + المباشرة الواقعية. زر Frap هو العنصر الأعلى ارتفاعًا في أي صفحة.

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

  • لا نظام تدرج — الأسطح بكتل ألوان صلبة
  • النطاق بكتل الألوان يحمل العمق المُدرَك (الشرائط الخضراء الداكنة تُقرأ كـ "مناطق مميزة غائرة" بين أقسام الجسم الكريمية/البيضاء)
  • ظلال مرشح SVG على مرئيات Starbucks-Card تُضيف طابعًا فيزيائيًا ثلاثي الأبعاد خفيفًا دون box-shadow

7. افعل ولا تفعل

افعل

  • استخدم Neutral Warm (#f2f0eb) أو Ceramic (#edebe9) كلوحة الصفحة بدلًا من الأبيض الناصع — الكريم الدافئ هو التوقيع
  • عيّن المستويات الخضراء لدور السطح المقصود — Starbucks Green للعناوين، Green Accent لنداءات الإجراء، House Green للشرائط العميقة، Uplift للزخارف
  • حافظ على التتبع الضيق عند -0.01em / -0.16px على SoDoSans عبر النظام بأكمله
  • استخدم نصف القطر البيضاوي الكامل 50px على كل زر دون استثناء
  • طبّق transform: scale(0.95) كحالة نشطة شاملة للزر
  • احجز الذهبي لمناسبات احتفالية لحالة Rewards فقط
  • استخدم SoDoSans لكل شيء تقريبًا؛ انتقل إلى Lander Tall serif فقط لعناوين Rewards التحريرية؛ احجز سكريبت Kalam لحظات "اسم الكوب" في Careers
  • كدّس 2-3 ظلال منخفضة الألفا بدلًا من ظل إسقاط واحد أثقل للارتفاع
  • استخدم زر Frap الدائري العائم كمدخل الطلب العائم المستمر على كل سطح تسوق
  • دع اللوحة الكريمية تتنفس بين بطاقات المحتوى — استخدم المسافة البيضاء لا الفواصل

لا تفعل

  • لا تستخدم الأبيض الناصع كلوحة الصفحة — درجة الحرارة الكريمية الدافئة جوهرية
  • لا تختر "أخضر علامة تجارية واحدة" — نظام الأخضر الرباعي متعمد؛ استخدام #006241 فقط في كل مكان يُفقد العلامة التجارية عمقها
  • لا تستخدم الذهبي كلون تمييزي عام — إنه إشارة Rewards فقط
  • لا تُربّع زوايا الأزرار — البيضاوي الكامل 50px شامل
  • لا تُدخل حشوات التدرج — النظام قائم على كتل الألوان بالكامل
  • لا تعكس التسلسل الهرمي بين h1 وh2 بالحجم — التسلسل الهرمي يأتي من الوزن + اللون (600 Starbucks-Green مقابل 400 Text Black)
  • لا تستخدم الأسود الناصع لنص الجسم — rgba(0,0,0,0.87) يتناسب مع اللوحة الدافئة
  • لا تتخطَّ تغذية راجعة scale(0.95) النشطة على الأزرار — إنه تفاعل دقيق مميز
  • لا تكدّس ظلالًا واحدة ثقيلة؛ دائمًا كدّس 2-3 منخفضة الألفا
  • لا تُدخل serif أو سكريبت في التدفق الرئيسي للتسوق — إنهما ينتميان إلى سياقَي Rewards وCareers على التوالي

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

نقاط الكسر

مستنتجة من رموز عرض المكونات وارتفاعات شريط التنقل التدريجية:

الاسم العرض التغييرات الرئيسية
xs < 480px شريط تنقل 64px؛ قائمة hamburger؛ تخطيطات عمود واحد؛ أزرار بيضاوية بعرض كامل
جوال 480–767px شريط تنقل 72px؛ شبكة بطاقات هدايا 2 في الصف؛ تبطين البطاقة ينضغط
لوحي 768–1023px شريط تنقل 83px؛ شبكة بطاقات هدايا 3 في الصف؛ يبدأ التقسيم البطولي في الظهور
سطح مكتب 1024–1439px شريط تنقل 99px؛ شبكة بطاقات هدايا 4 في الصف؛ بطولي غير متماثل 40/60 كامل
XLarge 1440px+ يتوقف المحتوى عند --columnWidthXLarge؛ شبكة بطاقات هدايا 5 في الصف؛ هامش كريمي إضافي

أهداف اللمس

  • الأزرار البيضاوية بتبطين 7px 16px تقيس ~32px ارتفاعًا — أقل من الحد الأدنى 44px لـ WCAG AAA لأسطح اللمس فقط. في الجوال، قد يتوسع تبطين الزر بصريًا لتلبية الحد الأدنى.
  • زر Frap الدائري العائم بـ 56px أعلى بكثير من الحد الأدنى.
  • يستخدم Frap --frapTouchOffset: calc(-1 * .8rem) لتمديد منطقة الضغط 8px خارج الحافة البصرية.
  • مدخلات التسمية العائمة تُكبّر حجم خط التسمية في الجوال (1.6rem قاعدي مقابل 1.9rem سطح مكتب) — أسهل للضغط والقراءة من مسافة.

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

  • ارتفاع شريط التنقل العام يتوسع تدريجيًا: 64 → 72 → 83 → 99px عبر نقاط الكسر، لا قيمة واحدة
  • التقسيم البطولي ينهار: التقسيم غير المتماثل 40/60 → متكدس (صورة في الأعلى، محتوى أدناه) في الجوال
  • شبكة بطاقات الهدايا: 5 → 4 → 3 → 2 → 1 في الصف عبر نقاط الكسر مع عرض بطاقات معدَّل
  • الشرائط المميزة: تبقى بالعرض الكامل لكن النص والصور يتكدسان رأسيًا في الجوال
  • الحارة الخارجية تتوسع: 16px → 24px → 40px مع نمو نافذة العرض
  • لوحات حالة Rewards الثلاثية الأعمدة: تتكدس في عمود واحد في الجوال

سلوك الصور

  • يُقطع التصوير الفوتوغرافي البطولي للمنتج رأسيًا بشكل أضيق في الجوال؛ يصبح المحتوى مرساة بصرية
  • تُحافظ رسوم بطاقات الهدايا التوضيحية على نسبة العرض إلى الارتفاع؛ تُعاد تدفق شبكة البطاقة
  • انتقال التلاشي opacity 0.3s ease-in عند تحميل الصورة (يمنع الظهور المفاجئ)
  • تصوير تطبيق Rewards في اليد يتوسع بتناسب؛ لا يتمدد أبدًا

9. دليل موجه الوكيل

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

  • نداء الإجراء الأساسي: "Green Accent (#00754A)"
  • نص نداء الإجراء الأساسي: "White (#ffffff)"
  • عنوان العلامة التجارية: "Starbucks Green (#006241)"
  • الشريط المميز / التذييل: "House Green (#1E3932)"
  • لوحة الصفحة: "Neutral Warm (#f2f0eb)"
  • لوحة البطاقة: "White (#ffffff)"
  • نص العنوان على الفاتح: "Text Black (rgba(0,0,0,0.87))"
  • نص الجسم على الفاتح: "Text Black Soft (rgba(0,0,0,0.58))"
  • نص الجسم على الأخضر الداكن: "Text White Soft (rgba(255,255,255,0.70))"
  • مميز Rewards: "Gold (#cba258)"
  • نص Rewards: "Rewards Green (#33433d)"
  • مدمر: "Red (#c82014)"

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

  1. "أنشئ زر بيضاوي نداء إجراء Starbucks الأساسي بخلفية Green Accent (#00754A)، ونص أبيض 'Explore our afternoon menu'، وخط SoDoSans بحجم 16px ووزن 600 مع تتبع أحرف -0.01em، ونصف قطر 50px (بيضاوي كامل)، وتبطين 7px 16px. طبّق transform: scale(0.95) كحالة نشطة مع انتقال 0.2s ease."

  2. "صمم بطاقة محتوى بخلفية White (#ffffff) بنصف قطر 12px، وظل متكدس 0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24). بطّن المحتوى 16–24px (--space-3 إلى --space-4). ضعها على لوحة Neutral Warm (#f2f0eb) بفجوة 16px للعناصر المجاورة."

  3. "ابنِ زر الطلب الدائري Frap العائم — قطر 56px، حشو Green Accent (#00754A)، أيقونة حقيبة تسوق بيضاء في المنتصف. ظل متكدس: 0 0 6px rgba(0,0,0,0.24) + 0 8px 12px rgba(0,0,0,0.14). موضع ثابت أسفل اليمين بإزاحة لمس -0.8rem. الحالة النشطة تُطوي الظل المحيطية إلى 0 8px 12px rgba(0,0,0,0) مع scale(0.95)."

  4. "ابنِ شريطًا مميزًا أخضر داكن — قسم بعرض كامل بخلفية House Green (#1E3932). العمود الأيسر: h2 بـ SoDoSans أبيض بحجم 24px ووزن 600، يليه فقرة جسم Text White Soft (rgba(255,255,255,0.70)) وصف نداء إجراء بزرين (مملوء أبيض بنص Green Accent للأساسي، محيط على داكن بحدود بيضاء للثانوي). العمود الأيمن: تصوير فوتوغرافي للمنتج. نسبة التقسيم 40/60، تتكدس رأسيًا أسفل 768px."

  5. "أنشئ بطاقة حالة Rewards — لوح House Green (#1E3932) بنصف قطر 12px، شريط علوي بتدرج ملون (مستوى Bronze/Silver/Gold). العنوان بـ SoDoSans 24px ووزن 600 بالأبيض. قائمة المزايا كنقاط بيضاء مع تعليقات ثانوية rgba(255,255,255,0.70). نص التقدم في الأسفل بـ Text White Soft. كدّس 3 ألواح في شبكة عند lg+، عمود واحد في الجوال."

  6. "صمم بلاطة بطاقة هدية — نصف قطر البطاقة يطابق 12px، تملأها صورة فوتوغرافية موضحة (طابع لوني مائي مرسوم باليد) كسطح كامل. ظل خفيف يجعلها تبدو كبطاقة فيزيائية على اللوحة الكريمية. تجمّع تحت تسمية الفئة ('Spring'، 'Thank You'، 'Birthday') بـ SoDoSans 24px ووزن 400 فوق الشبكة."

  7. "أنشئ رأس تفاصيل منتج Starbucks — شريط House Green (#1E3932) مع مسار تنقل 'Menu / Refreshers / Pink Energy Drink' بخط 14/400 أبيض فوق عنوان المنتج بـ SoDoSans 32/700 أحرف كبيرة بيضاء. صورة فوتوغرافية للمنتج في المنتصف أسفل العنوان. أسفل الصورة: صف محدد حجم بـ 4 أزرار — كل زر أيقونة كوب يُظهر صورة ظلية رأسية للكوب، واسم الحجم ('Tall' / 'Grande' / 'Venti' / 'Trenta') بخط 16/700 أبيض، وبالأوقية السائلة بخط 13/400 Text White Soft. الحجم المحدد يُغلف أيقونة الكوب بحلقة دائرية 2px solid #00754A."

  8. "ابنِ تدفق تخصيص Starbucks — تحت محدد الحجم، 3 صفوف مدخل مستطيل محيط متكدسة (خلفية بيضاء، حدود 1px solid #d6dbde، نصف قطر 4px). كل منها تسمية عائمة ('Add-ins'، 'Milk'، 'Add-ins') فوق الحد العلوي بخط 13/700 Text Black أحرف كبيرة. القيمة في المنتصف (مثل 'Ice'، 'Coconut'). الجانب الأيمن: chevron-down بلون Text Black Soft. لصف الكمية، ادمج خطوة رقمية (− 1 + بأزرار دائرية 32px محيطة). أسفل الحقول الثلاثة: بيضاوي 'Customize' أخضر محيط مع أيقونة بريق ذهبي، نصف قطر 50px، تبطين 14px 40px. اجمعه مع بيضاوي 'Add to Order' مملوء بـ Green Accent في نفس الصف."

  9. "صمم شريط وصف منتج Starbucks — House Green (#1E3932) بعرض كامل أسفل رأس المنتج. الأعلى: بيضاوي تكلفة Rewards '200★ item' بحدود ذهبية (نصف قطر 50px، تبطين 4px 12px، حدود ونص ذهبي #cba258). أسفله: وصف المنتج بالأبيض 16/400/1.5. ملخص غذائي inline بالأبيض 14/700 ('140 calories, 25g sugar, 2.5g fat') مع تلميح أيقونة معلومات. زر بيضاوي 'Full nutrition & ingredients list' محيط أبيض على أخضر. تبطين رأسي 32px."

  10. "أنشئ جدول حقائق غذائية Starbucks — تخطيط عمودين داخل بطاقة بيضاء. العمود الأيسر: رأس 'Ingredients' (24/400 Text Black)، يليه قائمة مكونات أو فقرة مؤقتة 'Not available for this item' بخط 14/400 Text Black Soft. العمود الأيمن: رأس 'Nutrition'، ثم صفوف تسمية/قيمة (اسم المغذي يسار، القيمة يمين) مفصولة بخطوط شعرية 1px solid #e7e7e7. الطباعة: التسميات بخط 14/400 Text Black، القيم 14/700 Text Black محاذاة يمينًا. حواشي علامات النجمة بخط 13/400 Text Black Soft في الأسفل."

دليل التكرار

عند تحسين الشاشات الموجودة المُولَّدة بنظام التصميم هذا:

  1. ركّز على مكوّن واحد في كل مرة
  2. استند إلى أسماء الألوان المحددة ورموز hex من هذا المستند
  3. استخدم أوصاف اللغة الطبيعية ("لوحة كريمية دافئة"، "نظام أخضر رباعي المستويات") جانبًا مع القيم الدقيقة
  4. احتفظ بالبيضاوي 50px + حالة نشطة scale(0.95) بشكل شامل
  5. تحقق من أن الأخضر مُعيَّن لدوره الصحيح (Green Accent لنداء الإجراء، Starbucks Green للعنوان، House Green للشريط)
  6. لا تُدخل التدرجات — النظام قائم على كتل الألوان
  7. حافظ على تتبع SoDoSans عند -0.01em / -0.16px في جميع أنحاء النظام

الثغرات المعروفة

  • SoDoSans خط مخصص حصري غير متاح على Google Fonts — عند التنفيذ العام، استخدم Inter أو Manrope كبديل ووثّق التبديل
  • Lander Tall (serif Rewards) مخصص أيضًا — استبدله بـ Iowan Old Style أو Lora أو Source Serif Pro
  • توقيتات الحركة المحددة لكل مكون ما وراء الموثقة القليلة (--duration: 0.4s، --iconTransition: all ease-out 0.2s، --expanderDuration: 300ms) لم تُلتقط لكل سطح تفاعلي
  • التصميم الكامل لحالة خطأ النموذج (وزن الحدود الحمراء، موضع الأيقونة) مرئي في رمز الصبغة لكن لم يُستخرج استخراجًا شاملًا
  • المكونات المحددة لصفحات Careers (بطاقة اسم الكوب، شبكة راديو البحث) مُشار إليها في أسماء الرموز لكن هذا الاستخراج لا يغطيها
  • مواصفات نموذج Starbucks Visa Card / بطاقة Starbucks (SVC) التفصيلية مُلمَّح إليها برموز --svcRoundedCorners و--svcShadowFilter لكن غير موثقة توثيقًا كاملًا
Reference in new issue View Git Blame Copy Permalink