نظام لوني موحد — بيئتان سودانيتان تحاكيان دورة حياة الضيافةUnified color system — two Sudanese environments mimicking the hospitality lifecycle

هذا المستند يعرض نظاماً لونياً موحداً يغطي بيئتين أساسيتين: الكسرة (الافتراضية لكامل الموقع) والجلد (لخدمة التموين وذيل الصفحة). يوثق هذا الملف معمارية الألوان، والتوزيع الهرمي، والأسطح ذات النغمات المتدرجة لضمان تجربة بصرية متكاملة وشاملة.This document presents a unified color system covering two core environments: Kisra (the site-wide default) and Leather (for catering and footer). It documents the color architecture, hierarchy, and tonal surfaces for an integrated experience.

بيئة المطعم (الافتراضية)

التموين وذيل الصفحة

Engineering Design Decisions

علم النفس البصري وسلوك الزوار:
لماذا اخترنا هذه اللوحة اللونية؟ Visual Psychology & Guest Behavior:
Why We Engineered This Palette?

نحن لا نختار الألوان بناءً على التفضيلات الشخصية، بل نهندس الأنظمة التي تعزز التجربة وتدعم الولاء. بناءً على الدراسات السيكولوجية وتحليلWe don't choose colors based on personal preference, we engineer systems that enhance experience and support loyalty. Based on psychological studies and analysis of 892 مراجعة لزوارنا892 guest reviews، تم استنتاج الحقائق التالية التي شكلت هويتنا الرقمية:, the following facts were synthesized to shape our digital identity:

تأثير القرار (Impact)Decision Impact

تثبت الدراسات أن 85% من قرارات الشراء مدفوعة باللون وحده. الألوان الدافئة والترابية في علامتنا تعزز الثقة فوراً وتخلق رابطاً عاطفياً مع الضيف قبل تصفح المنيو.Studies prove 85% of purchase decisions are driven by color alone. Warm, earthy tones in our brand foster trust immediately and create an emotional bond with the guest before browsing the menu.

تحفيز الشهية (Appetite)Stimulating Appetite

