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

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

> Category: أدوات المطورين
> نشر الواجهة الأمامية. دقة بالأبيض والأسود، خط Geist.

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

يُمثّل موقع Vercel أطروحةً بصرية حول البنية التحتية للمطورين — نظام تصميم مقيَّد إلى حدٍّ يكاد يكون فلسفياً. الصفحة بيضاء تقريباً (`#ffffff`) مع نص شبه أسود (`#171717`)، مما يخلق فراغاً شبيهاً بالمعرض الفني حيث يستحق كل عنصر مكانه بالبكسل. هذا ليس تبسيطاً بوصفه زخرفة؛ بل هو تبسيط بوصفه مبدأً هندسياً. يعامل نظام Geist الواجهة كما يعامل المترجم الكود — يُجرَّد كل رمز غير ضروري حتى لا يبقى إلا البنية.

عائلة خطوط Geist المخصصة هي الجوهرة الثمينة. يستخدم Geist Sans تتبعاً سلبياً حاداً للحروف (-2.4px إلى -2.88px عند الأحجام الكبيرة)، مما يُنتج عناوين تبدو مضغوطة وعاجلة ومُهندسة — كأنها كود جُمِّع لبيئة الإنتاج. عند الأحجام العادية يتراجع التقارب، لكن الدقة الهندسية تظل قائمة. يُكمل Geist Mono المنظومة بوصفه الرفيق أحادي الفضاء للكود ومخرجات الطرفية والتسميات التقنية. يُفعِّل كلا الخطين `"liga"` (الربط الطباعي) بشكل عام، مضيفاً طبقة من الرقي الطباعي تكافئ القراءة المتأنية.

ما يميز Vercel عن أنظمة التصميم الأحادية الأخرى هو فلسفة الظل كحدٍّ. بدلاً من حدود CSS التقليدية، يستخدم Vercel `box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08)` — ظل بإزاحة وتشتيت صفريين وانتشار 1px، مما يُنشئ خطاً شبيهاً بالحد دون الانعكاسات على نموذج الصندوق. تُتيح هذه التقنية وجود الحدود في طبقة الظل، مما يُمكِّن من انتقالات أكثر سلاسة وزوايا مستديرة دون قطع وثقلاً بصرياً أخف من الحدود التقليدية. يُبنى نظام العمق بالكامل على طبقات متعددة من الظلال المتراكبة، حيث تؤدي كل طبقة غرضاً محدداً: واحدة للحد، وأخرى للارتفاع الناعم، وثالثة للعمق المحيطي.

**الخصائص الرئيسية:**
- Geist Sans بتتبع سلبي حاد (-2.4px إلى -2.88px عند الأحجام الكبيرة) — نص بوصفه بنية تحتية مضغوطة
- Geist Mono للكود والتسميات التقنية مع `"liga"` عاملاً عالمياً
- تقنية الظل كحد: `box-shadow 0px 0px 0px 1px` تحل محل الحدود التقليدية في كل مكان
- طبقات ظلال متعددة للعمق الدقيق (حد + ارتفاع + محيطي في تصريحات مفردة)
- قماش أبيض تقريباً مع نص `#171717` — ليس أسوداً خالصاً، مما يُنتج ليونة في التباين الدقيق
- ألوان التمييز الخاصة بالعمل: Ship Red (`#ff5b4f`)، Preview Pink (`#de1d8d`)، Develop Blue (`#0a72ef`)
- نظام حلقة التركيز باستخدام `hsla(212, 100%, 48%, 1)` — أزرق مشبع لإمكانية الوصول
- شارات حبة البيضاء (9999px) بخلفيات ملونة لمؤشرات الحالة

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

### الأساسية
- **Vercel Black** (`#171717`): النص الأساسي والعناوين وخلفيات الأسطح الداكنة. ليس أسوداً خالصاً — الدفء الخفيف يمنع القسوة.
- **Pure White** (`#ffffff`): خلفية الصفحة وأسطح البطاقات ونص الأزرار على الخلفيات الداكنة.
- **True Black** (`#000000`): استخدام ثانوي، `--geist-console-text-color-default`، يُستخدم في سياقات الطرفية/الكود المحددة.

