تخطَّ إلى المحتوى
فيودكس نظام التصميم · من فيودكس
طبّقه على منصّتك
نظام تصميم فيودكس · الإصدار 1.0

هوية واحدة لكل واجهات فيودكس.

مرجع ثابت للخط والألوان والمكوّنات، مأخوذ من ثيم رامي المعتمد. ما يثبت في كل منصّة، وما يتغيّر لكلٍّ منها.

طبّقه على منصّتكابدأ من الرموز
سعيد متصل
+20عاماً من الخبرة
+1000عميل وثقوا بنا
منشآتحاضنة أعمال مرخّصة
ترخيص 861
١ · الألوان

أربعة ألوان للهوية، وثيمان للصفحة.

البرتقالي والكحلي والبنفسجيّان ثابتة في كل منصّة وفي الوضعين. الأرضية والورق والنصّ تتبدّل بين «رمل» و«ليل». كل لون رمزٌ مثل --fx-orange، ولا يُكتب لونٌ خامٌ في منصّة.

الهوية الأساسية ثابتة

البرتقالي--fx-orange#FF5700 · الزرّ الأساسي والتمييز والحلقات
الكحلي--fx-navy#0A183D · المسرح ونصّ «رمل»
البنفسجي العميق--fx-purple#3A2666 · التوهّجات
البنفسجي--fx-violet#52388A · «اسأل سعيد»
البرتقالي الفاتح--fx-orange-lite#FF8A4C · طرف التدرّجات

«رمل» و«ليل» تتبدّل بالوضع

«رمل» الفاتح الافتراضي
--fx-bg#F7F2EA
--fx-paper#FFFFFF
--fx-soft#F1EADF
--fx-line#E6DCCB
--fx-ink#0A183D
--fx-text#2E3552
--fx-muted#4A5068
--fx-orange-ink#C24A00
«ليل» الداكن باختيار الزائر
--fx-bg#0B1430
--fx-paper#121D3F
--fx-softأبيض 6٪
--fx-lineأبيض 12٪
--fx-ink#FFFFFF
--fx-text#DCE0EE
--fx-muted#B9BED3
--fx-orange-ink#FFB48A

فوق الكحلي، والألوان الوظيفية ثابتة

--fx-on-dark-2#C9CEE0 · فقرة فوق المسرح
--fx-on-dark-4#9BA2BD · الوسوم
--fx-orange-on-dark#FFB48A · رابط فوق الكحلي
--fx-listen#9B87FF · سعيد يسمع
--fx-live#34D399 · متصل
--fx-wa#25D366 · دائرة واتساب فقط

أيقونات الاقتراحات، وسلّم الدرجات

--fx-ic-1الأول
--fx-ic-2الثاني
--fx-ic-3الثالث
--fx-ic-4الرابع
--fx-ic-5الخامس
--fx-ic-6السادس
--fx-tier-topالدرجة العليا: احتفال
--fx-tier-lowللانخفاض وحده
٢ · الخط

خطّ واحد: RB، بوزنين.

مستضاف ذاتياً من مجلد /fx/fonts/ بوزنين حقيقيين: 400 و700. لا خطوط Google ولا خطّ ثانٍ، لأن سياسة الأمان في منصّاتنا تمنع الخطوط الخارجية، ولأن الوزن الوسيط يُرسم مصطنعاً.

العنوان الأكبر · --fx-fs-display · 44–80 · 700

اسأل، وسعيد ينفّذ.

عنوان القسم · --fx-fs-h2 · 30–50 · 700

سبع خدمات، وسعيد يعرفها كلها

عنوان البطاقة · --fx-fs-h3 · 26 (الجوال 22) · 700

تطبيقك أو منصّتك، من الفكرة إلى الإطلاق

الفقرة الرئيسية · --fx-fs-lead · 18 / 1.8 · 400

من المجموعات الكبرى إلى الشركات الناشئة، نبني ونشغّل منتجات يستخدمها الناس كل يوم.

