Architecture Document v1.0

هندسة الواجهة: الفراغات والشبكاتInterface geometry: Spaces and Grids

الواجهة الرقمية لا تُبنى من الألوان والخطوط فقط، بل تعتمد على نظامين خفيين يحكمان وضوحها وتنظيمها. يوثق هذا الملف معمارية الفراغات والشبكات (النظام الهيكلي)، لضمان تماسك التصميم بعيداً عن العشوائية البصرية.The digital interface is not built of colors and lines alone, but rather relies on two hidden systems that govern its clarity and organization. This file documents the architecture of spaces and networks (structural system), to ensure design cohesion away from visual randomness.

Structural Engineering Foundations

الرياضيات الخفية للثقة:
كيف تحكم الشبكة سلوك ضيوفنا؟ The Hidden Math of Trust:
How the Grid Governs Guest Behavior?

بناءً على الدراسات التي تشير إلى أنBased on studies indicating that 72% من عمليات البحث عن المطاعم تتم عبر الجوال72% of restaurant searches happen on mobile، قمنا بهندسة نظام "الفنانين" ليخاطب حواس المستخدم ويقلل الجهد المعرفي:, we engineered the Al-Fananin system to address user senses and reduce cognitive load:

قاعدة الـ 8 بكسل (8pt Grid)8pt Grid Rule

استخدام نظام رياضي (مضاعفات الرقم 8) يخلق إيقاعاً بصرياً يثق فيه العقل الباطن بشكل غريزي. هذا التماسك يرفع من "درجة الاحترافية المدركة" ويزيد من ولاء الزائر للعلامة التجارية.Using a mathematical system (multiples of 8) creates a visual rhythm that the subconscious trust instinctively. This cohesion raises the "perceived professionalism" and increases brand loyalty.

منطق الـ RTL (Native Experience)RTL Logics

محاذاة العناصر من اليمين إلى اليسار لا تعكس النص فقط، بل تعكس توقعات المستخدم الثقافية، مما يحسن من معدلات البقاء داخل الموقع (Retention Rates) عبر تجربة تبدو "طبيعية" للزائر العربي.Aligning elements from right to left doesn't just mirror text, it mirrors cultural expectations, improving retention rates via a "natural" experience for the Arabic visitor.

الفصل الأول: نظام الفراغات والشبكات (Spacing & Grids)

SECTION 1.0

نظام الفراغات والشبكاتSystem of spaces and networks

الفراغ ليس مساحة فارغة، بل هو المادة الهيكلية التي تنظم تدفق المعلومات وتخلق التسلسل الهرمي. بدون نظام رياضي صارم للفراغات، تبدو الواجهات فوضوية مهما بلغت جودة الألوان والطباعة. الفراغ هو ما يمنح عين المستخدم القدرة على التنفس وفهم العلاقات بين العناصر.Space is not empty space, but rather the structural material that organizes the flow of information and creates hierarchy. Without a strict mathematical system of spaces, interfaces appear chaotic, no matter how good the colors and typography are. Space is what gives the user's eye the ability to breathe and understand the relationships between elements.

SECTION 2.0

نظام الـ 8 بكسل (The 8px Grid System)The 8px Grid System

تعتمد مسافات النظام بالكامل على مضاعفات الرقم 8. هذا يضمن تناسقاً رياضياً، محاذاة دقيقة للبكسل (Pixel-perfect)، ويسهل التخاطب بين المصممين والمطورين.The entire system's spacing is based on multiples of 8. This ensures mathematical consistency, pixel-perfect alignment, and facilitates communication between designers and developers.

space-1 (8px)

عناصر دقيقة ومترابطة بشدةSubtle and closely interconnected elements

space-2 (16px)

النطاق التباعدي الافتراضي للبطاقاتThe default spacing range for cards

space-3 (24px)

الفواصل بين مكونات من نفس السياقSeparators between components of the same context

space-4 (32px)

الفواصل الرئيسية داخل القسم الواحدMain breaks within a single section

space-6 (48px)