### ألوان التمييز الخاصة بالعمل
- **Ship Red** (`#ff5b4f`): `--ship-text`، خطوة سير عمل "الشحن للإنتاج" — أحمر مرجاني دافئ وعاجل.
- **Preview Pink** (`#de1d8d`): `--preview-text`، سير عمل نشر المعاينة — وردي ماجنتا زاهٍ.
- **Develop Blue** (`#0a72ef`): `--develop-text`، سير عمل التطوير — أزرق مضيء ومركّز.

### ألوان الطرفية/الكود
- **Console Blue** (`#0070f3`): `--geist-console-text-color-blue`، الأزرق في تمييز الصياغة.
- **Console Purple** (`#7928ca`): `--geist-console-text-color-purple`، البنفسجي في تمييز الصياغة.
- **Console Pink** (`#eb367f`): `--geist-console-text-color-pink`، الوردي في تمييز الصياغة.

### التفاعلية
- **Link Blue** (`#0072f5`): لون الرابط الأساسي مع خط التسطير.
- **Focus Blue** (`hsla(212, 100%, 48%, 1)`): `--ds-focus-color`، حلقة التركيز على العناصر التفاعلية.
- **Ring Blue** (`rgba(147, 197, 253, 0.5)`): `--tw-ring-color`، أداة الحلقة في Tailwind.

### مقياس المحايد
- **Gray 900** (`#171717`): النص الأساسي والعناوين ونص شريط التنقل.
- **Gray 600** (`#4d4d4d`): النص الثانوي ونصوص الوصف.
- **Gray 500** (`#666666`): النص الثالثي والروابط الخافتة.
- **Gray 400** (`#808080`): نص العناصر النائبة والحالات المعطلة.
- **Gray 100** (`#ebebeb`): الحدود وخطوط البطاقات والفواصل.
- **Gray 50** (`#fafafa`): تلوين سطحي خفيف وتمييز الظل الداخلي.

### السطح والطبقة العلوية
- **Overlay Backdrop** (`hsla(0, 0%, 98%, 1)`): `--ds-overlay-backdrop-color`، خلفية النوافذ المنبثقة.
- **Selection Text** (`hsla(0, 0%, 95%, 1)`): `--geist-selection-text-color`، تمييز اختيار النص.
- **Badge Blue Bg** (`#ebf5ff`): خلفية الشارة الحبة البيضاء، سطح أزرق ملوّن.
- **Badge Blue Text** (`#0068d6`): نص الشارة الحبة البيضاء، أزرق داكن لسهولة القراءة.

### الظلال والعمق
- **Border Shadow** (`rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`): التوقيع المميز — يحل محل الحدود التقليدية.
- **Subtle Elevation** (`rgba(0, 0, 0, 0.04) 0px 2px 2px`): رفع بسيط جداً للبطاقات.
- **Card Stack** (`rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px, #fafafa 0px 0px 0px 1px`): ظل البطاقة الكامل متعدد الطبقات.
- **Ring Border** (`rgb(235, 235, 235) 0px 0px 0px 1px`): حلقة رمادية فاتحة للتبويبات والصور.

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

### عائلة الخط
- **الأساسي**: `Geist`، مع بدائل: `Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol`
- **أحادي الفضاء**: `Geist Mono`، مع بدائل: `ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New`
- **ميزات OpenType**: `"liga"` مُفعَّل عالمياً على كل نصوص Geist؛ `"tnum"` للأرقام الجدولية على تعليقات محددة.

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