النصّ · --fx-fs-body · 16 / 1.75 · 400

حاضنة أعمال رقمية سعودية مرخّصة، نعمل مع الشركات شريكاً استراتيجياً للتحوّل الرقمي، ومع المشاريع الناشئة استوديو تأسيس وشريكاً مكمّلاً.

عنوان القسم الصغير · .fx-k · 13 · 700 · بلا إطار ولا نقطة

خدماتنا

الأرقام · .fx-num · أرقام لاتينية متساوية العرض

+1,000 · 105 ريالاً / شهر · 920031419

التمييز

ابنِ متجرك اليوم.

كتلة برتقالية .fx-mark على كلمة أو كلمتين في العنوان الرئيسي وحده، مرة واحدة في الصفحة.
لا

تدرّج برتقالي إلى بنفسجي على نصّ العنوان، أو خطّ «الكشيدة» بنقطة تحت الكلمة، أو كلمة مميّزة في كل قسم.

الأول من الهوية القديمة، والثاني من نسخة الموقع قبل رامي (.k)، وكلاهما متقاعد.
٣ · الزوايا والظلال والمسافات والحركة

زوايا واسعة، وظلال بعيدة، وحركة هادئة.

كلما كبر العنصر اتّسعت زاويته: الزرّ 14، والبطاقة 30، والمسرح 36، والقسم الكحلي 40. الظلال كحلية ممتدّة لا سوداء قريبة. والحركة منحنى واحد cubic-bezier(.2,.8,.2,1).

--fx-r-xs10 · بلاطة صغيرة
--fx-r-sm12 · شعار في قائمة
--fx-r-btn14 · الأزرار
--fx-r-md18 · صفّ وشريحة
--fx-r-lg24 · قائمة ومربّع سؤال
--fx-r-card30 · البطاقة
--fx-r-stage36 · المسرح
--fx-r-pill999 · كبسولة
--fx-sh-1حدّ خفيف
--fx-sh-2بطاقة مرفوعة · فقاعة
--fx-sh-3لوحة عائمة
--fx-sh-ctaالزرّ الأساسي
المسافات

سلّم 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64. بين الأقسام 120 (الجوال 80). الحاوية 1200، والرأس 1400. الحافّة 24 (الجوال 16)، والمسرح يبعد عن حافّة الشاشة 16 (الجوال 8).

الحركة

المرور 0.2 ث، والقوائم 0.25 ث، وتبديل الوضع 0.35 ث، والظهور عند التمرير 0.8 ث بارتفاع 26 بكسل. جدار العملاء يدور بين 52 و70 ثانية ويقف عند المرور.

تقليل الحركة

مع prefers-reduced-motion يقف كل شيء: لا تنفّس ولا تلويح ولا دوران ولا ظهور متدرّج، وتظهر حالة سعيد نصّاً في الشارة وحدها.

٤ · الفاتح والداكن

«رمل» للنهار، و«ليل» باختيار الزائر.

الوضع صنف dark على <html>، يحفظه المفتاح fx-theme في المتصفح، وكوكي بالاسم نفسه على .fudex.com.sa فينتقل اختيار الزائر معه بين المنصّات.

01

يُطبَّق قبل الرسم

fx-theme.js أول سكربت في <head> وبلا defer، فلا تومض الصفحة بالفاتح ثم تنقلب.

02

المفتاح في الرأس دائماً

زرّ الشمس والقمر أول الأفعال في الرأس، بزرّين داخل كبسولة، والمختار برتقالي. لا مفتاح ثانٍ في التذييل أو القائمة.

03

الكحلي يبقى كحلياً

المسرح والقسم الكحلي ولوحة التواصل والدليل داكنة في الوضعين، وفي «ليل» تفتح قليلاً وتأخذ حدّاً رفيعاً ليفصلها عن الأرضية.

04

لونا شريط المتصفح

theme-color بقيمتين: #F7F2EA للفاتح و#0B1430 للداكن، وcolor-scheme يتبع الوضع.

٥ · المكوّنات

