95 lines
5.5 KiB
Markdown
95 lines
5.5 KiB
Markdown
|
# نظام تصميم مستوحى من 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`
|