| الدور | الخط | الحجم | الوزن | ارتفاع السطر | التتبع | ملاحظات |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Geist | 48px (3.00rem) | 600 | 1.00–1.17 (ضيق) | -2.4px إلى -2.88px | أقصى ضغط، تأثير لافت |
| Section Heading | Geist | 40px (2.50rem) | 600 | 1.20 (ضيق) | -2.4px | عناوين أقسام المزايا |
| Sub-heading Large | Geist | 32px (2.00rem) | 600 | 1.25 (ضيق) | -1.28px | عناوين البطاقات والأقسام الفرعية |
| Sub-heading | Geist | 32px (2.00rem) | 400 | 1.50 | -1.28px | عناوين فرعية أخف |
| Card Title | Geist | 24px (1.50rem) | 600 | 1.33 | -0.96px | بطاقات المزايا |
| Card Title Light | Geist | 24px (1.50rem) | 500 | 1.33 | -0.96px | عناوين بطاقات ثانوية |
| Body Large | Geist | 20px (1.25rem) | 400 | 1.80 (مرتخٍ) | normal | المقدمات ووصف المزايا |
| Body | Geist | 18px (1.13rem) | 400 | 1.56 | normal | نص القراءة المعياري |
| Body Small | Geist | 16px (1.00rem) | 400 | 1.50 | normal | نص واجهة المستخدم المعياري |
| Body Medium | Geist | 16px (1.00rem) | 500 | 1.50 | normal | التنقل والنص المميز |
| Body Semibold | Geist | 16px (1.00rem) | 600 | 1.50 | -0.32px | التسميات القوية والحالات النشطة |
| Button / Link | Geist | 14px (0.88rem) | 500 | 1.43 | normal | الأزرار والروابط والتعليقات |
| Button Small | Geist | 14px (0.88rem) | 400 | 1.00 (ضيق) | normal | أزرار مدمجة |
| Caption | Geist | 12px (0.75rem) | 400–500 | 1.33 | normal | البيانات الوصفية والعلامات |
| Mono Body | Geist Mono | 16px (1.00rem) | 400 | 1.50 | normal | كتل الكود |
| Mono Caption | Geist Mono | 13px (0.81rem) | 500 | 1.54 | normal | تسميات الكود |
| Mono Small | Geist Mono | 12px (0.75rem) | 500 | 1.00 (ضيق) | normal | `text-transform: uppercase`، التسميات التقنية |
| Micro Badge | Geist | 7px (0.44rem) | 700 | 1.00 (ضيق) | normal | `text-transform: uppercase`، الشارات الصغيرة جداً |

### المبادئ
- **الضغط كهوية**: يستخدم Geist Sans عند الأحجام الكبيرة تتبعاً سلبياً من -2.4px إلى -2.88px — الأكثر حدةً بين جميع أنظمة التصميم الكبرى. يجعل هذا النص يبدو _مُجمَّعاً_، كأنه كود مُحسَّن للإنتاج. يتراخى التتبع تدريجياً مع تقلص الحجم: -1.28px عند 32px، -0.96px عند 24px، -0.32px عند 16px، وعادي عند 14px.
- **الربط الطباعي في كل مكان**: كل عنصر نصي من Geist يُفعِّل `"liga"` في OpenType. الربط الطباعي ليس زخرفياً — بل بنيوي، يُنشئ مجموعات حروف أكثر تماسكاً وكفاءة.
- **ثلاثة أوزان بأدوار صارمة**: 400 (الجسم/القراءة)، 500 (واجهة المستخدم/التفاعلية)، 600 (العناوين/التأكيد). لا غامق (700) إلا للشارات الصغيرة جداً. هذا النطاق الضيق من الأوزان يُنشئ التسلسل الهرمي عبر الحجم والتتبع لا الوزن.
- **Mono للهوية**: Geist Mono بالحروف الكبيرة مع `"tnum"` أو `"liga"` يؤدي دور "الطرفية" — تسميات تقنية مدمجة تربط موقع التسويق بالمنتج.

## 4. تصميم المكونات

### الأزرار

**Primary White (بحد ظل)**
- الخلفية: `#ffffff`
- النص: `#171717`
- الحشو: 0px 6px (الحد الأدنى — عرض مدفوع بالمحتوى)
- نصف القطر: 6px (استدارة خفيفة)
- الظل: `rgb(235, 235, 235) 0px 0px 0px 1px` (حلقة الحد)
- التحويم: تنتقل الخلفية إلى `var(--ds-gray-1000)` (داكن)
- التركيز: خط `2px solid var(--ds-focus-color)` + ظل `var(--ds-focus-ring)`
- الاستخدام: الزر الثانوي المعياري

**Primary Dark (مستنتج من نظام Geist)**
- الخلفية: `#171717`
- النص: `#ffffff`
- الحشو: 8px 16px
- نصف القطر: 6px
- الاستخدام: الدعوة إلى الإجراء الرئيسية ("Start Deploying"، "Get Started")

**Pill Button / Badge**
- الخلفية: `#ebf5ff` (أزرق ملوَّن)
- النص: `#0068d6`
- الحشو: 0px 10px
- نصف القطر: 9999px (حبة بيضاء كاملة)
- الخط: 12px وزن 500
- الاستخدام: شارات الحالة والعلامات وتسميات المزايا

**Large Pill (التنقل)**
- الخلفية: شفافة أو `#171717`
- نصف القطر: 64px–100px
- الاستخدام: تنقل التبويبات ومحددات الأقسام