قطع جاهزة، كل واحدة بقاعدتها.

الرأس والتذييل وسعيد العائم أعلى هذه الصفحة وأسفلها هي المكوّنات نفسها. ما تحت أمثلة حيّة، وتحت كل مثال متى يُستعمل وما لا يُفعل به.

الرأس والقائمة العريضة

.fx-hdr · partials/header.html

الرأس الحيّ أعلى الصفحة. مرّر المؤشّر على «خدمات فيودكس».

  • ثلاثة أعمدة: الشعار يميناً، والقائمة في المنتصف، والأفعال يساراً.
  • تحت الشعار سطر صغير: شعار الموقع الأم، أو «اسم المنصّة · من فيودكس».
  • القائمة الوسطى خمسة روابط على الأكثر، وآخرها قبل «اتصل بنا» قائمة «خدمات فيودكس» العريضة: قائمة بشعارات الأبواب، ولوحة كحلية فيها سعيد وسؤال واحد.
  • ترتيب الأفعال ثابت: الوضع، ثم الزرّ الأساسي، ثم القائمة في الجوال، ثم الحساب آخراً (صورة المستخدم أو أيقونة الدخول). أي عنصر جديد يُدرَج قبل الحساب.
  • شفاف فوق المسرح، وزجاج رملي بعد أول تمرير (.scrolled). تحت 1180 تختفي القائمة والحساب إلى درج الجوال.

هيرو المنصّة

.fx-hero

أعلى هذه الصفحة. المسرح الكحلي نفسه في كل منصّة، والمحتوى لكلٍّ منها.

  • مسرح كحلي بزوايا 36 يبعد 16 عن حافّة الشاشة، بتوهّج بنفسجي في الزاوية العليا وبنفسجي عميق في السفلى، وخلفية الرياض ليلاً اختيارية.
  • العنوان أبيض بحجم العرض، وفيه كلمة أو كلمتان على كتلة برتقالية. يبدأ الهيرو بالعنوان نفسه أو بسطر ترحيب نصّي بلا إطار.
  • الجهة الأخرى صورة المنصّة الحقيقية (لقطة شاشة بإطار زجاجي) أو سعيد بنصف جسده. لا رسم تجميعي ولا أيقونة كبيرة بديلاً عن المنتج.
  • الشريط السفلي بالمنحنى للأرقام المعتمدة الثلاثة والترخيص وحدها، ولا أرقام أخرى.
  • زرّان على الأكثر: الأساسي برتقالي، والثاني شفاف بحدّ أبيض.

مربّع السؤال وشرائح الاقتراحات

.fx-ask · .fx-sugg · .fx-chip
سعيدمتصل الآن
  • المربّع سطر واحد بإطار متدرّج يدور حين يفكّر سعيد (.thinking): من سعيد، ثم الكتابة، ثم الصوت، ثم زرّ الإرسال البرتقالي.
  • الشرائح ستّ على الأكثر، بثلاثة أعمدة، وأيقوناتها بالترتيب الثابت من --fx-ic-1 إلى --fx-ic-6. في الجوال تصير صفّاً يُسحب أفقياً.
  • نصّ الشريحة سؤال يكتبه الزائر بلسانه («كم سعر…؟»، «أريد…»)، لا عنوان تسويقي.
  • السؤال يطلق الحدث fx:ask؛ المنصّة التي فيها سعيد تجيب، والتي بلا سعيد ترسله إلى الموقع الأم.

البطاقات

.fx-bento · .fx-card · .fx-card--feature
المتجرFudex Store

خدماتك السحابية جاهزة للطلب

خوادم ونطاقات وشهادات أمان، بسعر واضح قبل الطلب.

.sa · 250Cloud · 105/mo
خوادم من 105 ريالاً / شهر
افحص مشروعكFudex Check

درجة موقعك وخطة تطويره في دقيقتين

الأمان والأداء والظهور في تقرير واحد.

