workbuddy_skills/open-design/design-systems/playstation/DESIGN-ar.md

# نظام تصميم مستوحى من PlayStation

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

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

يقدّم موقع PlayStation.com نفسه بأسلوب الجناح التسويقي لعلامة إلكترونيات استهلاكية فاخرة تبيع ترفيهاً بالمصادفة. تنظيم الصفحة يقوم على **قناة عمودية من الأسطح المتعاقبة**: رأسية شبه سوداء وعرض رئيسي، تليها سلسلة من الألواح التحريرية البيضاء الناصعة في الوسط، ثم تذييل أزرق داكن يرسّخ التجربة كلها. بين أنماط الأسطح هذه، يعتمد الموقع اعتماداً كبيراً على الصور الفوتوغرافية والمعالجات ثلاثية الأبعاد لمنتجات PS5 وأغلفة الألعاب وأذرع التحكم DualSense، فيترك للأجهزة أن تقوم بالعمل العاطفي بينما يبقى الإطار بالغ الرصانة.

السمة الطباعية الأبرز هي **SST Light (وزن 300) بأحجام كبيرة**. تُستخدم عائلة SST المخصصة من Sony من 22px حتى 54px بوزن 300، مما يمنح عناوين العرض طابعاً هامساً أنيقاً أقرب إلى إعلان ساعات فاخرة منه إلى متجر ألعاب. هذه "السلطة الهادئة" هي النقيض التام لصراخ Manuka في The Verge أو كثافة منضدة الصحف في Wired — PlayStation يريد من الخط أن يتراجع وللمنتج أن يقود. يعتمد النص الأساسي وواجهة المستخدم على أوزان 500-700، لكن صوت *العرض* يبقى رفيعاً وهادئاً دائماً.

المكان الوحيد الذي تنكسر فيه هذه الرصانة هو **التفاعل**. كل زر رئيسي يحمل نفس الحركة عند التمرير: يتحول الملء إلى سيان كهربائي `#1eaedb`، يظهر إطار أبيض بعرض 2px، تزهر خلفه حلقة خارجية زرقاء من PlayStation بعرض 2px، ويتحجّم الزر بالكامل **1.2×**. هذا الجمع بين انبثاق اللون والإطار والحلقة وتأثير الرفع هو سمة Sony التفاعلية الفريدة بين كبار العلامات — كأنها رسوم متحركة مصغّرة لـ"تشغيل الطاقة" تتكرر مئات المرات عبر صفحة واحدة.

**السمات الرئيسية:**
- تخطيط قناة ثلاثي الأسطح: رأسية شبه سوداء، محتوى أبيض ناصع، تذييل أزرق داكن — تتعاقب دون أن تمتزج
- SST وزن 300 من 22 إلى 54px للعرض — عناوين "سلطة هادئة" تتيح للتصوير المنتجي أن يتصدر
- PlayStation Blue `#0070cc` كمرساة العلامة؛ السيان `#1eaedb` محجوز حصراً لحالات التمرير والتركيز
- كل عنصر تفاعلي يتحجّم 1.2× عند التمرير — سمة رفع "تشغيل الطاقة" الفريدة في PlayStation
- أزرار حبة دواء بنصف قطر 999px كامل؛ فن البطاقات في مستطيلات مدوّرة من 12 إلى 24px
- برتقال التجارة `#d53b00` محجوز حصراً لعبارات الحث في PlayStation Store وحالات الشراء
- تغطية واسعة للنقاط الفاصلة تصل إلى 2120px — يتمدد الموقع حتى سياقات التصفح على شاشات 4K

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

### الأساسي (مرساة العلامة)
- **PlayStation Blue** (`#0070cc`): اللون المرسى للعلامة. يُستخدم على التذييل الرئيسي والروابط المضمّنة وملء الأزرار الرئيسية على الأسطح الداكنة وكل علامة "رسمية". عامِله كشيء ثابت لا يتغير — فهو اللون الأكثر ارتباطاً بهذه العلامة في ذاكرة المستهلك.
- **Console Black** (`#000000`): أسود خالص للرأسية والخلفيات البطولية ومناطق عرض المنتجات. يستخدم PlayStation الأسود لإطار الأجهزة كما تستخدم المتاحف الأسود لإطار المنحوتات.

### الثانوي والمميز
- **PlayStation Cyan** (`#1eaedb`): لون التفاعل. يُطبَّق فقط على حالات التمرير والتركيز والنشاط للأزرار والروابط. لا يظهر أبداً كخلفية افتراضية أو لون نص في حالة السكون. اقرن معه إطاراً أبيض `#ffffff` بعرض 2px وحلقة خارجية `#0070cc` بعرض 2px عند التمرير للحصول على المعالجة الكاملة المميزة.
- **Link Hover Blue** (`#1883fd`): المتغير الأكثر إشراقاً المستخدم عند تمرير الروابط النصية المضمّنة. مختلف عن السيان — هذا لون الرابط، والسيان لون الزر.
- **Dark Link Blue** (`#0068bd`): لون الرابط في حالة السكون على الأسطح الفاتحة — ابن عم أكثر تشبعاً من الأزرق الأساسي للعلامة.