استخدام "الأحمر الجيرتقي" (#9B2226) ليس مجرد رمز ثقافي، بل هو لون يحفز ضربات القلب والشهية علمياً، مما يجعله المحرك الأساسي لأزرار الطلب الفوري (CTAs).Using "Jirtig Crimson" (#9B2226) isn't just a cultural symbol; it's a color that scientifically stimulates heart rate and appetite, making it the primary driver for immediate order buttons (CTAs).

سيكولوجية الاسترخاء (Comfort)Comfort Psychology

الألوان الترابية والملمس العضوي (SVG Micro-textures) تشجع الضيوف على البقاء لفترة أطول في الموقع، مما يحاكي بيئة المطعم المريحة ويزيد من احتمالية استكشاف العروض الفاخرة.Earthy colors and organic textures (SVG Micro-textures) encourage guests to stay longer on the site, mimicking the comfortable restaurant environment and increasing exploration of premium offers.

Data-Driven Architecture

التصميم الموجه بالبيانات (المنهجية الهندسية المستمدة من آراء زوار المطعم)Data-driven design (engineering methodology derived from restaurant visitor feedback)

هذا النظام اللوني ليس نتاج اختيارات عشوائية أو ذوق شخصي، بل هو حل هندسي مباشر لتحليل البيانات الضخمة (Data Analytics). لقد قمنا بربط تحليل البيانات لـThis color scheme is not the product of random choices or personal taste, but rather a direct engineering solution for big data analysis (Data Analytics). We have linked data analysis to 892 مراجعة موثقة على منصة (Google Reviews)892 verified reviews on the Google Reviews platform لمطعم الفنانين بأسسFor the artists restaurant in Bassas علم نفس الألوان (Color Psychology)Color Psychology لتوجيه سلوك المستخدم وخلق تجربة متخصصة تلبي الاحتياجات المتباينة.To guide user behavior and create a personalized experience that meets differentiated needs.

١١ تحليل المراجعات واستخراج المعطيات (Data Processing)Analyzing reviews and extracting data (Data Processing)

تمت معالجة قاعدة البيانات (478 مراجعة مكتوبة و414 تقييماً بالنجوم) برمجياً عبر (Python) بهدف التقسيم الزمني، وتحليل اللغات (أسفر عن بيئة ثنائية اللغة: 261 إنجليزية و204 عربية)، وتحليل التكرار اللفظي للكلمات (N-Grams).The database (478 written reviews and 414 star ratings) was processed programmatically via (Python) for the purpose of temporal segmentation, language analysis (resulting in a bilingual environment: 261 English and 204 Arabic), and word frequency analysis (N-Grams).

177تكرار كلمة "طعام / Food"

141تكرار كلمة "مكان / Place"

25تكرار كلمة "شيشة / Shisha"

متصدرةشية، أقاشي، لحم، ولعب كوتشينة

٢٢ توزيع البيئتين على احتياجات الجمهور المختلفة (Audience Distribution)Distributing the two environments across varying audience needs (Audience Distribution)

كشف تحليل الكلمات المفتاحية أن جمهور “الفنانين” متنوع الاحتياجات. لذلك، صممنا بيئتين أساسيتين لتلبية متطلبات المستخدمين المختلفة:Keyword analysis revealed that the “artists” audience has diverse needs. Therefore, we designed two core environments to serve different user requirements:

1. الشباب والأصدقاء (The Social Crowd)1. Youth and Friends (The Social Crowd)

تأتي من أجل “الونسة”. ركزت مراجعاتهم على مصطلحات: “تجمع الأصدقاء”، “الشيشة”، “لعب الكوتشينة”، والمباريات. يميلون للبيئة الصاخبة والحيوية — تُخدم بـ بيئة الكسرة الافتراضية.They come for “the gathering”. Their reviews focused on: “friends gathering”, “shisha”, “playing cards”, and matches. They prefer a lively environment — served by the default Kisra environment.

2. العائلات والمناسبات (Families, Foodies & Premium Events)2. Families, Foodies & Premium Events

تبحث عن الأصالة والراحة والفخامة. يريدون الطعام السوداني الأصيل والجلوس المريح والضيافة الراقية. هذه الشريحة تُخدم بـ بيئة الكسرة (للجلسات الهادئة) و بيئة الجلد (للتموين والمناسبات الخاصة).They seek authenticity, comfort, and refinement. They want genuine Sudanese food, comfortable seating, and premium hospitality. This segment is served by Kisra (for quiet sessions) and Leather (for catering and special occasions).

٣٣ النظام اللوني الثنائي المتخصص (Dual Color Psychology)Dual Color Psychology

استخدام “لون واحد للموقع بالكامل” سيفشل في خدمة احتياجات متنوعة. لذلك، قمنا بتصميم بيئتين متخصصتين: الكسرة كافتراضية عامة، والجلد للتموين وذيل الصفحة، لتلبية السيكولوجية المختلفة لكل استخدام:Using “one color for the entire site” fails to meet diverse needs. Therefore, we designed two specialized environments: Kisra as the universal default, and Leather for catering and footer, to address the distinct psychology of each use case:

بيئة المطعم (الكسرة): ألوان ترابية عضويةRestaurant (Kisra): organic earthy colors

ملمس "الكسرة" الإسفنجي يعزز شعور الأصالة السودانية والطهي المنزلي الدافئ، مما يخلق خلفية هادئة للطعام.The spongy 'Kisra' texture reinforces the feel of Sudanese authenticity and warm home cooking.

المناسبات والـ VIP: الجلد والذهب الملكيEvents & VIP: Leather & Royal Gold

ملمس الجلد الطبيعي الفاخر مع لمسات من الذهب العتيق لتعكس أقصى درجات الضيافة الرسمية والولائم الكبيرة.Luxurious leather with accents of gold to reflect formal hospitality and grand banquets.

CTA

الرابط الموحد (The Global Anchor): الأحمر الجيرتقيThe Global Anchor: Red Algeria

لضمان تماسك الموقع كعلامة واحدة، يتم تثبيت أزرار الشراء الفورية (CTAs) باللون الأحمر `To ensure the site cohesive as a single sign, instant purchase buttons (CTAs) are installed in red `#9B2226` على مستوى كل الأقسام لكونه اللون العلمي الأول لتحفيز الشهية واتخاذ القرارات السريعة.At the level of all departments because it is the first scientific color to stimulate appetite and make quick decisions.

الثوابت العالمية (Global Tokens)Global Tokens

عناصر لونية أساسية وثابتة لا تتأثر بتغير الأنظمة أو الأقسام. تُستخدم لتوحيد هوية الإجراءات الرئيسية والطبقات العامة.Basic and fixed color elements that are not affected by changing systems or departments. Used to unify the identity of main procedures and global classes.

Checkout

الأحمر الجيرتقيJirtig Crimson

Jirtig Crimson

#9B2226

الدور الوظيفي: الإجراء الرئيسي (Primary CTA). يُستخدم فقط لجذب الانتباه للطلبات.Job Role: Primary CTA. It is only used to attract attention to requests.

Scenario

مثال: أزرار "أضف للسلة" أو "تثبيت الطلب" في نهاية المنيو.Example: "Add to Cart" or "Confirm Order" buttons at the end of the menu.

✓ Healthy

أخضر النيلNile Green

Nile Green

#2A9D8F

الدور الوظيفي: تأكيد النجاح، الإشعارات الإيجابية، والمؤشرات الصحية.Functional Role: Confirmation of success, positive notifications, and health indicators.

Scenario

مثال: شارات "نباتي"، "صحي"، أو رسائل "تم الدفع بنجاح".Example: "Vegan" or "Healthy" badges, or "Payment Successful" messages.

⚠️ Contains Peanuts

أحمر الشطةChili Red

Chili Red

#D62828

الدور الوظيفي: رسائل الخطأ، التنبيهات الحادة، ودلالات الحساسية.Functional role: Error messages, acute alerts, and sensitivity indications.

Scenario

مثال: تحذيرات الحساسية أو رسائل الفشل في معالجة الطلب.Example: Allergy warnings or messages regarding order processing failure.

⟳ Preparing...

أصفر الكركمTurmeric Yellow

Turmeric Yellow

#F4A261

الدور الوظيفي: التحذيرات الوسيطة، وحالات الانتظار.Functional role: intermediate warnings and wait states.

Scenario

مثال: "جارٍ تحضير الطلب الآن" أو تنبيهات التأخير المؤقت.Example: "Order is being prepared" or temporary delay alerts.

التعتيم الفحميCharcoal Overlay

Charcoal Overlay

rgba(26,20,18,0.6)

الدور الوظيفي: عزل الخلفية عند ظهور النوافذ المنبثقة (Modals) لتركيز الانتباه.Functional role: Isolate the background when pop-ups (Modals) appear to focus attention.

Scenario

مثال: خفت الإضاءة عند تكبير صورة طبق أو فتح قائمة التعديل.Example: Dimming the background when enlarging a dish image or opening an edit menu.

حالات التفاعل المعيارية (Interaction States)Standard interaction states

زر الإجراء الرئيسي (CTA Button)Main action button (CTA Button)

الحالة الافتراضية (Default)Default state

var(--cta-bg) - #9B2226

حالة التمرير (Hover)Hover status

var(--cta-hover) - #7A1A1E

حالة النقر (Active)Click status (Active)

var(--cta-active) - #5C1215

الحالة المعطلة (Disabled)Disabled status

Base Gray Overlay

سلوك الرسائل الدلالية المحيطيةBehavior of peripheral semantic messages

تم إضافة الطلب للسلة بنجاحThe order has been added to the cart successfully

HOVER

عذراً، لم تكتمل عملية الدفع. يرجى المراجعة.Sorry, the payment process was not completed. Please review.

HOVER

المنطقة قد تتأخر عن وقت التوصيل المعتاد قليلاً.The area may be a little later than the usual delivery time.

HOVER

📌

تُستخدم هذه الرسائل في هوامش الواجهة العلوية أو كإشعارات التوائم (Toast) ولا تشغل ألوانها مساحات الأسطح العريضة.These messages are used in the margins of the top interface or as toast notices, and their colors do not occupy large surface areas.

سياق عزل التركيز (The Focus Filter Context)The Focus Filter Context

تعديل الطلب (Edit Request)Edit Request

يعمل التعتيم الفحمي على عزل الضوضاء البصرية للخلفية تماماً، مما يوجه التركيز العصبي للعين نحو النافذة النشطة فقط.Charcoal dimming works to isolate background visual noise completely, directing eye focus strictly to the active window.

Save

Cancel

HOVER TO REVEAL OVERLAY

الألوان الدلالية (Semantic Colors)Semantic Colors

الألوان الدلالية مخصصة للوظائف المعرفية السريعة بعيداً عن الزخرفة. الفصل الدلالي يُعتبر مبدأً جوهرياً في تجربة المستخدم (UX)، حيث لا يجب الخلط بين لون النجاح ولون الهوية الرئيسي، وتُستخدم هذه الألوان بنسب مدروسة في الشارات (Badges) ورسائل النظام المحيطية فقط لضمان عدم تشتيت عين المستخدم.Semantic colors are intended for quick cognitive functions, not decoration. Semantic separation is considered a fundamental principle in user experience (UX), as the success color should not be confused with the main identity color, and these colors are used in thoughtful proportions in badges and peripheral system messages only to ensure that the user’s eye is not distracted.

أخضر النيل (Success)Nile Green (Success)

نجاح العمليات، الشارات الصحية والنباتية (Vegan/Healthy). منفصل بصرياً عن زر الـ CTA لتجنب تضارب التوجيه.Operations Success, Vegan/Healthy Badges. Visually separate from the CTA button to avoid routing conflicts.

أحمر الشطة (Error)Red chili (Error)

للأخطاء الحرجة ومشاكل إتمام الطلب، وأيضاً التنبيه لمسببات الحساسية. يمتاز بسطوع أعلى من الأحمر الجيرتقي (CTA) لتمييزه وتجنب اعتباره زراً رئيسياً.Critical errors and order completion problems, as well as alerts to allergens. It has a higher brightness than the red CTA to distinguish it and avoid it being considered a home button.

Unified Identity System

النظام الموحد — بيئتان، رؤية واحدةUnified System — Two Environments, One Vision

يعتمد النظام الموحد على الهوية البصرية العضوية التي تتنفس من خلال بيئتين أساسيتين. الكسرة هي الافتراضية لكامل الموقع، بينما يُحجز الجلد لخدمة التموين وذيل الصفحة فقط. يضمن هذا التوجه تماسك العلامة التجارية مع الحفاظ على روح "الفنانين" الأصيلة.The unified system relies on an organic visual identity that breathes through two core environments. Kisra is the site-wide default, while Leather is reserved exclusively for catering and the footer, maintaining the authentic "Al-Fananin" spirit.

بيئة المطعم: الكسرة والأصالة — الافتراضية لكامل الموقع (Heritage Warmth)
بيئة التموين وذيل الصفحة: الجلد والذهب (Premium Hospitality)

تشريح بيئات النظام الموحد (Unified System Palette Anatomy)Unified System Palette Anatomy

١. بيئة المطعم (الكسرة)1. Restaurant environment (kasra)

قاعدة محايدة ترابية تدعم الألوان الغنية للأطباق.An earthy neutral base supports the rich colors of the dishes.

أرضية السطح: #EEDCB5

البطاقة المتدرجة: #E3D0A8

لون النص الأساسي: #2D241E

الخلفية (Background السطح 0)Background 0

البطاقة (Surface السطح 1)Card (Surface 1)

حيادية ترابيةTerritorial neutrality

تطبيق لمبدأ السطح المتدرج (Tonal Surface) الذي يبني بُعداً خفياً باستخدام الظلال والدرجات الداكنة الطفيفة فقط.An application of the Tonal Surface principle that builds subtle dimension using only subtle shadows and tones.

النص المساعد (Subtext)

٢. والمناسبات (الجلد العتيق)2. Events (Vintage Leather)

فخامة وتاريخ وجذور متأصلة للفعاليات عالية المستوى.Prestige, history and deep roots of high-level events.

أرضية السطح: #4D2C19

البطاقة المتدرجة: #402414

اللمسة الذهبية: #D4AF37

لون النص: #F2E8CF

الخلفية (Background السطح 0)Background 0

البطاقة (Surface السطح 1)Card (Surface 1)

فخامة الجلد والذهبLuxury Leather & Gold

استخدام الجلد كعامل ربط مع الأثاث والديكور الداخلي للمطعم، مما يخلق تجربة بصرية متكاملة وشعوراً بالاستدامة والفخامة اليدوية.Using leather as a linking factor with the furniture and interior decoration.

اللمسة الملكية (Royal Touch)

مكتبة الملامس العضوية (Universal Texture Library)Universal Texture Library

إيماناً منا بأن التجربة الثقافية لا تأتي فقط بالألوان، بل بالملمس. هذه الخامات هي مرشحات (SVG Filters) وصور عالية الدقة لإضافة وعي بصري خفي (Subconscious Depth) يربط العالم الرقمي بالواقع الحسي للمكان.We believe that the cultural experience comes not only in color, but in texture. sThese materials are SVG Filters and high-resolution images to add subconscious depth.

معاينة الملمس (مُكثّف للعرض)

مسامات الكسرة الواسعة (Soft Kisra Pores)Soft Kisra Pores

الاقتراح المعتمد (٣): مسامات أكبر حجماً بكثافة أقل، تريح العين وتبرز اللون الأساسي بشكل أكبر. تحاكي هذه المسامات نعومة "فرشة" الكسرة على الصاج التقليدي، مما يضفي لمسة عضوية هادئة.Adopted Proposal (3): Larger pores with less density, resting the eye and highlighting the base color further.

Demo Opacity: 15% | Actual UI: 8% | Blend: Multiply

معاينة الملمس (مُكثّف للعرض)

الجلد العتيق وحرفة الصناعة (Natural Saddle Leather)Natural Saddle Leather

مستمد من مظهر الجلد الطبيعي الفاخر، حيث يتميز بمسامات غير منتظمة ونسيج غني يجمع بين النعومة والصلابة العضوية. تم هندسة هذا الملمس ليعطي إحساساً بالموثوقية والفخامة اليدوية.Derived from the appearance of luxurious natural leather, featuring irregular pores and a rich texture.

Demo Opacity: 25% | Actual UI: 4% | Blend: Multiply

قواعد الاستخدام المنهجي (Usage Guidelines)Usage Guidelines

❌
عدم الإفراط في استخدام الأحمـر الجيرتقي (CTA Overlay)Do not overuse CTA Overlay. يُمنع استخدام اللون #9B2226 في الخلفيات الواسعة أو كتل النصوص الكبيرة، مكانه الحقيقي هو أزرار الدعوة للإجراء وتحديد البوصلة الإجرائية فقط.The color #9B2226 is prohibited from being used on large backgrounds or large blocks of text, it only belongs to call-to-action and procedural compass selection buttons.
✅
الالتزام بمبدأ الأسطح المتدرجة (Tonal Hierarchies)Adherence to the principle of tonal hierarchies. البطاقات يجب أن تُشتق من لون عائلة الخلفية بتباين بسيط للأفتح أو للأغمق، وتجنب استخدام بطاقات ناصعة البياض (#FFFFFF) تماماً فوق الخلفيات الترابية لأنها تعطل الانسجام العضوي.Cards should be derived from the color of the background family with a slight variation of lighter or darker, and avoid using very white cards (#FFFFFF) over earthy backgrounds as they disrupt the organic harmony.
✅
حماية الألوان الدلالية وعدم خلط الرموزProtect semantic colors and do not mix symbols لون النجاح الأخضر ولون التحذير يجب أن يظلا في حالات التنبيه فقط (Alerts/Badges). يمنع توظيفهما لأي أزرار أساسية داخل مسار الشراء تجنباً للتشتيت الدلالي.The green success color and warning color should remain for alerts/badges only. It is prohibited to use any basic buttons within the purchase path to avoid semantic distraction.
✅
احترام عتبة الخامات البصرية (Filter Thresholds)Respecting the threshold of optical materials (Filter Thresholds) فلاتر الـ SVG يجب أن تعيش دائماً ضمن نطاق الشفافية (Opacity) من %4 إلى %6 كحد أقصى لتكون محسوسة سيكولوجياً وغير مرئية زخرفياً.SVG filters should always live within the Opacity range of 4% to 6% maximum to be psychologically perceptible and decoratively invisible.
✅
الكسرة هي الافتراضي العام للموقعKisra is the site-wide default #EEDCB5 هو لون خلفية كل صفحة وكل قسم في الموقع بالكامل. لا توجد بيئة افتراضية أخرى.#EEDCB5 is the default background for every page and section across the entire site. No other environment is used as a default.
✅
الجلد محجوز للتموين وذيل الصفحة فقطLeather is reserved for catering and footer only #4D2C19 يُستخدم حصراً في صفحة التموين وذيل الصفحة. يُمنع توظيفه في أي صفحة أو قسم آخر.#4D2C19 is used exclusively on the catering page and in the footer. It must not appear on any other page or section.

المصادر والدراسات المرجعية Sources & Reference Studies

الأحمر والشهية: كيف يغير اللون تجربة الطعام

سيكولوجية الألوان في براندينج المطاعم

نظام لوني موحد — بيئتان سودانيتان تحاكيان دورة حياة الضيافةUnified color system — two Sudanese environments mimicking the hospitality lifecycle

علم النفس البصري وسلوك الزوار: لماذا اخترنا هذه اللوحة اللونية؟ Visual Psychology & Guest Behavior: Why We Engineered This Palette?

تأثير القرار (Impact)Decision Impact

تحفيز الشهية (Appetite)Stimulating Appetite

سيكولوجية الاسترخاء (Comfort)Comfort Psychology

التصميم الموجه بالبيانات (المنهجية الهندسية المستمدة من آراء زوار المطعم)Data-driven design (engineering methodology derived from restaurant visitor feedback)

١١ تحليل المراجعات واستخراج المعطيات (Data Processing)Analyzing reviews and extracting data (Data Processing)

٢٢ توزيع البيئتين على احتياجات الجمهور المختلفة (Audience Distribution)Distributing the two environments across varying audience needs (Audience Distribution)

1. الشباب والأصدقاء (The Social Crowd)1. Youth and Friends (The Social Crowd)

2. العائلات والمناسبات (Families, Foodies & Premium Events)2. Families, Foodies & Premium Events

٣٣ النظام اللوني الثنائي المتخصص (Dual Color Psychology)Dual Color Psychology

حالات التفاعل المعيارية (Interaction States)Standard interaction states

زر الإجراء الرئيسي (CTA Button)Main action button (CTA Button)

سلوك الرسائل الدلالية المحيطيةBehavior of peripheral semantic messages

سياق عزل التركيز (The Focus Filter Context)The Focus Filter Context

تعديل الطلب (Edit Request)Edit Request

أخضر النيل (Success)Nile Green (Success)

أحمر الشطة (Error)Red chili (Error)

النظام الموحد — بيئتان، رؤية واحدةUnified System — Two Environments, One Vision

تشريح بيئات النظام الموحد (Unified System Palette Anatomy)Unified System Palette Anatomy

١. بيئة المطعم (الكسرة)1. Restaurant environment (kasra)

حيادية ترابيةTerritorial neutrality

٢. والمناسبات (الجلد العتيق)2. Events (Vintage Leather)

فخامة الجلد والذهبLuxury Leather & Gold

مكتبة الملامس العضوية (Universal Texture Library)Universal Texture Library

مسامات الكسرة الواسعة (Soft Kisra Pores)Soft Kisra Pores

الجلد العتيق وحرفة الصناعة (Natural Saddle Leather)Natural Saddle Leather

قواعد الاستخدام المنهجي (Usage Guidelines)Usage Guidelines

المصادر والدراسات المرجعية Sources & Reference Studies

علم النفس البصري وسلوك الزوار:
لماذا اخترنا هذه اللوحة اللونية؟ Visual Psychology & Guest Behavior:
Why We Engineered This Palette?