92786134
الفحص الأولي مجاناً
  • ورق أبيض بزوايا 30 وحدّ رملي، ويرتفع 4 بكسل عند المرور. الشبكة ستّة أعمدة، والبطاقة تأخذ 3 (أو .w2 و.w4 و.w6).
  • رأس البطاقة شعار المنصّة على بلاطة بيضاء، واسمها، وتحته اسمها اللاتيني صغيراً.
  • بطاقة كحلية مميّزة واحدة في القسم على الأكثر، تمتدّ صفّين.
  • الذيل: رابط الدخول بالبرتقالي، والسعر، وكبسولة «اسأل سعيد» البنفسجية بوجهه.
  • حلقة الدرجة بسلّم الاحتفال: العليا بتدرّج احتفالي، ثم الأخضر فالذهبي فالبرتقالي، والأحمر للانخفاض وحده. لا برتقالي العلامة حول درجة.

شريط العملاء

.fx-clients · .fx-wall · .fx-voices
عملاؤنا
+1,000

عميل وثقوا بفيودكس

من المجموعات الكبرى إلى الشركات الناشئة، نبني ونشغّل منتجات يستخدمها الناس كل يوم.

التقنيةالتجارةالصحةالتعليمريادة الأعمال
بنونتم بناء خارطة طريق لمشروعي وخطة عمل واضحة.
بنونتطبيق لتتبّع النقل المدرسي
جولد ستيشنبناء رؤية واضحة وخطة عمل دقيقة لمشروعنا.
جولد ستيشنمنصة تربط متاجر الذهب بالعملاء
صح بلسخطة عمل واضحة ومتكاملة، التزم بها الفريق بدقة.
صح بلسمنصة لحفظ فائض الطعام وتوصيله
  • الرقم الكبير +1000 بتدرّج من لون العنوان إلى البرتقالي، وهو الرقم المعتمد وحده («أكثر من 1000 عميل وثقوا بنا»).
  • الجدار ثلاثة صفوف مائلة درجتين، تدور باتجاهين وتقف عند المرور. الشعارات رمادية على بلاطات بيضاء في الوضعين، وتعود لألوانها عند المرور.
  • أصوات العملاء ثلاثة: شعار العميل، واقتباسه بين «»، واسمه ونشاطه. الاقتباس من كلامه المحفوظ، لا يُصاغ له.

لوحة التواصل

.fx-contact · .fx-cpanel · .fx-pill

جاهز نبدأ مشروعك؟

اكتب فكرتك لسعيد، أو كلّمنا مباشرة.

الرقم الموحّد920031419 مع مختصاحجز موعداً
  • اللوحة الأخيرة قبل التذييل في كل صفحة تعريفية، كحلية بتوهّج برتقالي من الزاوية وبنفسجي من الأخرى، وسعيد في الجهة المقابلة.
  • ثلاث كبسولات بيضاء بالترتيب: واتساب (دائرة خضراء)، والرقم الموحّد (برتقالية)، والحجز (بنفسجية). الأرقام من المرجع لا تُكتب يدوياً.
  • العنوان سؤال بالمفرد يدعو للبدء، والفقرة سطر واحد.

الزرّ العائم واللوحة الجانبية

.fx-dock · .fx-drawer · partials/dock-link.html · dock-drawer.html

الزرّ «اسأل سعيد» أسفل الشاشة. اضغطه لتفتح اللوحة.

  • كبسولة كحلية (بيضاء في «ليل») في الزاوية السفلى من جهة النهاية، فيها وجه سعيد بحلقة برتقالية ونقطة خضراء، و«اسأل سعيد» وتحتها «يجيبك بسعر أو موعد». في الجوال الوجه وحده.
  • اللوحة من جهة النهاية بزوايا 30، رأسها بنفسجي إلى كحلي وسعيد يطلّ منه، ثم المحادثة، ثم مربّع السؤال.
  • في منصّة بلا محرّك سعيد يبقى الزرّ رابطاً إلى الموقع الأم، ولا تُبنى لوحة تمثّل محادثة.
  • زرّ عائم واحد في الصفحة. لا زرّ واتساب عائم بجانبه.