### الأسطح والخلفيات
- **Paper White** (`#ffffff`): لوحة المحتوى الرئيسية للألواح التحريرية بين الرأسية والتذييل.
- **Ice Mist** (`#f5f7fa`): نقطة التوقف الجوية لتدرج القسم الفاتح. يُستخدم بشكل خفي خلف بعض الألواح لرفعها عن الأبيض الخالص.
- **Divider Tint** (`#f3f3f3`): لون الخط الأفقي الهادئ بين صفوف المحتوى.
- **Masthead Black** (`#000000`): قماش شريط التنقل العلوي والعرض الرئيسي — محجوز للمناطق التي يتصدرها المنتج.
- **Shadow Black** (`#121314`): مرساة بداية تدرج القسم الداكن عندما يحتاج اللوح إلى عمق جوي.
- **Filter Mist** (`rgba(245, 247, 250, 0.3)`): خلفية شفافة تُستخدم خلف أشرطة الفلترة الثابتة — اللحظة الوحيدة لـ"glassmorphism" في الموقع.

### المحايدات والنصوص
- **Display Ink** (`#000000`): عناوين العرض الرئيسية على الأسطح البيضاء.
- **Deep Charcoal** (`#1f1f1f`): عناوين النص الأساسي ولون الرابط في حالة السكون — أكثر نعومة قليلاً من الأسود الخالص للحد من التأثير البصري على الكتل الكبيرة.
- **Body Gray** (`#6b6b6b`): نص أساسي ثانوي وبيانات وصفية.
- **Mute Gray** (`#cccccc`): ملصقات ثلاثية وحالات معطّلة.
- **Placeholder Ink** (`rgba(0, 0, 0, 0.6)`): نص نموذج العنصر النائب — أسود بنسبة 60%، ليس قيمة رمادية منفصلة.
- **Inverse White** (`#ffffff`): النص الأساسي على الأسطح الداكنة والزرقاء.
- **Dark-Link Blue** (`#53b1ff`): لون الرابط في حالة السكون على الأسطح الداكنة/السوداء — متغير أفتح وأكثر حيوية من PlayStation Blue لسهولة القراءة على الأسود.

### الدلالي والتجاري
- **Commerce Orange** (`#d53b00`): محجوز لعبارات الحث في حالة الشراء في PlayStation Store ونداءات الأسعار وشارات "على عرض". اللون الدافئ الوحيد في الموقع — استخدمه بتحفظ وأبداً خارج سياق تجاري.
- **Commerce Orange Active** (`#aa2f00`): حالة الضغط/النشاط لأزرار التجارة.
- **Warning Red** (`#c81b3a`): أخطاء النموذج وتحذيرات الإجراءات التدميرية.
- **Shadow Wash 80** (`rgba(0, 0, 0, 0.8)`): الستارة الدرامية المستخدمة خلف نص الرأسية على صور المنتجات.
- **Shadow Wash 16** (`rgba(0, 0, 0, 0.16)`): حلقة ارتفاع خفيفة الوزن على البطاقات.
- **Shadow Wash 08** (`rgba(0, 0, 0, 0.08)`): ارتفاع بطاقة خفيف جداً — بالكاد مرئي لكنه يفصل الألواح البيضاء عن الخلفية البيضاء.
- **Shadow Wash 06** (`rgba(0, 0, 0, 0.06)`): أخف ظل في النظام.

### نظام التدرجات
يستخدم PlayStation **تدرجَي قسم** فحسب:
- **تدرج القسم الفاتح**: من `#ffffff` إلى `#f5f7fa` — غسيل يكاد لا يُدرك يرفع اللوح هادئاً عن اللوحة.
- **تدرج القسم الداكن**: من `#121314` إلى `#000000` — غسيل عمودي قصير يمنح ألواح الرأسية نمق تدرج داكن خفياً دون إدخال أي تحول في الصبغة.

كلا التدرجَين يُستخدمان **فقط كخلفيات للأقسام**، وليس داخل المكونات. لا توجد أزرار بتدرج، ولا نصوص بتدرج، ولا هالات مضيئة. العلامة زرقاء — لا زرقاء إلى بنفسجية، ولا زرقاء إلى سيانية.

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

### عائلة الخط
- **SST** / **Playstation SST** (Sony، خاص) — بديل: `Arial`، `Helvetica`. خط Sony العالمي المخصص، صمّمه Toshi Omagari وAkira Kobayashi. يغطي أوزان 300 / 500 / 600 / 700 عبر الصفحة الرئيسية. الوزن **300 من 22 إلى 54px** هو السمة الطباعية لـPlayStation.
- **SST (مضغوط / بديل)** — بديل: `helvetica`، `arial`. متغير مضغوط يُستخدم في حفنة من وحدات واجهة المستخدم حيث تكون العرض مهمة.
- **Arial** — بديل للمرافق لمتغير الزر النادر الذي يُعرض بخط sans النظام.

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

| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الحروف | ملاحظات |
|---|---|---|---|---|---|---|
| عرض رئيسي (XL) | SST | 54px / 3.38rem | 300 | 1.25 | -0.1px | أكبر لحظة SST في الصفحة — عنوان فاخر بوزن هادئ |
| عرض رئيسي (L) | SST | 44px / 2.75rem | 300 | 1.25 | 0.1px | عناوين رئيسية ثانوية |
| عرض كبير | SST | 35px / 2.20rem | 300 | 1.25 | — | عناوين ألواح الميزات |
| عرض متوسط | SST | 28px / 1.75rem | 300 | 1.25 | 0.1px | عناوين الأقسام |
| عرض مضغوط | SST | 22px / 1.38rem | 300 | 1.25 | 0.1px | عناوين الوحدات — لا يزال بوزن خفيف 300 |
| Playstation SST Sub | Playstation SST | 22.5px / 1.41rem | 400 | 1.30 | — | عنوان فرعي ترويجي |
| عنوان واجهة صغير | SST | 18px / 1.13rem | 600 | 1.00 | — | عناوين واجهة مضغوطة |
| زر / عبارة حث | SST | 18px / 1.13rem | 500 | 1.25 | 0.4px | ملصق الزر الرئيسي |
| زر / مؤكّد | SST | 18px / 1.13rem | 700 | 1.25 | 0.45px | عبارات حث عالية التأكيد (شراء، اشتراك) |
| زر عريض | SST | 18px / 1.13rem | 600 | 1.50 | — | ملصق الزر الثانوي |
| نص أساسي هادئ | SST | 18px / 1.13rem | 400 | 1.50 | 0.1px | نص القراءة القياسي |
| نص رابط | SST | 18px / 1.13rem | 400 | 1.50 | — | نص الرابط المضمّن |
| زر مضغوط | SST | 14px / 0.88rem | 700 | 1.25 | 0.324px | عبارات حث صغيرة في البطاقات |
| تعليق مرافق | SST | 14px / 0.88rem | 500 | 1.50 | — | تعليقات وملصقات وسوم |
| نص تعليق | SST | 14px / 0.88rem | 400 | 1.50 | — | بيانات وصفية قياسية |
| Playstation Caption Bold | Playstation SST | 14px / 0.88rem | 700 | 1.40 | — | تعليق مؤكّد |
| Playstation Caption Mid | Playstation SST | 14px / 0.88rem | 600 | 1.40 | — | تعليق شبه عريض |
| Playstation Button | Playstation SST | 14.4px / 0.90rem | 700 | 1.00 | 0.144px | زر واجهة بتباعد سطري ضيق |
| Playstation Tab | Playstation SST | 14px / 0.88rem | 400 | 1.10 | 0.14px | ملصق تبويب/حبة دواء |
| Playstation Compact Caption | Playstation SST | 12.8px / 0.80rem | 400 | 1.10 | — | أصغر تعليق واجهة |
| تعليق صغير | SST | 12px / 0.75rem | 500 | 1.50 | — | نص دقيق في التذييل ونص قانوني |
| تعليق مضغوط عريض | SST | 12.06px / 0.75rem | 700 | 1.50 | — | نص صغير مؤكّد |

### المبادئ
- **الوزن 300 بالأحجام الكبيرة هو الصوت.** PlayStation هي علامة وحيدة بين كبار علامات أجهزة الألعاب تستخدم وزناً خفيفاً في عناوين الرأسية. قاوِم الرغبة في "ترقية" خط العرض إلى 500 أو 700 — الهدوء هو الشخصية.
- **تقفز الأوزان في طبقة واجهة المستخدم.** أسفل 18px يتحول النظام إلى 500-700 لسهولة القراءة. تدرج الوزن من 300 (عرض) إلى 400 (نص أساسي) إلى 500 (تعليقات) إلى 700 (أزرار) هو التسلسل الهرمي.
- **تباعد الحروف شبه غائب.** معظم القيم تتراوح بين 0.1 إلى 0.45px، موجبة أو سالبة قليلاً. قيمة `-0.1px` على الرأسية بحجم 54px تضغط خط العرض بالقدر الكافي ليقرأ كـ"مصمَّم" دون أن يصبح تصريحاً طباعياً.
- **نظامان لـSST.** "SST" و"Playstation SST" هما وظيفياً نفس العائلة بمجموعات مقياس مختلفة قليلاً (Playstation SST أضيق في الأحجام الصغيرة). عاملهما على أنهما قابلان للتبادل لأغراض خارج ترخيص Sony الداخلي.
- **لا أحرف كبيرة كاملة.** خلافاً لـThe Verge وWired، نادراً ما يستخدم PlayStation ملصقات بأحرف كبيرة. تبقى الدوافع والوسوم بحالة العنوان أو حالة الجملة — حركة أخرى من "السلطة الهادئة".
- **لا خط عريض أي مكان.** النظام بأكمله sans serif. لا يوجد تناظر بصوت مطبعي.

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

### الأزرار

**رئيسي — حبة دواء PlayStation Blue**
- الخلفية: `#0070cc` (PlayStation Blue)
- النص: `#ffffff`، SST 18px / 500 / 0.4px تتبع
- الإطار: لا شيء في حالة السكون
- نصف قطر الإطار: `999px` — حبة دواء كاملة
- الحشوة: ~`12px 24px` (متغير حسب فئة الحجم)
- المحيط: `rgb(255, 255, 255) none 0px` في حالة السكون
- **عند التمرير (الحركة المميزة)**:
  - تتحول الخلفية إلى `#1eaedb` (PlayStation Cyan)
  - يبقى النص `#ffffff`
  - يظهر إطار أبيض `#ffffff` بعرض 2px
  - تزهر حلقة خارجية `#0070cc` بعرض 2px (`0 0 0 2px #0070cc`)
  - `transform: scale(1.2)` — يكبر الزر فعلياً بنسبة 20%
