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

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

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

يجسّد موقع Notion فلسفة الأداة ذاتها: لوحة فارغة لا تعيق مسيرك. يُبنى نظام التصميم على ألوان محايدة دافئة بدلاً من الرماديات الباردة، مما يُنتج بساطةً ودودةً ومميزةً تبدو كالورق الفاخر لا كالزجاج المعقّم. خلفية الصفحة بيضاء نقية (`#ffffff`)، غير أن النص ليس أسود خالصاً؛ بل هو شبه أسود دافئ (`rgba(0,0,0,0.95)`) يُلطّف تجربة القراءة بشكل لا يُحسّ. يحمل مقياس الرمادي الدافئ (`#f6f5f4`، `#31302e`، `#615d59`، `#a39e98`) نبرات صفراء-بنية خفية، تمنح الواجهة دفئاً ملموساً يكاد يكون تناظرياً.

خط NotionInter المخصص (نسخة معدّلة من Inter) هو عمود فقرة النظام. عند أحجام العرض (64px)، يستخدم تباعد حروف سلبياً عدوانياً (-2.125px)، مما يمنح العناوين طابعاً مضغوطاً ودقيقاً. نطاق الأوزان أوسع من الأنظمة المعتادة: 400 للنص الأساسي، و500 لعناصر الواجهة، و600 للتسميات شبه العريضة، و700 لعناوين العرض. ميزات OpenType المتمثلة في `"lnum"` (أرقام مستوية) و`"locl"` (أشكال مترجمة) مُفعَّلة على النصوص الكبيرة، مما يُضيف رقياً طباعياً يُكافئ القراء المدققين.

ما يميّز اللغة البصرية لـ Notion هو فلسفة الحدود. فبدلاً من الحدود الثقيلة أو الظلال، تستخدم Notion حدوداً رفيعة للغاية `1px solid rgba(0,0,0,0.1)` تشبه الهمس، خطوط فاصلة بالكاد تُرى، تُنشئ بنيةً بلا ثقل. نظام الظلال بالقدر ذاته من الرقة: طبقات متعددة بتراكم عتامة لا يتجاوز 0.05، تخلق عمقاً يُحسّ لا يُرى.

**الخصائص الرئيسية:**
- خط NotionInter (Inter معدَّل) بتباعد حروف سلبي عند أحجام العرض (-2.125px عند 64px)
- لوحة محايدة دافئة: تحمل الرمادي نبرات صفراء-بنية (`#f6f5f4` أبيض دافئ، `#31302e` داكن دافئ)
- نص شبه أسود عبر `rgba(0,0,0,0.95)` -- ليس أسود خالصاً، يخلق دفئاً مجهرياً
- حدود رفيعة للغاية: `1px solid rgba(0,0,0,0.1)` في كل مكان -- فواصل بوزن الهمس
- طبقات ظلال متعددة بعتامة دون 0.05 لعمق يكاد لا يُرى
- Notion Blue (`#0075de`) كلون تأكيد وحيد لعبارات الدعوة للتفاعل والعناصر التفاعلية
- شارات بيضاوية (نصف قطر 9999px) بخلفيات زرقاء مصبوغة لمؤشرات الحالة
- وحدة تباعد أساسية 8px بمقياس عضوي غير متصلب

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

### الأساسية
- **Notion Black** (`rgba(0,0,0,0.95)` / `#000000f2`): النص الأساسي، العناوين، نص المحتوى. عتامة 95% تُليّن الأسود الخالص دون التفريط في المقروئية.
- **Pure White** (`#ffffff`): خلفية الصفحة، أسطح البطاقات، نص الأزرار على خلفية زرقاء.
- **Notion Blue** (`#0075de`): عبارات الدعوة الأساسية، لون الروابط، التأكيد التفاعلي -- اللون المشبع الوحيد في واجهة النواة.

### الثانوية للعلامة التجارية
- **Deep Navy** (`#213183`): لون العلامة التجارية الثانوي، يُستخدم بشكل متقطع للتأكيد والأقسام الداكنة.
- **Active Blue** (`#005bab`): حالة الزر النشطة/المضغوطة -- نسخة أغمق من Notion Blue.

### مقياس المحايد الدافئ
- **Warm White** (`#f6f5f4`): صبغة سطح الخلفية، تناوب الأقسام، حشو البطاقات الخفيف. النبرة الصفراء هي المفتاح.
- **Warm Dark** (`#31302e`): خلفية السطح الداكن، نص الأقسام الداكنة. أدفأ من الرمادي المعياري.
- **Warm Gray 500** (`#615d59`): النص الثانوي، الأوصاف، التسميات الباهتة.
- **Warm Gray 300** (`#a39e98`): نص العنصر النائب، الحالات المعطّلة، نص التسميات التوضيحية.

