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

> Category: التصميم والإبداع
> منشئ مواقع مرئي. جمالية موقع تسويقي مصقول بنبرة زرقاء.

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

موقع Webflow منصة غنية بصرياً وموجهة للأدوات تُعبّر عن مفهوم "التصميم بلا كود" عبر أسطح بيضاء نظيفة، والأزرق المميز لـ Webflow（`#146ef5`）، وفلتة ألوان ثانوية ثرية（بنفسجي، وردي، أخضر، برتقالي، أصفر، أحمر）. خط WF Visual Sans Variable المخصص يُنشئ نظاماً طباعياً واثقاً ودقيقاً بوزن 600 للعناوين الكبيرة و500 للنص العادي.

**السمات الرئيسية：**
- لوحة بيضاء مع نص شبه أسود（`#080808`）
- أزرق Webflow（`#146ef5`）كلون العلامة التجارية والتفاعل الأساسي
- WF Visual Sans Variable — خط متغير مخصص بوزن 500–600
- فلتة ثانوية ثرية：بنفسجي `#7a3dff`، وردي `#ed52cb`، أخضر `#00d722`، برتقالي `#ff6b00`، أصفر `#ffae13`، أحمر `#ee1d36`
- نصف قطر حد محافظ 4px–8px — حاد، غير مستدير
- طبقات ظل متعددة（5 طبقات ظل متتالية）
- تسميات بأحرف كبيرة：10px–15px، وزن 500–600، تباعد حروف واسع（0.6px–1.5px）
- تأثير حركي translate(6px) عند تمرير المؤشر على الأزرار

## 2. فلتة الألوان والأدوار

### الأساسي
- **شبه أسود**（`#080808`）：النص الأساسي
- **أزرق Webflow**（`#146ef5`）：`--_color---primary--webflow-blue`، الـ CTA الأساسي والروابط
- **أزرق 400**（`#3b89ff`）：`--_color---primary--blue-400`، أزرق تفاعلي أفتح
- **أزرق 300**（`#006acc`）：`--_color---blue-300`، متغيّر أزرق أغمق
- **أزرق تمرير الزر**（`#0055d4`）：`--mkto-embed-color-button-hover`

### نبرات ثانوية
- **بنفسجي**（`#7a3dff`）：`--_color---secondary--purple`
- **وردي**（`#ed52cb`）：`--_color---secondary--pink`
- **أخضر**（`#00d722`）：`--_color---secondary--green`
- **برتقالي**（`#ff6b00`）：`--_color---secondary--orange`
- **أصفر**（`#ffae13`）：`--_color---secondary--yellow`
- **أحمر**（`#ee1d36`）：`--_color---secondary--red`

### المحايد
- **رمادي 800**（`#222222`）：نص ثانوي داكن
- **رمادي 700**（`#363636`）：نص متوسط
- **رمادي 300**（`#ababab`）：نص خافت، نص حيّز
- **رمادي متوسط**（`#5a5a5a`）：نص الرابط
- **رمادي الحد**（`#d8d8d8`）：الحدود، الفواصل
- **حد التمرير**（`#898989`）：الحد عند التمرير

### الظلال
- **تتالٍ بخمس طبقات**：`rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`

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

### الخط：`WF Visual Sans Variable`، الاحتياطي：`Arial`

| الدور | الحجم | الوزن | ارتفاع السطر | تباعد الحروف | ملاحظات |
|------|------|--------|-------------|----------------|-------|
| بطل العرض | 80px | 600 | 1.04 | -0.8px | |
| عنوان القسم | 56px | 600 | 1.04 | normal | |
| العنوان الفرعي | 32px | 500 | 1.30 | normal | |
| عنوان الميزة | 24px | 500–600 | 1.30 | normal | |
| النص | 20px | 400–500 | 1.40–1.50 | normal | |
| النص المعياري | 16px | 400–500 | 1.60 | -0.16px | |
| الزر | 16px | 500 | 1.60 | -0.16px | |
| تسمية بأحرف كبيرة | 15px | 500 | 1.30 | 1.5px | uppercase |
| التعليق | 14px | 400–500 | 1.40–1.60 | normal | |
| شارة بأحرف كبيرة | 12.8px | 550 | 1.20 | normal | uppercase |
| ميكرو بأحرف كبيرة | 10px | 500–600 | 1.30 | 1px | uppercase |
| الكود：Inconsolata（خط أحادي المسافة المرافق）

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

### الأزرار
- شفاف：نص `#080808`، translate(6px) عند التمرير
- دائرة بيضاء：نصف قطر 50%، خلفية بيضاء
- شارة زرقاء：خلفية `#146ef5`، نصف قطر 4px، وزن 550

### البطاقات：`1px solid #d8d8d8`، نصف قطر 4px–8px
### الشارات：خلفية بصبغة زرقاء بشفافية 10%، نصف قطر 4px

## 5. التخطيط
- التباعد：مقياس كسري（1px، 2.4px، 3.2px، 4px، 5.6px، 6px، 7.2px، 8px، 9.6px، 12px، 16px، 24px）
- نصف القطر：2px، 4px، 8px، 50% — محافظ وحاد
- نقاط الكسر：479px، 768px، 992px

## 6. العمق：نظام ظلال متتالية بخمس طبقات

## 7. ما يجب وما لا يجب فعله
- يجب：استخدام WF Visual Sans Variable بوزن 500–600. الأزرق（`#146ef5`）لعناصر CTA. نصف قطر 4px. translate(6px) عند التمرير.
- لا يجب：تدوير العناصر الوظيفية أكثر من 8px. استخدام الألوان الثانوية على عناصر CTA الأساسية.

## 8. التجاوب：479px، 768px، 992px

## 9. دليل موجّه Agent
- النص：شبه أسود（`#080808`）
- CTA：أزرق Webflow（`#146ef5`）
- الخلفية：أبيض（`#ffffff`）
- الحد：`#d8d8d8`
- ثانوي：بنفسجي `#7a3dff`، وردي `#ed52cb`، أخضر `#00d722`