- نشط: `opacity: 0.6` — تعتيم سريع للإشارة إلى الضغط
- تركيز: مثل التمرير، لكن الحلقة تتحول إلى `rgb(0, 114, 206) 0px 0px 0px 2px` ظل تركيز
- انتقال: ~180ms ease على الخلفية والتحويل والظل

**ثانوي — مخطط أبيض على داكن**
- الخلفية: `#ffffff`
- النص: `#0172ce` (متغير PlayStation Blue)
- الإطار: `2px outset #000000` — إطار `outset` حقيقي، نادر جداً في CSS الحديث
- نصف القطر: يتفاوت (غالباً `999px` أو `36px`)
- الحشوة: `16px 20px`
- التمرير: نفس ملء السيان المميز + scale(1.2) + معالجة الحلقة
- التركيز: نفس معالجة الحلقة

**برتقال التجارة**
- الخلفية: `#d53b00` (Commerce Orange)
- النص: `#ffffff`، SST 18px / 700 / 0.45px تتبع
- نصف قطر الإطار: `999px` — حبة دواء
- يُستخدم فقط على عبارات الحث في PS Store / شراء / اشتراك Plus
- نشط: تتحول الخلفية الداكنة إلى `#aa2f00`
- التمرير: يتبع قاعدة عكس السيان كبقية الأزرار (ليس تمريراً خاصاً بالبرتقال)

**شفاف Ghost**
- الخلفية: شفافة
- النص: `#1f1f1f` (Deep Charcoal)
- الإطار: `1px solid #dedede`
- الحشوة: `0 10px` (ضيق، محسَّن للتنقل)
- التمرير: ملء سيان، نص أبيض، إطار أبيض 2px، scale(1.2)
- نشط: ينتقل النص إلى `#0072ce`، شفافية 0.6

**دائرة أيقونة**
- الخلفية: `rgba(0, 0, 0, 0.2)` على التصوير؛ `#ffffff` على الأسطح الفاتحة
- نصف قطر الإطار: `100%` — دائرة تامة
- يُستخدم لأسهم التدوير السابق/التالي وأزرار المشاركة
- التمرير: يتفاتح إلى `var(--color-role-backgrounds-primary-link-hover)` (نحو `#e5e5e5` على الفاتح)

**عبارة حث صغيرة (داخل البطاقة)**
- SST 14px / 700 / 0.324px تتبع
- حشوة ~8px 16px
- نصف القطر: `999px`
- يُستخدم داخل بطاقات الألعاب لعبارات الحث "اشترِ الآن" / "أضف إلى السلة"

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

**بطاقة رئيسية (ميزة لعبة)**
- الخلفية: تصوير/معالجة — عادةً مرسوخة على الأسود
- نصف قطر الإطار: `24px` أو `19px` لبطاقات الميزات
- الحشوة: داخل 32-48px
- الظل: `rgba(0, 0, 0, 0.8) 0px 5px 9px 0px` — ظل إسقاط درامي يُستخدم فقط عندما تتداخل البطاقة مع صور الرأسية
- التمرير: تحويل تحجيم خفي، تظهر مخطط سيان على عبارة الحث الرئيسية

**بلاطة غلاف اللعبة**
- الخلفية: غلاف اللعبة، بدون حشوة
- نصف قطر الإطار: `12px` أو `13px` (صور) / `19px` (إطار البطاقة)
- الظل: `rgba(0, 0, 0, 0.08) 0px 5px 9px 0px` — ارتفاع خفيف الوزن
- التمرير: تضيء عبارة الحث الرئيسية للبطاقة بالسيان، قد تتحجم البطاقة نفسها 1.02×
- الانتقال: 200ms ease على التحويل

**لوح محتوى (أبيض)**
- الخلفية: `#ffffff` أو تدرج القسم الفاتح `#ffffff → #f5f7fa`
- الإطار: عادةً لا شيء؛ يُفصل عن الجيران بالمسافات والظلال الخفيفة
- نصف القطر: `12px`-`24px` حسب تسلسل اللوح الهرمي
- الظل: `rgba(0, 0, 0, 0.06) 0px 5px 9px 0px` — الأخف في النظام

**بطاقة داكنة على داكن**
- الخلفية: `rgba(0, 0, 0, 0.2)` فوق التصوير
- نصف قطر الإطار: `6px` (مضغوط) أو `24px` (ميزة)
- يُستخدم لإدراجات "مجموعة الصحافة" أو "كتلة الإحصاءات" فوق فيديو الرأسية

### المدخلات والنماذج
- **افتراضي**: خلفية `#ffffff`، إطار `1px solid #cccccc`، نصف قطر الإطار `3px` (أضيق من بقية النظام — المدخلات هي المكان الوحيد الذي يصبح فيه PlayStation مضغوطاً فعلاً)، نص SST 16px بـ`#1f1f1f`، عنصر نائب `rgba(0, 0, 0, 0.6)`.
- **تركيز**: حلقة تركيز `#0070cc` بعرض 2px عبر `box-shadow: 0 0 0 2px #0070cc`. لا يتغير لون الإطار — الحلقة هي التي تؤدي العمل.
- **خطأ**: ينتقل الإطار والنص إلى `#c81b3a` (Warning Red)، نص خطأ مضمّن أسفله بنفس اللون الأحمر.
- **انتقال**: ~180ms ease على الإطار والظل.