### ألوان التأكيد الدلالية
- **Teal** (`#2a9d99`): حالات النجاح، المؤشرات الإيجابية.
- **Green** (`#1aae39`): التأكيد، شارات الإنجاز.
- **Orange** (`#dd5b00`): حالات التحذير، مؤشرات الانتباه.
- **Pink** (`#ff64c8`): تأكيد زخرفي، إبراز الميزات.
- **Purple** (`#391c57`): الميزات المميزة، التأكيدات العميقة.
- **Brown** (`#523410`): تأكيد ترابي، أقسام الميزات الدافئة.

### التفاعلية
- **Link Blue** (`#0075de`): لون الرابط الأساسي مع تسطير عند التحويم.
- **Link Light Blue** (`#62aef0`): نسخة أفتح من الرابط للخلفيات الداكنة.
- **Focus Blue** (`#097fe8`): حلقة التركيز على العناصر التفاعلية.
- **Badge Blue Bg** (`#f2f9ff`): خلفية الشارة البيضاوية، سطح أزرق مصبوغ.
- **Badge Blue Text** (`#097fe8`): نص الشارة البيضاوية، أزرق أغمق لتحسين المقروئية.

### الظلال والعمق
- **Card Shadow** (`rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`): ارتفاع البطاقة متعدد الطبقات.
- **Deep Shadow** (`rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px`): ارتفاع عميق بخمس طبقات للنوافذ المنبثقة والمحتوى المميز.
- **Whisper Border** (`1px solid rgba(0,0,0,0.1)`): حدود الفاصل المعيارية -- البطاقات، المقسّمات، الأقسام.

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

### عائلة الخط
- **الأساسية**: `NotionInter`، مع احتياطيات: `Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol`
- **ميزات OpenType**: `"lnum"` (أرقام مستوية) و`"locl"` (أشكال مترجمة) مُفعَّلة على نصوص العرض والعناوين.

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

| الدور | الخط | الحجم | الوزن | ارتفاع السطر | تباعد الحروف | ملاحظات |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | NotionInter | 64px (4.00rem) | 700 | 1.00 (ضيق) | -2.125px | أقصى ضغط، عناوين لوحات الإعلانات |
| Display الثانوي | NotionInter | 54px (3.38rem) | 700 | 1.04 (ضيق) | -1.875px | البطل الثانوي، عناوين الميزات |
| عنوان القسم | NotionInter | 48px (3.00rem) | 700 | 1.00 (ضيق) | -1.5px | عناوين أقسام الميزات، مع `"lnum"` |
| عنوان فرعي كبير | NotionInter | 40px (2.50rem) | 700 | 1.50 | عادي | عناوين البطاقات، الأقسام الفرعية للميزات |
| عنوان فرعي | NotionInter | 26px (1.63rem) | 700 | 1.23 (ضيق) | -0.625px | العناوين الفرعية للأقسام، رؤوس المحتوى |
| عنوان البطاقة | NotionInter | 22px (1.38rem) | 700 | 1.27 (ضيق) | -0.25px | بطاقات الميزات، عناوين القوائم |
| نص أساسي كبير | NotionInter | 20px (1.25rem) | 600 | 1.40 | -0.125px | المقدمات، أوصاف الميزات |
| نص أساسي | NotionInter | 16px (1.00rem) | 400 | 1.50 | عادي | نص القراءة المعياري |
| نص أساسي متوسط | NotionInter | 16px (1.00rem) | 500 | 1.50 | عادي | التنقل، نص الواجهة المؤكَّد |
| نص أساسي شبه عريض | NotionInter | 16px (1.00rem) | 600 | 1.50 | عادي | التسميات القوية، الحالات النشطة |
| نص أساسي عريض | NotionInter | 16px (1.00rem) | 700 | 1.50 | عادي | العناوين بحجم النص الأساسي |
| تنقل / زر | NotionInter | 15px (0.94rem) | 600 | 1.33 | عادي | روابط التنقل، نص الأزرار |
| تسمية توضيحية | NotionInter | 14px (0.88rem) | 500 | 1.43 | عادي | البيانات الوصفية، التسميات الثانوية |
| تسمية توضيحية خفيفة | NotionInter | 14px (0.88rem) | 400 | 1.43 | عادي | تسميات المحتوى التوضيحية، الأوصاف |
| شارة | NotionInter | 12px (0.75rem) | 600 | 1.33 | 0.125px | الشارات البيضاوية، الوسوم، تسميات الحالة |
| تسمية مجهرية | NotionInter | 12px (0.75rem) | 400 | 1.33 | 0.125px | البيانات الوصفية الصغيرة، الطوابع الزمنية |