المسافات الفاصلة بين الأقسامSpacing between sections

space-8 (64px)

فراغات عملاقة للتنفس البصريGiant voids for visual breathing

SECTION 3.0

نصف الخطوة: مسافة الـ 4 بكسل (The 4px Half Step)Half Step: The 4px Half Step

الـ 4 بكسل ليست وحدة بناء أساسية، بـل هيThe 4 pixels are not a basic building block, they are أداة جراحية (Precision Tool)Precision Tool تُستخدم فقط لإجراء التعديلات الدقيقة جداً (Micro-adjustments)، مثل المسافة بين الأيقونة والنص المجاور لها، أو لضبط ارتفاع السطور (Line-height) ومحاذاة الشارات الصغيرة.It is only used to make very fine adjustments (micro-adjustments), such as the distance between an icon and the text next to it, or to adjust the line-height and alignment of small icons.

مسافة دقيقة (4px)Min distance (4px)

الخرطوم، السودان

Gap: 4px | Cohesive Grouping

مسافة قياسية (8px)Standard distance (8px)

Gap: 8px | Component Separation

SECTION 4.0

شبكة الـ 12 عمود (The 12-Column Grid)The 12-Column Grid

نعتمد شبكة مرنة من 12 عموداً للشاشات الكبيرة (Desktop). يكمن سر الرقم 12 في قابليته العالية للقسمة، مما يسمح بإنشاء تخطيطات لا حصر لها بمرونة. أما في شاشات الجوال، تتقلص الشبكة لتصبح عموداً واحداً ممتداً.We adopt a flexible 12-column grid for large screens (Desktop). The secret of the number 12 is its high divisibility, which allows infinite layouts to be created flexibly. On mobile screens, the grid shrinks to become a single extended column.

Gutters (Desktop) 24px

Gutters (Mobile) 16px

SECTION 5.0

قانون الفراغ الداخلي والخارجي (Internal vs External)The law of internal and external vacuum (Internal vs External)

القانون الذهبي للتجميع الهندسي (Gestalt): الفراغ الداخلي (Padding) يجب أن يكون دائماً أصغر من أو يساوي الفراغ الخارجي الفاصل بين العناصر (Margin). هذا يضمن أن العناصر المرتبطة منطقياً تبدو متصلة بصرياً.The golden law of geometric grouping (Gestalt): The inner space (Padding) must always be less than or equal to the outer space separating the elements (Margin). This ensures that logically related elements appear visually connected.

SECTION 6.0

العرض الأقصى لكتل النصوص (Text Max-Width)Maximum width of text blocks (Text Max-Width)

يجب الالتزام بوضع حد أقصى (Max-Width) لأي حاوية نصوص مقروءة، يتراوح بين 600 بكسل إلى 800 بكسل.You must adhere to setting a maximum width (Max-Width) for any readable text container, ranging from 600 pixels to 800 pixels.

SECTION 7.0

نظام التقويس والحدود الدائرية (Border Radius)Border Radius System

نستخدم زوايا دائرية منتظمة ومدروسة لتخفيف حدة الواجهة. أهم قاعدة هي "قانون التداخل" (Nesting Rule): مقدار القوس الداخلي = مقدار القوس الخارجي - مسافة الفراغ بينهما الأساسية (Padding). We use regular and calculated rounded corners to soften the interface. The most important rule is the “Nesting Rule”: Internal arch value = external arch value - basic space distance between them (Padding).

radius-sm (4px)

radius-md (8px)

radius-lg (12px)

radius-xl (16px)

radius-2xl (24px)

Outer Radius: 24px

(24 - 12 = 12px Inner Radius)

التقويس متناغم ومتوازي تماماًThe curvature is harmonious and perfectly parallel

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

المساحات، الشبكات، والتقسيم في أنظمة التصميم

المحاكاة (Mirroring): التصميم للمستخدم العربي

الرياضيات الخفية للثقة: كيف تحكم الشبكة سلوك ضيوفنا؟ The Hidden Math of Trust: How the Grid Governs Guest Behavior?