### التنقل

- **شريط التنقل العلوي**: شريط أسود `#000000` ممتد بالكامل مع شعار PlayStation (أبيض) محاذٍ لليسار، روابط الفئات في المنتصف بـSST 14-16px / 500، وعبارة حث صغيرة "تسجيل الدخول" محاذية لليمين.
- **التمرير على رابط التنقل**: ينتقل اللون من `#ffffff` إلى `#1883fd` (Link Hover Blue)، بدون خط تحت.
- **القسم النشط**: يُميَّز بخط تحتي خفي بعرض 2px بلون `#0070cc`.
- **الجوّال**: ينهار التنقل إلى درج hamburger. داخل الدرج، تتكدس الروابط عمودياً بفجوات 16px وحشوة أفقية 20px.
- **السلوك الثابت**: يبقى شريط التنقل مثبتاً في الأعلى عند التمرير؛ عندما يدخل منطقة سطح فاتح **لا ينعكس** — يبقى ذو خلفية سوداء طوال الوقت.

### معالجة الصور

- **نسب العرض إلى الارتفاع**: 16:9 لفيديو/تصوير الرأسية، 1:1 لمعالجات أجهزة التحكم، 3:4 لأغلفة الألعاب، 4:3 لصور الحياة اليومية.
- **الزوايا**: مدوّرة إلى `12px` أو `13px` أو `24px` حسب سياق البطاقة. أغلفة الألعاب تحصل على `6-12px`، صور الرأسية على `24px`.
- **امتلاء كامل**: فقط في رأسية العرض الرئيسي وبانرات التذييل الترويجية. كل شيء آخر يجلس داخل عمود محتوى به حشوة.
- **الظل**: إسقاط درامي `rgba(0, 0, 0, 0.8) 0 5px 9px 0` على الرأسيات، خفيف `rgba(0, 0, 0, 0.06) 0 5px 9px 0` على بلاطات الشبكة.
- **التمرير**: تبقى الصورة ثابتة، إطار البطاقة وعبارة الحث الرئيسية هما اللتان تستجيبان.
- **التحميل الكسول**: `loading="lazy"` على كل شيء أسفل الطية، `eager` على رأسية العرض الرئيسي.

### حبة دواء متجر الألعاب (مميزة)
- الخلفية: `#ffffff`
- النص: `#000000`، SST 14px / 500
- الحشوة: `14px 18px`
- نصف القطر: `9999px` — حبة دواء كاملة
- وسوم حبة دواء محايدة تجلس بجوار أغلفة الألعاب لتسمية المنصة ("PS5"، "PS4"، "PSVR2"). تباين أبيض على داكن.

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

### نظام التباعد
- **الوحدة الأساسية**: 8px.
- **المقياس**: 1، 2، 3، 4.5، 5، 8، 9، 10، 12، 14، 15، 16، 18، 20، 21px.
- **حشوة القسم**: 48-96px عمودياً بين الألواح الرئيسية. تستخدم انتقالات الرأسية إلى المحتوى الطرف الأكبر.
- **حشوة البطاقة**: 20-32px داخلياً. يمكن أن تتمدد بطاقات الرأسية المميزة إلى 48px.
- **التباعد المضمّن**: 8-12px بين العنوان والمقدمة، 12-16px بين المقدمة وعبارة الحث.
- **المقياس الصغير**: القيم 1/2/3/4.5/5/9/10/12 تُستخدم لحشوة حبة الدواء وتباعد التعليق وإزاحات الإطار — ليس للإيقاع التحريري.

### الشبكة والحاوية
- **الحد الأقصى للعرض**: ~1920px (الكسر المكتشف يصل إلى 2120px). تحدّد الحاويات عادةً عند `1280-1920px` حسب اللوح.
- **أنماط الأعمدة**: شبكة 12-عموداً متجاوبة تنحل إلى صفوف بلاطات ألعاب من 3/4/6 أعمدة حسب التسلسل الهرمي. مناطق الرأسية تمتد غالباً 12 عموداً؛ البلاطات المميزة تجلس في تشكيلات 6+3+3 أو 4+4+4.
- **الحشوة الخارجية**: 16px جوّال → 48px لوحي → 64-96px سطح مكتب.
- **الفجوات**: 16-24px بين الأعمدة، أضيق (8-12px) داخل مجموعات البلاطات.

### فلسفة المساحة البيضاء
يعامل PlayStation المساحة البيضاء كما تعامل العلامة الفاخرة إضاءة المتجر — كإشارة مميزة. ثمة مسافة تنفس عمودية أكثر بوضوح بين الوحدات مقارنةً بأي موقع تجزئة رئيسي آخر، وكثيراً ما تحمل الألواح التحريرية البيضاء عنواناً واحداً + صورة واحدة + عبارة حث واحدة بحشوة على مستوى الرأسية. الأثر هو "إيقاع معرض" حيث يحصل كل منتج على غرفته الخاصة بدلاً من التنافس في شبكة من الصور المصغرة.