٦ · سعيد وحالاته

شخصية واحدة، حيّة، في كل مكان.

صورة رامي نفسها طبقاتٍ في SVG واحد: جسد ويد وجفنان وفم بثلاثة أشكال. لا فيديو ولا مكتبة. الحالة واحدة للصفحة على html[data-sa]، وتُرسم على النسخ الظاهرة وحدها.

سعيد متصل

الحالةمتىما يحدث
خاملدائماًيتنفّس ويرمش كل ٣–٦ ثوانٍ، وحركة يد صغيرة نادرة، ويميل قليلاً نحو المؤشّر
يسمعيكتب الزائر أو يتكلّميرفع يده قليلاً، والحلقات بنفسجية، والشارة «سعيد يسمعك»
يفكّربعد الإرسال حتى يصل الرديميل برأسه ببطء، والحلقات متقطّعة، وإطار المربّع يدور
يتكلّموهو يكتب الردفمه يتحرّك بإيقاع الكلام، ويده تشير، والحلقات برتقالية، والزرّ العائم ينبض
يرحّبأول زيارة، أو حين يُلمسيلوّح وفقاعة ترحيب، مرة كل ثانيتين ونصف على الأكثر
  • ثلاث إطلالات: الجسد كاملاً (مسرح الرئيسية)، ونصف الجسد (الهيرو واللوحات والقائمة)، والوجه في دائرة (الزرّ العائم و«اسأل سعيد»).
  • حدود اليد 2° للإشارة و3° للتلويح، لأن ما فوقها يكشف أثر الترميم حول الأصابع. لا تُعدَّل الصورة ولا يُرسم سعيد آخر.
  • سعيد يتكلّم بالمفرد ويخاطب بالمفرد: «اسألني»، «أجيبك»، «ماذا تفكّر أن تبني اليوم؟».
٧ · قواعد النصّ والهوية

سبع قواعد لا تُكسر.

كلها أوامر سابقة من الإدارة العليا، جُمعت هنا لأنها تُكسر أول ما تُكسر في الواجهات التعريفية. أداة tools/fx-lint.py تفحص أغلبها آلياً.

صفر إيموجي

أيقونات أوتلاين من icons.svg وحدها، بخطّ 1.7 ولون currentColor. وشعار المنصّة الحقيقي حيث يوجد.

لا شارة «كِكر»

لا كبسولة ولا نقطة ولا خطّ فوق العنوان. عنوان القسم الصغير .fx-k نصّ عادي، ولا يوضع فوق عنوان الهيرو.

التعريف المعتمد

أي نصّ يعرّف بفيودكس يبدأ من التعريف المعتمد كما هو، ولا تُنشر عبارات داخلية عن طريقة عملنا.

الخطاب بالمفرد

«اضغط»، «اكتب فكرتك»، «احجز موعدك». لا «اضغطوا» ولا «احجزوا».

«الإدارة العليا»

كل رسالة تحيل إلى صاحب صلاحية تقول «راجع الإدارة العليا»، ولا يظهر اسم شخص.

لا حقيقة غير مؤكّدة

رقم أو مكتب أو شراكة موسومة «يُؤكَّد» أو منقولة من الموقع القديم لا تُنشر. الأرقام ثلاثة: +20 عاماً، +1000 عميل، +50 موظفاً. والمكاتب: الدمام والرياض في مقرّات جادة 30.

الحساب آخر الشريط

صورة المستخدم أو أيقونة الدخول آخر عنصر في الرأس دائماً، وأي إضافة تُدرَج قبلها.

التعريف المعتمد

حاضنة أعمال رقمية سعودية مرخّصة، نعمل مع الشركات شريكاً استراتيجياً للتحوّل الرقمي، ومع المشاريع الناشئة استوديو تأسيس وشريكاً مكمّلاً. نعمل اليوم بأحدث أساليب الذكاء الاصطناعي في كل مفاصل أعمالنا، بإشراف خبراء محترفين في تخصّصاتهم، لنسخّر خبرتنا الممتدة لأكثر من 20 سنة في تقديم أفضل تجارب التطوير والأتمتة للمنظومات، وإعادة كتابة قصص النجاح مع المبدعين والطموحين في مجالاتهم.