### المبادئ
- **الضغط على النطاق**: يستخدم NotionInter عند أحجام العرض تباعد حروف -2.125px عند 64px، يتخفف تدريجياً إلى -0.625px عند 26px وعادياً عند 16px. يخلق الضغط كثافةً في العناوين مع الحفاظ على المقروئية في أحجام النص الأساسي.
- **نظام الأوزان الأربعة**: 400 (نص/قراءة)، 500 (واجهة/تفاعلي)، 600 (تأكيد/تنقل)، 700 (عناوين/عرض). يسمح نطاق الأوزان الأوسع مقارنةً بمعظم الأنظمة بتسلسل هرمي أكثر دقةً.
- **تدرج دافئ**: يضيق ارتفاع السطر مع زيادة الحجم -- 1.50 عند النص الأساسي (16px)، 1.23-1.27 عند العناوين الفرعية، 1.00-1.04 عند العرض. يخلق هذا عناوين أكثر إحكاماً وتأثيراً.
- **تتبع مجهري للشارات**: يستخدم نص الشارة بحجم 12px تباعد حروف موجباً (0.125px) -- التتبع الموجب الوحيد في النظام، مما ينتج نصاً صغيراً أعرض وأكثر قابلية للقراءة.

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

### الأزرار

**الأزرق الأساسي**
- الخلفية: `#0075de` (Notion Blue)
- النص: `#ffffff`
- الحشو: 8px 16px
- الحواف الدائرية: 4px (خفية)
- الحدود: `1px solid transparent`
- التحويم: تتغمق الخلفية إلى `#005bab`
- النشط: تحويل scale(0.9)
- التركيز: مخطط تركيز `2px solid`، ظل `var(--shadow-level-200)`
- الاستخدام: عبارات الدعوة الأساسية ("Get Notion free"، "جرّبه")

**الثانوي / الثالثي**
- الخلفية: `rgba(0,0,0,0.05)` (رمادي دافئ شفاف)
- النص: `#000000` (شبه أسود)
- الحشو: 8px 16px
- الحواف الدائرية: 4px
- التحويم: يتغير لون النص، scale(1.05)
- النشط: تحويل scale(0.9)
- الاستخدام: الإجراءات الثانوية، إرسال النماذج

**Ghost / زر الرابط**
- الخلفية: شفاف
- النص: `rgba(0,0,0,0.95)`
- الزخرفة: تسطير عند التحويم
- الاستخدام: الإجراءات الثالثية، الروابط المضمّنة

**زر الشارة البيضاوية**
- الخلفية: `#f2f9ff` (أزرق مصبوغ)
- النص: `#097fe8`
- الحشو: 4px 8px
- الحواف الدائرية: 9999px (بيضاوي كامل)
- الخط: 12px وزن 600
- الاستخدام: شارات الحالة، تسميات الميزات، وسوم "جديد"

### البطاقات والحاويات
- الخلفية: `#ffffff`
- الحدود: `1px solid rgba(0,0,0,0.1)` (حدود الهمس)
- الحواف الدائرية: 12px (البطاقات المعيارية)، 16px (البطاقات المميزة/البطل)
- الظل: `rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`
- التحويم: تكثيف خفيف للظل
- بطاقات الصور: حافة علوية دائرية 12px، الصورة تملأ النصف العلوي

### المدخلات والنماذج
- الخلفية: `#ffffff`
- النص: `rgba(0,0,0,0.9)`
- الحدود: `1px solid #dddddd`
- الحشو: 6px
- الحواف الدائرية: 4px
- التركيز: حلقة مخطط زرقاء
- العنصر النائب: رمادي دافئ `#a39e98`

### التنقل
- شريط تنقل أفقي نظيف على خلفية بيضاء، غير لاصق
- شعار العلامة التجارية محاذٍ لليسار (أيقونة 33x34px + كلمة العلامة)
- الروابط: NotionInter 15px وزن 500-600، نص شبه أسود
- التحويم: تحوّل اللون إلى `var(--color-link-primary-text-hover)`
- عبارة الدعوة: زر بيضاوي أزرق ("Get Notion free") محاذٍ لليمين
- الجوال: طي قائمة الهامبرغر
- قوائم منسدلة للمنتجات بقوائم متعددة المستويات ومصنّفة