### مقياس نصف قطر الإطار
- **2px** — أزرار بانر ملفات تعريف الارتباط وواجهة الإدارة الصغيرة
- **3px** — مدخلات النماذج وألواح التبويب (أضيق من كل شيء آخر — إشارة مقصودة لـ"واجهة وظيفية")
- **6px** — الأزرار المضغوطة والصور المضمّنة
- **12px** — صور أغلفة الألعاب القياسية وصور المحتوى
- **13px** — بعض أغلفة الأشكال (إزاحة بـ1px عن 12px للتداخل)
- **19px** — بطاقات الميزات
- **20px** — امتدادات وسوم مضمّنة
- **24px** — بطاقات الرأسية وإطارات الميزات الرئيسية
- **36px** — متغيرات التنقل وأزرار ثانوية بشكل حبة دواء كاملة
- **48px** — أزرار الميزات الكبيرة
- **999px / 100%** — أزرار رئيسية بشكل حبة دواء كاملة وأزرار أيقونة دائرية

أحد عشر قيمة منفصلة لنصف القطر — من أغنى أنظمة الأنصاف في أي موقع في هذا الكتالوج. يوجد هذا التنوع لأن PlayStation يستخدم عمداً أنصاف قطر مختلفة لـ*تسلسلات هرمية* مختلفة: 3px للمرافق، 12px للوسائط، 24px للميزات، 999px لعبارات الحث.

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

| المستوى | المعالجة | الاستخدام |
|---|---|---|
| 0 | لا ظل | محتوى افتراضي على `#ffffff` |
| 1 | `rgba(0, 0, 0, 0.06) 0 5px 9px 0` | رفع خفيف جداً للوح تحريري |
| 2 | `rgba(0, 0, 0, 0.08) 0 5px 9px 0` | ارتفاع بلاطة شبكة قياسي |
| 3 | `rgba(0, 0, 0, 0.16) 0 5px 9px 0` | بطاقة مؤكّدة (تمرير أو نشطة) |
| 4 | `rgba(0, 0, 0, 0.8) 0 5px 9px 0` | ظل تراكب الرأسية — إسقاط درامي يُستخدم فوق التصوير |
| 5 | `0 0 0 2px #0070cc` (حلقة تركيز) | حالة تركيز الزر الرئيسي |
| 6 | `0 0 0 2px #000000` (حلقة تمرير) | حلقة تمرير الزر الثانوي |
| 7 | تدرج قسم `#121314 → #000000` | عمق جوي على ألواح الرأسية الداكنة |

فلسفة العمق في PlayStation **متدرجة لكن مقيَّدة**. يمتد مقياس الظل من 0.06 إلى 0.16 للحالات العادية، ثم يقفز إلى 0.8 للإسقاطات على الرأسية — لا يوجد وسط 0.2، 0.3، 0.4. الأثر هو أن معظم الصفحة تبقى شبه مسطحة، لكن عندما تحتاج بطاقة الرأسية إلى التحليق فوق التصوير، فإنها *تحلّق* فعلاً. الارتفاع إما مهموس أو مصروخ، وليس مبهوتاً.

### العمق الزخرفي
- **تدرجات الأقسام** (الداكنة والفاتحة، كلاهما موصوف أعلاه) — تُستخدم فقط كخلفيات للأقسام
- **حلقات التركيز/التمرير** بعرض 2px، زرقاء أو سيانية دائماً حسب الحالة
- **لا توهج، لا ضبابية، لا تأثيرات جوية** بخلاف تدرجَي القسمَين
- **لا أزرار بتدرج ولا نصوص بتدرج** — النظام البصري كتل ألوان صلبة في كل مكان باستثناء انتقالات الأقسام

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

### يجب
- **يجب** استخدام PlayStation Blue (`#0070cc`) كملء رئيسي لعبارات الحث ومرساة التذييل. إنه اللون المرسى للعلامة.
- **يجب** استخدام SST وزن 300 لكل عنوان عرض بحجم 22px وما فوق. العنوان بالوزن الخفيف هو الصوت.
- **يجب** تطبيق توقيع التمرير الكامل على كل زر رئيسي: ملء سيان + إطار أبيض 2px + حلقة زرقاء خارجية 2px + `scale(1.2)`.
- **يجب** استخدام نصف قطر حبة الدواء الكامل (`999px`) على الأزرار الرئيسية وأزرار التجارة.
- **يجب** حجز PlayStation Cyan (`#1eaedb`) حصراً لحالات التمرير والتركيز والنشاط — ليس أبداً كخلفية ساكنة.
- **يجب** استخدام Commerce Orange (`#d53b00`) فقط على عبارات الحث في PlayStation Store / الشراء ونداءات الأسعار.
- **يجب** التعاقب بين ألواح الرأسية الداكنة وألواح المحتوى البيضاء والتأسيس بتذييل أزرق داكن — تخطيط القناة ثلاثي الأسطح هو إيقاع الصفحة.
- **يجب** استخدام ظلال إسقاط الرأسية الدرامية `rgba(0, 0, 0, 0.8)` عندما تتداخل بطاقة مع تصوير المنتج.
- **يجب** إبقاء شريط التنقل العلوي أسود في كل موضع تمرير — لا ينعكس إلى الأبيض فوق الألواح الفاتحة.