### البطاقات والحاويات
- الخلفية: `#ffffff`
- الحد: عبر الظل — `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`
- نصف القطر: 8px (معياري)، 12px (بطاقات مميزة/صورية)
- طبقة الظل: `rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px`
- بطاقات الصور: `1px solid #ebebeb` مع نصف قطر علوي 12px
- التحويم: تكثيف خفيف للظل

### المدخلات والنماذج
- الراديو: تنسيق معياري مع خلفية `var(--ds-gray-200)` عند التركيز
- ظل التركيز: `1px 0 0 0 var(--ds-gray-alpha-600)`
- خط التركيز: `2px solid var(--ds-focus-color)` — حلقة تركيز زرقاء متسقة
- الحد: عبر تقنية الظل لا الحد التقليدي

### التنقل
- تنقل أفقي نظيف على خلفية بيضاء، ثابت
- شعار Vercel النصي محاذٍ لليسار، 262x52px
- الروابط: Geist 14px وزن 500، نص `#171717`
- النشط: وزن 600 أو خط تسطير
- الدعوة إلى الإجراء: أزرار حبة بيضاء داكنة ("Start Deploying"، "Contact Sales")
- الجوّال: انهيار إلى قائمة همبرغر
- قوائم منسدلة للمنتج متعددة المستويات

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

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

**Workflow Pipeline**
- خط أنابيب أفقي ثلاثي الخطوات: Develop → Preview → Ship
- لكل خطوة لون تمييز خاص: أزرق → وردي → أحمر
- متصل بخطوط/أسهم
- الاستعارة البصرية لعرض القيمة الجوهرية لـ Vercel

**Trust Bar / Logo Grid**
- شعارات الشركات (Perplexity، ChatGPT، Cursor، إلخ) بتدرج الرمادي
- تخطيط تمرير أفقي أو شبكي
- فصل حدود خفيفة `#ebebeb`

**Metric Cards**
- عرض أرقام كبيرة (مثل "10x faster")
- Geist 48px وزن 600 للمقياس
- وصف أسفله بنص الجسم الرمادي
- حاوية بطاقة ذات حد ظلي

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

### نظام التباعد
- الوحدة الأساسية: 8px
- المقياس: 1px، 2px، 3px، 4px، 5px، 6px، 8px، 10px، 12px، 14px، 16px، 32px، 36px، 40px
- ملاحظة بارزة: قفزة من 16px إلى 32px — لا 20px أو 24px في المقياس الأساسي

### الشبكة والحاوية
- أقصى عرض للمحتوى: نحو 1200px
- البطل: عمود واحد مركزي مع حشو علوي سخي
- أقسام المزايا: شبكات 2–3 أعمدة للبطاقات
- فواصل بعرض كامل باستخدام `border-bottom: 1px solid #171717`
- لقطات شاشة الكود/لوحة التحكم بعرض كامل أو محاطة بحد

### فلسفة المساحة البيضاء
- **فراغ المعرض**: حشو رأسي ضخم بين الأقسام (80px–120px+). المساحة البيضاء هي التصميم في حد ذاتها — تُوحي بأن Vercel لا تحتاج إلى إثبات شيء ولا تُخفي شيئاً.
- **نص مضغوط، مساحة مُتَّسعة**: يُوازَن التتبع السلبي الحاد على العناوين بمساحة بيضاء سخية محيطة. النص كثيف؛ الفضاء حوله شاسع.
- **إيقاع الأقسام**: الأقسام البيضاء تتعاقب مع أقسام بيضاء — لا تنوع لوني بين الأقسام. يأتي الفصل من الحدود (الحدود الظلية) والتباعد وحدهما.

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

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

| المستوى | المعالجة | الاستخدام |
|-------|-----------|-----|
| مسطح (المستوى 0) | لا ظل | خلفية الصفحة وكتل النص |
| حلقة (المستوى 1) | `rgba(0,0,0,0.08) 0px 0px 0px 1px` | ظل كحد لمعظم العناصر |
| حلقة خفيفة (المستوى 1b) | `rgb(235,235,235) 0px 0px 0px 1px` | حلقة أفتح للتبويبات والصور |
| بطاقة خفيفة (المستوى 2) | حلقة + `rgba(0,0,0,0.04) 0px 2px 2px` | بطاقات معيارية برفع بسيط |
| بطاقة كاملة (المستوى 3) | حلقة + خفيفة + `rgba(0,0,0,0.04) 0px 8px 8px -8px` + حلقة داخلية `#fafafa` | بطاقات مميزة ولوحات مُسلَّطة |
| التركيز (إمكانية الوصول) | خط `2px solid hsla(212, 100%, 48%, 1)` | تركيز لوحة المفاتيح على جميع العناصر التفاعلية |