### معالجة الصور
- لقطات شاشة المنتج بحدود `1px solid rgba(0,0,0,0.1)`
- الصور ذات الحواف العلوية الدائرية: `12px 12px 0px 0px`
- لقطات شاشة معاينة لوحة التحكم/مساحة العمل تهيمن على أقسام الميزات
- خلفيات تدرج دافئ خلف رسوم البطل التوضيحية (رسوم شخصيات زخرفية)

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

**بطاقات الميزات مع الرسوم التوضيحية**
- رؤوس توضيحية كبيرة (The Great Wave، لقطات شاشة واجهة المنتج)
- بطاقة بحافة دائرية 12px مع حدود الهمس
- عنوان بحجم 22px وزن 700، وصف بحجم 16px وزن 400
- نسخة خلفية بيضاء دافئة (`#f6f5f4`) للأقسام المتناوبة

**شريط الثقة / شبكة الشعارات**
- شعارات الشركات (قسم الفرق الموثوقة) بألوان علاماتها التجارية
- تخطيط شبكي أو تمرير أفقي مع أعداد الفرق
- عرض المقاييس: نمط رقم كبير + وصف

**بطاقات المقاييس**
- عرض أرقام كبيرة (مثل "4,200$ عائد استثمار")
- NotionInter 40px+ وزن 700 للمقياس
- وصف أسفله بنص رمادي دافئ
- حاوية بطاقة بحدود الهمس

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

### نظام التباعد
- الوحدة الأساسية: 8px
- المقياس: 2px، 3px، 4px، 5px، 6px، 7px، 8px، 11px، 12px، 14px، 16px، 24px، 32px
- مقياس عضوي غير متصلب بقيم كسرية (5.6px، 6.4px) للضبط الدقيق

### الشبكة والحاوية
- الحد الأقصى لعرض المحتوى: حوالي 1200px
- البطل: عمود مفرد مركزي بهامش علوي سخي (80-120px)
- أقسام الميزات: شبكات 2-3 أعمدة للبطاقات
- خلفيات أقسام بيضاء دافئة كاملة العرض (`#f6f5f4`) للتناوب
- لقطات شاشة الكود/لوحة التحكم محاطة بحدود الهمس

### فلسفة المساحة البيضاء
- **إيقاع رأسي سخي**: 64-120px بين الأقسام الرئيسية. تترك Notion المحتوى يتنفس بهوامش رأسية فضفاضة.
- **تناوب دافئ**: تتناوب الأقسام البيضاء مع الأقسام البيضاء الدافئة (`#f6f5f4`)، مما يخلق إيقاعاً بصرياً لطيفاً دون كسرات لونية حادة.
- **كثافة تُقدّم المحتوى أولاً**: كتل النص الأساسي مضغوطة (ارتفاع سطر 1.50) لكنها محاطة بهوامش وافرة، مما يخلق جزراً من المحتوى المقروء في بحر من المساحة البيضاء.

### مقياس الحواف الدائرية
- مجهري (4px): الأزرار، حقول الإدخال، العناصر التفاعلية الوظيفية
- خفي (5px): الروابط، عناصر القوائم، بنود القوائم
- معياري (8px): البطاقات الصغيرة، الحاويات، العناصر المضمّنة
- مريح (12px): البطاقات المعيارية، حاويات الميزات، قمم الصور
- كبير (16px): بطاقات البطل، المحتوى المميز، الكتل الترويجية
- بيضاوي كامل (9999px): الشارات، البيضاويات، مؤشرات الحالة
- دائري (100%): مؤشرات التبويب، الصور الرمزية

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

| المستوى | المعالجة | الاستخدام |
|-------|-----------|-----|
| مسطح (المستوى 0) | بلا ظل، بلا حدود | خلفية الصفحة، كتل النص |
| هامس (المستوى 1) | `1px solid rgba(0,0,0,0.1)` | الحدود المعيارية، مخططات البطاقات، المقسّمات |
| بطاقة ناعمة (المستوى 2) | طبقة ظل 4 طبقات (أقصى عتامة 0.04) | بطاقات المحتوى، كتل الميزات |
| بطاقة عميقة (المستوى 3) | طبقة ظل 5 طبقات (أقصى عتامة 0.05، تعتيم 52px) | النوافذ المنبثقة، اللوحات المميزة، عناصر البطل |
| تركيز (إمكانية الوصول) | مخطط `2px solid var(--focus-color)` | تركيز لوحة المفاتيح على جميع العناصر التفاعلية |