### لا يجب
- **لا يجب** تثقيل عناوين العرض. الوزن 300 من 22 إلى 54px هو صوت PlayStation. خط العرض بالوزن 700 يبدو كـ"متجر ألعاب آخر".
- **لا يجب** استخدام ملصقات أو دوافع بأحرف كبيرة كاملة. نادراً ما يستخدم PlayStation الأحرف الكبيرة — إنها علامة سلطة هادئة، لا علامة شريط تحذير.
- **لا يجب** استخدام أزرار أو نصوص أو خلفيات بتدرج خارج تدرجَي القسمَين المعلنَين.
- **لا يجب** إدخال ألوان دافئة خارج Commerce Orange. لا عبارات حث حمراء، لا تمييزات صفراء، لا حبوب نجاح خضراء.
- **لا يجب** استخدام زوايا مربعة على الأزرار أو الوسائط. النظام به أحد عشر نصف قطر — اختر واحداً، لكن لا تختر `0` أبداً.
- **لا يجب** تخطي حركة التمرير `scale(1.2)` على الأزرار الرئيسية. رفع التحجيم هو توقيع تفاعل العلامة.
- **لا يجب** استخدام خط عريض. النظام 100% SST sans.
- **لا يجب** السماح للسيان `#1eaedb` بالظهور كلون نص أو خلفية في حالة السكون. إنه موجود فقط في الحركة.
- **لا يجب** تصميم ألواح تتنافس على الانتباه. إيقاع المساحة البيضاء في PlayStation يمنح كل وحدة "غرفة معرضها" الخاصة.

## 8. السلوك التجاوبي

### نقاط الكسر

| الاسم | العرض | التغييرات الرئيسية |
|---|---|---|
| جوّال صغير | <400px | عمود واحد، ينهار التنقل إلى hamburger، يتقلص عرض SST الرئيسي إلى ~28px |
| جوّال | 400-599px | عمود واحد، تتكدس البلاطات بعرض كامل، تفتح الحشوة إلى 16px |
| جوّال كبير | 600-767px | لا يزال عموداً واحداً لكن خيار عمودين للبلاطات في وحدات محددة |
| لوحي عمودي | 768-1023px | شبكة ألعاب عمودين، التنقل لا يزال مضغوطاً |
| لوحي أفقي | 1024-1279px | شبكة 3-4 أعمدة، التنقل الكامل مُعاد |
| سطح مكتب | 1280-1599px | شبكة تحريرية كاملة، حجم عرض رئيسي أقصى (44-54px) |
| سطح مكتب كبير | 1600-1919px | الحاوية تحدّ عند 1600px، تتوسع الهوامش |
| 4K / شاشة كبيرة | ≥1920px | تتمدد الحاوية إلى حد أقصى 1920px، يتوسع محتوى الرأسية لمطابقة مسافة المشاهدة على التلفاز |
| عريض جداً | ≥2120px | نقطة كسر قصوى — تبقى الصفحة مثبتة، الهوامش الخارجية تمتص العرض الزائد |

اكتشف المسح 30 نقطة كسر بين 320px و2120px — نطاق تجاوبي غير عادي في اتساعه. يضبط PlayStation تحديداً لـ**سياقات الشاشة الكبيرة** (1920-2120px) لأن أصحاب PS5 يتصفحون الموقع كثيراً على أجهزة التلفاز عبر متصفح الجهاز أو عبر الإرسال من الهاتف. تتوقف معظم مواقع التجزئة عن الضبط عند 1440px؛ PlayStation يستمر في الضبط حتى 4K.

### أهداف اللمس
- أزرار حبة الدواء الرئيسية ارتفاعها ~48-56px (نص SST 18px + ~12-16px حشوة عمودية) — مريحة لمعيار WCAG AAA.
- روابط التنقل أصغر (~32-40px ارتفاعاً) على سطح المكتب؛ على الجوّال تحصل على حشوة 48px+ داخل الدرج.
- أزرار دائرة الأيقونات 40-48px — صديقة للمس.

### استراتيجية الانهيار
- **التنقل**: تنقل كامل → مضغوط → درج hamburger مع ضيق نافذة العرض. يبقى الشعار مثبتاً لليسار؛ تبقى عبارة الحث مثبتة لليمين.
- **الشبكة**: 6 أعمدة → 4 → 3 → 2 → 1. تُعيد بطاقات بلاطات الألعاب التدفق دون قص غلاف الفن.
- **التباعد**: تضيق حشوة القسم من 96px → 64px → 48px → 32px → 24px مع ضيق نافذة العرض.
- **الخط**: يتقلص عرض SST الرئيسي من 54px → 44px → 35px → 28px → 22px. الوزن الخفيف 300 محفوظ في كل حجم.
- **تصوير الرأسية**: تبديل التوجيه الفني — سطح المكتب يستخدم محاصيل عريضة 16:9، الجوّال يستخدم محاصيل 4:3 أو 1:1 مع المنتج في المنتصف.

### سلوك الصور
- نقطية متجاوبة (`srcset` + `<picture>` مع توجيه فني)، تُحفظ نسب العرض إلى الارتفاع لكل نقطة كسر.
- جاهزة لـ4K: يقدم الموقع صوراً عالية الكثافة عند 1920px+ لتجنب تكبير الحجم عند التصفح على التلفاز.
- `loading="lazy"` على كل شيء أسفل الطية؛ الرأسية `eager` مع تلميح تحميل مسبق.

## 9. دليل موجّه للوكلاء