**فلسفة الظل**: يمتلك Vercel دون شك أكثر أنظمة الظلال تطوراً في تصميم الويب الحديث. بدلاً من استخدام الظلال للارتفاع بالمعنى التقليدي كما في Material Design، يستخدم Vercel طبقات ظلال متعددة القيمة حيث تؤدي كل طبقة غرضاً معمارياً مميزاً: إحداها تُنشئ "الحد" (انتشار 0px، 1px)، وأخرى تُضيف ليونة محيطية (تشتيت 2px)، وثالثة تتعامل مع العمق عند البُعد (تشتيت 8px بانتشار سلبي)، وحلقة داخلية (`#fafafa`) تُنشئ الإضاءة الخفية التي تجعل البطاقة "تتوهج" من الداخل. يجعل هذا النهج المتعدد الطبقات البطاقات تبدو مبنيةً، لا عائمة.

### العمق الزخرفي
- تدرج البطل: غسيل تدرجي ناعم متعدد الألوان الباستيل خلف محتوى البطل (بالكاد مرئي، جوّي)
- حدود الأقسام: `1px solid #171717` (خط داكن كامل) بين الأقسام الرئيسية
- لا تنوع في لون الخلفية — العمق يأتي كلياً من طبقات الظل وتباين الحدود

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

### يجب
- استخدام Geist Sans مع تتبع سلبي حاد عند الأحجام الكبيرة (-2.4px إلى -2.88px عند 48px)
- استخدام الظل كحد (`0px 0px 0px 1px rgba(0,0,0,0.08)`) بدلاً من حدود CSS التقليدية
- تفعيل `"liga"` على كل نصوص Geist — الربط الطباعي بنيوي لا اختياري
- استخدام نظام الأوزان الثلاثي: 400 (الجسم)، 500 (واجهة المستخدم)، 600 (العناوين)
- تطبيق ألوان تمييز سير العمل (أحمر/وردي/أزرق) في سياق سير العمل فقط
- استخدام طبقات ظلال متعددة للبطاقات (حد + ارتفاع + محيطي + إضاءة داخلية)
- إبقاء لوحة الألوان أحادية اللون — تدرجات الرمادي من `#171717` إلى `#ffffff` هي النظام
- استخدام `#171717` بدلاً من `#000000` للنص الأساسي — الدفء الدقيق مهم

### لا يجب
- لا تستخدم تتبعاً موجباً على Geist Sans — دائماً سلبي أو صفر
- لا تستخدم الوزن 700 (غامق) على نص الجسم — 600 هو الحد الأقصى، للعناوين فقط
- لا تستخدم `border` CSS التقليدي على البطاقات — استخدم تقنية الظل كحد
- لا تُدخل ألواناً دافئة (برتقالية، صفراء، خضراء) في مظهر واجهة المستخدم
- لا تطبق ألوان تمييز سير العمل (Ship Red، Preview Pink، Develop Blue) زخرفياً
- لا تستخدم ظلالاً ثقيلة (شفافية > 0.1) — نظام الظلال على مستوى الهمس
- لا تزد تتبع حروف نص الجسم — Geist مصمم للتشغيل بضيق
- لا تستخدم نصف قطر الحبة البيضاء (9999px) على أزرار الإجراء الرئيسية — الحبة البيضاء للشارات/العلامات فقط
- لا تُغفل حلقة `#fafafa` الداخلية في ظلال البطاقات — هي التوهج الذي يجعل النظام يعمل

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

### نقاط التوقف
| الاسم | العرض | التغييرات الرئيسية |
|------|-------|-------------|
| Mobile Small | <400px | عمود واحد ضيق، حشو بسيط |
| Mobile | 400–600px | جوّال معياري، تخطيط متراكم |
| Tablet Small | 600–768px | تبدأ الشبكات ذات العمودين |
| Tablet | 768–1024px | شبكات بطاقات كاملة، حشو موسَّع |
| Desktop Small | 1024–1200px | تخطيط سطح مكتب معياري |
| Desktop | 1200–1400px | التخطيط الكامل، أقصى عرض محتوى |
| Large Desktop | >1400px | مركزي، هوامش سخية |