**فلسفة الظل**: يستخدم نظام ظلال Notion طبقات متعددة بعتامة فردية منخفضة للغاية (0.01 إلى 0.05) تتراكم لتشكّل ارتفاعاً ناعماً يبدو طبيعياً. يمتد ظل البطاقة ذو الأربع طبقات من تعتيم 1.04px إلى 18px، مما يخلق تدرجاً في العمق بدلاً من ظل صلب واحد. يمتد الظل العميق ذو الخمس طبقات إلى تعتيم 52px بعتامة 0.05، مما ينتج احتجاباً محيطياً يبدو كضوء طبيعي لا كعمق مولّد بالحاسوب. هذا النهج المتعدد الطبقات يجعل العناصر تبدو مضمّنة في الصفحة لا عائمة فوقها.

### العمق الزخرفي
- قسم البطل: رسوم توضيحية للشخصيات الزخرفية (أسلوب مرح، مرسوم باليد)
- تناوب الأقسام: تحوّلات لون الخلفية من الأبيض إلى الأبيض الدافئ (`#f6f5f4`)
- لا حدود صلبة للأقسام -- يأتي الفصل من تغييرات لون الخلفية والتباعد

## 7. السلوك التكيفي

### نقاط الكسر
| الاسم | العرض | التغييرات الرئيسية |
|------|-------|-------------|
| جوال صغير | <400px | عمود مفرد ضيق، حشو أدنى |
| جوال | 400-600px | جوال معياري، تخطيط متراكم |
| لوحي صغير | 600-768px | تبدأ شبكات العمودين |
| لوحي | 768-1080px | شبكات بطاقات كاملة، حشو موسّع |
| سطح مكتب صغير | 1080-1200px | تخطيط سطح مكتب معياري |
| سطح مكتب | 1200-1440px | التخطيط الكامل، أقصى عرض للمحتوى |
| سطح مكتب كبير | >1440px | مركزي، هوامش سخية |

### أهداف اللمس
- تستخدم الأزرار حشواً مريحاً (8px-16px رأسياً)
- روابط التنقل بحجم 15px مع تباعد مناسب
- تمتلك الشارات البيضاوية حشواً أفقياً 8px لأهداف النقر
- يستخدم مفتاح قائمة الجوال زر هامبرغر معياري

### استراتيجية الطي
- البطل: عرض 64px -> يُقلَّص إلى 40px -> 26px على الجوال، مع الحفاظ على تباعد الحروف النسبي
- التنقل: روابط أفقية + CTA أزرق -> قائمة هامبرغر
- بطاقات الميزات: 3 أعمدة -> عمودان -> عمود مفرد متراكم
- لقطات شاشة المنتج: الحفاظ على نسبة العرض إلى الارتفاع مع صور تكيفية
- شعارات شريط الثقة: شبكة -> تمرير أفقي على الجوال
- التذييل: متعدد الأعمدة -> عمود مفرد متراكم
- تباعد الأقسام: 80px+ -> 48px على الجوال

### سلوك الصور
- تحافظ لقطات شاشة مساحة العمل على حدود الهمس بجميع الأحجام
- تُقلَّص رسوم البطل التوضيحية بشكل نسبي
- تستخدم لقطات شاشة المنتج صوراً تكيفية بحواف دائرية متسقة
- تحافظ الأقسام البيضاء الدافئة كاملة العرض على معالجة الحافة إلى الحافة

## 8. إمكانية الوصول والحالات

### نظام التركيز
- تتلقى جميع العناصر التفاعلية مؤشرات تركيز مرئية
- مخطط التركيز: `2px solid` بلون التركيز + مستوى الظل 200
- التنقل بالمفاتيح مدعوم في جميع المكونات التفاعلية
- نص عالي التباين: شبه أسود على أبيض يتجاوز WCAG AAA (نسبة >14:1)

### الحالات التفاعلية
- **الافتراضية**: المظهر المعياري بحدود الهمس
- **التحويم**: تحوّل اللون في النص، scale(1.05) على الأزرار، تسطير على الروابط
- **نشط/مضغوط**: تحويل scale(0.9)، نسخة خلفية أغمق
- **التركيز**: حلقة مخطط زرقاء مع تعزيز الظل
- **معطّل**: نص رمادي دافئ (`#a39e98`)، عتامة مخفضة