### مرجع سريع للألوان
- **عبارة الحث الرئيسية**: "PlayStation Blue (`#0070cc`)"
- **التمييز عند التمرير / التركيز**: "PlayStation Cyan (`#1eaedb`)"
- **الخلفية (سطح أبيض)**: "Paper White (`#ffffff`)"
- **الخلفية (سطح داكن)**: "Console Black (`#000000`)"
- **نص العنوان على الأبيض**: "Display Ink (`#000000`)"
- **نص الأساسي على الأبيض**: "Deep Charcoal (`#1f1f1f`)"
- **نص الأساسي على الأسود**: "Inverse White (`#ffffff`)"
- **تمييز التجارة / الشراء**: "Commerce Orange (`#d53b00`)"
- **مرساة التذييل**: "PlayStation Blue (`#0070cc`)"

### أمثلة موجّهات المكونات
1. *"أنشئ زر عبارة حث رئيسي بملء PlayStation Blue بلون `#0070cc`، نص أبيض بـSST 18px / 500 / 0.4px تتبع، نصف قطر إطار 999px، حشوة 12px × 24px. عند التمرير، تنتقل الخلفية إلى PlayStation Cyan بلون `#1eaedb`، يظهر إطار أبيض `#ffffff` بعرض 2px، تزهر حلقة خارجية `#0070cc` بعرض 2px عبر box-shadow، ويتحجم الزر بأكمله 1.2× — كل ذلك في انتقال ease مدته 180ms."*
2. *"صمّم لوح رأسية على لوحة Console Black بلون `#000000` مع عنوان 54px بوزن SST 300 بلون `#ffffff` وتباعد حروف -0.1px وارتفاع سطر 1.25. ضع عبارة حث رئيسية واحدة أسفله بمعالجة التمرير القياسية لـPlayStation. لا ملصقات بأحرف كبيرة كاملة في أي مكان."*
3. *"ابنِ بلاطة غلاف لعبة: صورة بنسبة عرض إلى ارتفاع 3:4 بنصف قطر إطار 12px، ظل إسقاط خفيف `rgba(0, 0, 0, 0.08) 0 5px 9px 0`، عنوان SST 14px / 700 أسفله، وسم منصة SST 12px / 500، وعبارة حث رئيسية صغيرة 14px / 700 / 0.324px تتبع بلون PlayStation Blue."*
4. *"أنشئ زر عبارة حث تجارية لشراء في PlayStation Store: ملء Commerce Orange بلون `#d53b00`، نص `#ffffff` بـSST 18px / 700 / 0.45px تتبع، نصف قطر 999px، حشوة 12px × 28px. يتحول الحالة النشطة إلى `#aa2f00`. التمرير يتبع عكس السيان القياسي مع تحجيم 1.2×."*
5. *"صمّم لوح محتوى أبيض بين أقسام الرأسية الداكنة: خلفية `#ffffff` مع تدرج القسم الفاتح الخفي `#ffffff → #f5f7fa`، نصف قطر إطار 24px، حشوة داخلية 48px، ارتفاع خفيف جداً `rgba(0, 0, 0, 0.06) 0 5px 9px 0`، عنوان SST 300 بحجم 35px، فقرة نص أساسي 18px، وعبارة حث رئيسية واحدة."*

### دليل التكرار
عند تحسين الشاشات الموجودة المصممة بهذا النظام:
1. **افحص وزن العرض.** كل عنوان بحجم 22px وما فوق يجب أن يكون بوزن SST 300. إذا رأيت وزن 500 أو 700 على مستوى الرأسية، فقد فقدت صوت PlayStation.
2. **افحص معالجة التمرير.** كل زر رئيسي يجب أن يتحجم 1.2× عند التمرير مع تركيبة ملء السيان + إطار أبيض + حلقة زرقاء. افقد أياً من هذه الأربعة وينكسر توقيع التفاعل.
3. **افحص الزوايا.** كل حاوية وزر يجب أن يقع على 2، 3، 6، 12، 13، 19، 20، 24، 36، 48، أو 999px / 100%. الزوايا المربعة تكسر الصوت.
4. **افحص تفشي الألوان.** يجب أن تظهر فقط PlayStation Blue (`#0070cc`) والسيان (`#1eaedb`) وCommerce Orange (`#d53b00`) والرموز الرمادية/الأسود/الأبيض المعلنة في الإطار. إذا رأيت أي صبغة أخرى، صحّحها.
5. **افحص تعاقب الأسطح.** يجب أن تتعاقب الصفحة: رأسية داكنة → محتوى أبيض → رأسية داكنة → محتوى أبيض → تذييل أزرق. إذا كان لوحان بنفس السطح متجاورَين، أدرج انتقالاً.
6. **افحص حالة الأحرف.** حالة الجملة وحالة العنوان فقط. لا ملصقات أو أزرار أو دوافع بأحرف كبيرة كاملة. إذا رأيت أحرفاً كبيرة، حوّلها.
7. **افحص وزن الظل.** يجب أن تقع شفافية الظل على 0.06 / 0.08 / 0.16 / 0.8 — لا شيء بينهما. إذا رأيت ظلال إسقاط 0.1، 0.2، 0.3، 0.5، صحّح إلى أقرب مستوى معلن.
8. **افحص المساحة البيضاء.** إذا بدت وحدتان "تتنافسان" (تتصارعان على الانتباه)، أضف 48-96px من مساحة التنفس العمودية. إيقاع غرفة المعرض في PlayStation غير قابل للتفاوض.