٨ · حدود التغيير

ما يثبت، وما لكل منصّة، وما يُمنع.

الواجهة التعريفية لكل منصّة تُبنى من هذا المرجع. واجهات الخدمة من الداخل (بعد الدخول) خارج هذا المرجع.

ثابت لا يتغيّر

  • الشعار وملفاته وألوانه، ومكانه في الرأس والتذييل.
  • الخط RB بوزنيه.
  • البرتقالي والكحلي والبنفسجيّان، و«رمل» و«ليل» ومفتاحهما.
  • الرأس: بنيته، وترتيب أفعاله، والحساب آخراً، وقائمة «خدمات فيودكس».
  • التذييل كاملاً عدا صفّ روابط المنصّة، ودليل الروابط فيه.
  • الأيقونات الأوتلاين، والزوايا والظلال والحركة.
  • سعيد: صورته وحالاته والزرّ العائم.
  • قواعد النصّ والهوية السبع.

مسموح لكل منصّة

  • لونها الثانوي في --fx-accent: لعلامتها وتمييز صغير داخل أقسامها، لا للزرّ الأساسي ولا للرأس والتذييل.
  • علامتها: اسمها في السطر الصغير تحت الشعار، وشعارها في بطاقاتها وهيروها.
  • محتوى الهيرو: العنوان والكلمة المميّزة والفقرة والزرّان والصورة.
  • أقسامها: ترتيبها واختيارها من المكوّنات، ومحتواها، وروابط القائمة الوسطى وصفّ التذييل.
  • شرائح الاقتراحات بأسئلة منصّتها.

ممنوع

  • خطّ آخر أو خطوط Google، أو وزن غير 400 و700.
  • لون خامّ بدل رمز، أو تغيير قيمة رمز داخل منصّة.
  • رأس أو تذييل خاصّ بالمنصّة، أو حذف دليل الروابط أو «خدمات فيودكس».
  • إيموجي، أو كِكر فوق عنوان، أو تدرّج على نصّ العنوان.
  • سعيد بصورة أخرى، أو زرّ عائم ثانٍ، أو محادثة ممثَّلة كأنها حقيقية.
  • أرقام غير الثلاثة المعتمدة، أو حقيقة غير مؤكّدة.
  • إعادة بناء واجهة منصّة في موقع آخر: صفحة واحدة لكل منصّة على نطاقها.
٩ · التطبيق على منصّة

انسخ المجلد، ثم ابنِ بالقطع.

المجلد fx/ يُنسخ كما هو إلى المنصّة ويُخدم من /fx/ على نطاقها، فلا يحتاج سياسة الأمان شيئاً جديداً ولا يتعطّل إن تعطّل غيره.

  1. انسخ fx/إلى جذر الويب في المنصّة، بإصداره. لا تعدّل فيه شيئاً.
  2. ضع الرأس
    <script src="/fx/fx-theme.js"></script>
<link rel="stylesheet" href="/fx/fx-tokens.css?v=1.0">
<link rel="stylesheet" href="/fx/fx-ds.css?v=1.0">
<link rel="stylesheet" href="/platform.css">
<script src="/fx/fx-ds.js?v=1.0" defer></script>
  3. ابنِ الصفحةمن templates/landing.html: body.fx-page، ثم الرأس، ثم الهيرو، ثم أقسامك، ثم لوحة التواصل، ثم التذييل، ثم سعيد العائم.
  4. خصّص المسموح وحدهفي ملف المنصّة بعد ملفّي المرجع: --fx-accent، وأقسامك. لا تعيد تعريف رمز ثابت.
  5. افحص
    python3 tools/fx-lint.py page.html
    ثم في المتصفح: 375 والويب، فاتحاً وداكناً.