### أهداف اللمس
- تستخدم الأزرار حشواً مريحاً (8px–16px رأسي)
- روابط التنقل بـ 14px مع تباعد كافٍ
- الشارات الحبة البيضاء بها 10px حشو أفقي لأهداف النقر
- يستخدم زر تبديل القائمة الجوّالة نصف قطراً دائرياً 50%

### استراتيجية الانهيار
- البطل: العرض 48px → يتقلص مع الحفاظ على التتبع السلبي بالنسبة
- التنقل: روابط أفقية + دعوات للإجراء → قائمة همبرغر
- بطاقات المزايا: 3 أعمدة → 2 أعمدة → عمود واحد متراكم
- لقطات شاشة الكود: تحافظ على نسبة العرض إلى الارتفاع، قد تتمرر أفقياً
- شعارات شريط الثقة: شبكة → تمرير أفقي
- التذييل: متعدد الأعمدة → عمود واحد متراكم
- تباعد الأقسام: 80px+ → 48px على الجوّال

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

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

### مرجع سريع للألوان
- دعوة الإجراء الرئيسية: Vercel Black (`#171717`)
- الخلفية: Pure White (`#ffffff`)
- نص العناوين: Vercel Black (`#171717`)
- نص الجسم: Gray 600 (`#4d4d4d`)
- الحد (ظل): `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`
- الرابط: Link Blue (`#0072f5`)
- حلقة التركيز: Focus Blue (`hsla(212, 100%, 48%, 1)`)

### نماذج موجّهات المكونات
- "أنشئ قسم بطل على خلفية بيضاء. العنوان بـ 48px Geist وزن 600، ارتفاع سطر 1.00، تتبع حروف -2.4px، لون #171717. العنوان الفرعي بـ 20px Geist وزن 400، ارتفاع سطر 1.80، لون #4d4d4d. زر دعوة إجراء داكن (#171717، نصف قطر 6px، حشو 8px 16px) وزر شبحي (أبيض، حد ظلي rgba(0,0,0,0.08) 0px 0px 0px 1px، نصف قطر 6px)."
- "صمّم بطاقة: خلفية بيضاء، لا حد CSS. استخدم طبقة الظل: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px. نصف قطر 8px. العنوان بـ 24px Geist وزن 600، تتبع -0.96px. الجسم بـ 16px وزن 400، #4d4d4d."
- "ابنِ شارة حبة بيضاء: خلفية #ebf5ff، نص #0068d6، نصف قطر 9999px، حشو 0px 10px، 12px Geist وزن 500."
- "أنشئ تنقلاً: رأس ثابت أبيض. Geist 14px وزن 500 للروابط، نص #171717. دعوة إجراء حبة بيضاء داكنة 'Start Deploying' محاذية لليمين. حد ظلي في الأسفل: rgba(0,0,0,0.08) 0px 0px 0px 1px."
- "صمّم قسم سير عمل يُظهر ثلاث خطوات: Develop (لون النص #0a72ef)، Preview (#de1d8d)، Ship (#ff5b4f). كل خطوة: تسمية Geist Mono 14px كبيرة + عنوان Geist 24px وزن 600 + وصف 16px وزن 400 بلون #4d4d4d."

### دليل التكرار
1. استخدم دائماً الظل كحد بدلاً من CSS border — `0px 0px 0px 1px rgba(0,0,0,0.08)` هو الأساس
2. التتبع يتناسب مع حجم الخط: -2.4px عند 48px، -1.28px عند 32px، -0.96px عند 24px، عادي عند 14px
3. ثلاثة أوزان فقط: 400 (للقراءة)، 500 (للتفاعل)، 600 (للإعلان)
4. اللون وظيفي لا زخرفي — ألوان سير العمل (أحمر/وردي/أزرق) تُعلّم مراحل الأنابيب فقط
5. حلقة `#fafafa` الداخلية في ظلال البطاقات هي ما يمنح بطاقات Vercel توهجها الداخلي الخفي
6. Geist Mono بالحروف الكبيرة للتسميات التقنية، Geist Sans لكل شيء آخر