### تباين الألوان
- النص الأساسي (rgba(0,0,0,0.95)) على الأبيض: نسبة ~18:1
- النص الثانوي (#615d59) على الأبيض: نسبة ~5.5:1 (WCAG AA)
- CTA الأزرق (#0075de) على الأبيض: نسبة ~4.6:1 (WCAG AA للنص الكبير)
- نص الشارة (#097fe8) على خلفية الشارة (#f2f9ff): نسبة ~4.5:1 (WCAG AA للنص الكبير)

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

### مرجع الألوان السريع
- CTA الأساسية: Notion Blue (`#0075de`)
- الخلفية: Pure White (`#ffffff`)
- الخلفية البديلة: Warm White (`#f6f5f4`)
- نص العنوان: Near-Black (`rgba(0,0,0,0.95)`)
- نص المحتوى: Near-Black (`rgba(0,0,0,0.95)`)
- النص الثانوي: Warm Gray 500 (`#615d59`)
- النص الباهت: Warm Gray 300 (`#a39e98`)
- الحدود: `1px solid rgba(0,0,0,0.1)`
- الرابط: Notion Blue (`#0075de`)
- حلقة التركيز: Focus Blue (`#097fe8`)

### أمثلة على موجّهات المكونات
- "أنشئ قسم بطل على خلفية بيضاء. العنوان بحجم 64px NotionInter وزن 700، ارتفاع سطر 1.00، تباعد حروف -2.125px، لون rgba(0,0,0,0.95). العنوان الفرعي بحجم 20px وزن 600، ارتفاع سطر 1.40، لون #615d59. زر CTA أزرق (#0075de، حافة دائرية 4px، حشو 8px 16px، نص أبيض) وزر ghost (خلفية شفافة، نص شبه أسود، تسطير عند التحويم)."
- "صمّم بطاقة: خلفية بيضاء، حدود 1px solid rgba(0,0,0,0.1)، حافة دائرية 12px. استخدم طبقة الظل: rgba(0,0,0,0.04) 0px 4px 18px، rgba(0,0,0,0.027) 0px 2.025px 7.85px، rgba(0,0,0,0.02) 0px 0.8px 2.93px، rgba(0,0,0,0.01) 0px 0.175px 1.04px. العنوان بحجم 22px NotionInter وزن 700، تباعد حروف -0.25px. المحتوى بحجم 16px وزن 400، لون #615d59."
- "ابنِ شارة بيضاوية: خلفية #f2f9ff، نص #097fe8، حافة دائرية 9999px، حشو 4px 8px، NotionInter 12px وزن 600، تباعد حروف 0.125px."
- "أنشئ تنقلاً: رأس أبيض. NotionInter 15px وزن 600 للروابط، نص شبه أسود. CTA بيضاوي أزرق 'Get Notion free' محاذٍ لليمين (خلفية #0075de، نص أبيض، حافة دائرية 4px)."
- "صمّم تخطيط أقسام متناوبة: تتناوب الأقسام البيضاء مع الأقسام البيضاء الدافئة (#f6f5f4). كل قسم بحشو رأسي 64-80px، عرض أقصى 1200px مركزي. عنوان القسم بحجم 48px وزن 700، ارتفاع سطر 1.00، تباعد حروف -1.5px."

### دليل التكرار
1. استخدم دائماً المحايدات الدافئة -- رمادي Notion يحمل نبرات صفراء-بنية (#f6f5f4، #31302e، #615d59، #a39e98)، لا رمادي مائل للزرقة أبداً
2. يتدرج تباعد الحروف مع حجم الخط: -2.125px عند 64px، -1.875px عند 54px، -0.625px عند 26px، عادي عند 16px
3. أربعة أوزان: 400 (اقرأ)، 500 (تفاعل)، 600 (أكّد)، 700 (أعلن)
4. الحدود همسٌ: 1px solid rgba(0,0,0,0.1) -- لا أثقل من ذلك أبداً
5. تستخدم الظلال 4-5 طبقات بعتامة فردية لا تتجاوز 0.05
6. خلفية القسم البيضاء الدافئة (#f6f5f4) ضرورية للإيقاع البصري
7. الشارات البيضاوية (9999px) للحالات/الوسوم، حافة دائرية 4px للأزرار وحقول الإدخال
8. Notion Blue (#0075de) هو اللون المشبع الوحيد في واجهة النواة -- استخدمه بتقتير لعبارات الدعوة والروابط