دليل العلامة·v1.9·2026-09

هويّة جنّي.بنية العراق الرقمية للتجارة.

دليلٌ رسميّ يوضّح كيف نعبّر عن جنّي بصريّاً — شركة عراقية لأتمتة الأسواق والتجارة الرقمية تمكّن التجار الصغار والكبار من النمو ضمن منظومة تقنية موحدة. كلّ الأصول متاحة للتحميل.

تحميل الشعار تنزيل كلّ الأصول تواصل مع الفريق

بغداد · العراق
علامة مسجّلة ®
10 نسخة شعار · 5 لون

اللون الأساسي: #F05D25
الخط الأساسي: Rubik
نسخة شعار: 10
الإصدار: v1.9

01/18

الأساس

قبل أن نرسم الشعار — نعرف ما نبنيه

أربع ركائز تقود منظومتنا لأتمتة الأسواق وتمكين التجار في كلّ قرار تصميمي وتحريري.

01الرسالة

نبني البنية التحتية الرقمية للتجارة في العراق.

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

02الرؤية

تمكين كلّ تاجر من النمو رقمياً.

منظومة رقمية يعتمدها التاجر الصغير قبل الكبير، تُسهّل الانتقال إلى الاقتصاد الرقمي وتفتح أبواب أسواق أوسع بأدوات ذكية وبنية تحتية جاهزة.

03التموضع

شركة أتمتة الأسواق والتجارة الرقمية في العراق.

لسنا متجراً إلكترونياً فحسب. نحن منظومة متكاملة تدمج المدفوعات واللوجستيات وإدارة الأعمال — تخدم المستهلك والتاجر معاً ضمن تجربة شفافة وفعّالة.

04الوعد

تمكين التجار. تبسيط التجارة.

أدوات رقمية متقدّمة للتجار الصغار والكبار، شراكات استراتيجية في الدفع والتوصيل، ونظام بيئي يخلق فرص النمو للجميع.

نحن / لسنا

بنية تحتية رقمية للتجارة
ممكّنون للتجار الصغار والكبار
منظومة متكاملة للمدفوعات والتوصيل
شركاء في نمو الأعمال

متجراً إلكترونياً فحسب
حلولاً منفصلة وغير مترابطة
منصّة للمستهلك فقط
مقلّدون لنماذج خارجية

02/18

الشعار

عائلة شعار جنّي الكاملة

شعار يمثّل منظومة أتمتة الأسواق والتجارة الرقمية في العراق. الشعار الكامل للاستخدام الأساسي، والرمز الأحادي حين تضيق المساحة. كلّ الملفات بصيغة SVG.

الشعار الكامل

الاستخدام الأوّل والافتراضي في كلّ مادّة تمثّل جنّي. أربع خلفيّات معتمدة.

ألوان

الشعار الرئيسي

الاستخدام الافتراضي على الخلفيات الفاتحة — المواد التسويقية والمطبوعات.

SVG · PNG

SVG

ألوان

على خلفية كريميّة

الخلفية الافتراضيّة عبر الموقع والمواد الرسميّة.

SVG · PNG

SVG

أبيض

على خلفية داكنة

للفيديوهات والإعلانات ذات الخلفيات الداكنة.

SVG · PNG

SVG

النسخة أحاديّة اللون

نسخة بلا نقطة برتقاليّة — تُستخدم فوق الخلفيّات السوداء أو البيضاء الخالصة، وعلى أيّ لون يتعارض مع البرتقالي. مناسبة أيضاً للطباعة أحاديّة اللون، الأختام، والتطريز.

أحادي

على اللون الأساسي

للحملات الإعلانيّة والعناصر عالية التركيز — نستخدم النسخة البيضاء الخالصة (بلا نقطة برتقاليّة) حتى لا يتكرّر البرتقالي فوق نفسه.

SVG · PNG

SVG

أحادي

أحاديّة اللون — على أبيض خالص

عند الطباعة أحاديّة اللون أو حين تتواجد ألوان أخرى قد تتعارض مع البرتقالي.

SVG · PNG

SVG

أحادي

أحاديّة اللون — على أسود خالص

الخلفيّات السوداء الخالصة، أو أيّ لون قويّ يتعارض مع البرتقالي.

SVG · PNG

SVG

الرمز الأحادي

استخدم الرمز الأحادي (حرف G) حين لا تسعك الكلمة: الأفاتارات، أيقونات التطبيقات، والأختام على الصور.

رمز

الرمز الأحادي

رمز جنّي المختصر — للأختام، الأفاتارات، والأيقونات المربّعة على الخلفيات الفاتحة.

SVG · PNG

SVG

أحادي

الرمز على اللون البرتقالي

النسخة المفضّلة لأيقونة التطبيق والأفاتار على الشبكات الاجتماعيّة — نستخدم الرمز الأبيض الخالص (بلا نقطة برتقاليّة) حتى لا يتكرّر البرتقالي فوق نفسه.

SVG · PNG

SVG

أحادي

الرمز الأحادي — على أبيض خالص

رمز أحاديّ اللون على الخلفيّات البيضاء الخالصة أو أيّ لون يتعارض مع البرتقالي.

SVG · PNG

SVG

أحادي

الرمز الأحادي — على أسود خالص

رمز أحاديّ اللون على الخلفيّات السوداء الخالصة وعلى أيّ لون قويّ يتعارض مع البرتقالي.

SVG · PNG

SVG

03/18

علامات المنتجات

عائلة واحدة — علامة أمّ ومنتجات تحمل اسمها

لكلّ منتج علامة خاصة به تعيش تحت مظلّة جنّي. تُستخدم علامة المنتج داخل المنتج نفسه ومواده، وتبقى علامة جنّي هي الموقّع على كلّ ما يمثّل الشركة.

svg

سوق جنّي

السوق الإلكتروني الموحّد — علامة المنتج الاستهلاكي الأساسي.

صفحة المنتج SVG

svg

سوق الجمعة

سوق الجملة الأسبوعي — علامة موسمية تحمل الطابع نفسه.

صفحة المنتج SVG

png

منصة الولاء (DOT)

برنامج النقاط والمكافآت — علامة تظهر داخل تطبيقات الشركاء أيضاً.

صفحة المنتج PNG

svg

منصة فوز

منصة السحوبات والجوائز مع كي كارد — علامة مشتركة تُعرض بجانب شريكها.

صفحة المنتج SVG

تركيب مشترك1×G · | · 1×G

شعار جنّي يتقدّم على جهة البداية، يليه خط فاصل بارتفاع حرف G، ثم علامة المنتج بالارتفاع نفسه.

علامة المنتج تُستخدم داخل المنتج ومواده التسويقية الخاصة؛ ما يمثّل الشركة كلّها يحمل شعار جنّي.
عند الجمع بين شعار جنّي وعلامة منتج، يتقدّم شعار جنّي على جهة البداية ويفصل بينهما خط رأسي بارتفاع حرف G ومسافة G من كلّ جهة.
لا تُدمج علامة منتج مع أخرى في تركيب واحد — منتج واحد لكلّ تصميم.
الحدّ الأدنى لعرض علامة المنتج 32 بكسل رقميّاً و 20 مم طباعة، وتُطبَّق عليها قواعد المسافة الحرّة والتباين نفسها.

04/18

التشريح

تشريح الشعار وقياساته

الأرقام التي تحافظ على الشعار مقروءاً ومتّسقاً في أيّ مكان.

1×Gمنطقة آمنة

الشبكة أعلاه توضّح الحدّ الأدنى للمسافة الحرّة حول الشعار: يجب ألّا يقلّ الإطار المنقّط عن ارتفاع حرف G من كلّ جهة.

المسافة الحرّة
= 1× G
اترك مساحة حول الشعار بارتفاع حرف G كحدّ أدنى.
الحد الأدنى رقمياً
24 px
أصغر عرض يحافظ على قراءة الحروف على الشاشة.
الحد الأدنى طباعة
16 mm
لأي وسيط مطبوع: بطاقات، مغلفات، لافتات.
نسبة العرض للارتفاع
≈ 1.6 : 1
لا تعدّل النسبة — مطّها أو ضغطها ممنوع.

05/18

القواعد

كيف نستخدم الشعار — وكيف لا نستخدمه

قاعدتان تحفظان وضوح العلامة: ما يجب فعله دائماً، وما يُمنع بتاتاً.

افعل

اترك مساحة حرة حول الشعار بمقدار ارتفاع حرف G كحدّ أدنى.
لا يقلّ عرض الشعار عن 24 بكسل على الشاشة و 16 مم في الطباعة.
استخدم النسخة الأصلية باللون البرتقالي أو النسخة البيضاء فقط.
على أيّ خلفية برتقاليّة أو من تدرّجاتها، استخدم النسخة البيضاء من الشعار فقط.
تحقّق من تباين الخلفية قبل التصدير — استخدم الجدول في قسم الوصول.

تجنّب

لا تدوّر الشعار أو تغيّر اتجاهه.
لا تضع الشعار الأسود أو المحدّد بالألوان على أيّ خلفية برتقاليّة.
لا تستبدل ألوان الشعار بألوان أخرى غير معتمدة.
لا تمطّ الشعار أو تضغطه — حافظ على نسبه الأصلية.
لا تضف حدوداً أو ظلالاً أو تأثيرات حول الشعار.

06/18

الملكيّة التجاريّة

«جنّي» و«GINI» — علامتان تجاريّتان مسجّلتان

الاسم التجاري، الشعار، الرمز الأحادي، منتجات جنّي التابعة، والألوان الأساسيّة — جميعها ملكيّة فكريّة محميّة قانونيّاً. لا يحقّ لأيّ طرف استخدامها دون الرجوع إلينا رسميّاً.

العلامات المسجّلة

GINI·جنّي

© 2023–2026 GINI. جميع الحقوق محفوظة. «جنّي» و«GINI»، الشعار الكامل، الرمز الأحادي، وألوان العلامة (برتقالي #F05D25) علامات تجاريّة مسجّلة لدى دائرة الملكيّة الفكريّة في جمهوريّة العراق. يُمنع استعمالها، نسخها، أو التحوير فيها دون إذن خطّي مسبق من جنّي.

راسل الفريق القانوني راسلنا إعلاميّاً

ما هو محميّ
الاسم «جنّي» و«GINI»، الشعار الكامل، الرمز الأحادي (حرف G)، أسماء المنتجات التابعة مثل «جنّي ماركت» و«جنّي جمعة»، الألوان الأساسيّة (برتقالي #F05D25)، والنقش المميّز — جميعها علامات وأصول محميّة قانونيّاً.
ما يُسمح به
الاستخدام التحريري (صحافة، مراجعات، محتوى إخباري) باستخدام الأصول كما هي في هذا الدليل، دون أيّ تعديل على الشكل أو الألوان أو النسب. لأيّ استخدام تجاري، نحتاج إذناً خطّيّاً مسبقاً.
ما يُمنع صراحةً
تسجيل نطاقات أو تطبيقات أو شركات بأسماء مشابهة تسبّب التباساً مع «جنّي»، تعديل الشعار أو ألوانه أو تمطّيطه، استخدامه على بضائع أو خدمات غير معتمدة، أو تقديم محتوى يوهم بأنّه صادر عن جنّي دون أن يكون كذلك.
الإبلاغ عن انتهاك
إذا رأيت استخداماً غير مرخّص لأصول جنّي، راسلنا على info@gini.iq بالأدلة (روابط، صور شاشة) ونتعامل مع الموضوع قانونيّاً خلال 72 ساعة عمل.

للاستفسار أو طلب إذن

info@gini.iq

ردّ رسمي خلال 72 ساعة

07/18

الألوان

لوحة ألوان جنّي

درجة رئيسية دافئة تحيط بها ألوان محايدة للحفاظ على الوضوح والتباين.

برتقالي جنّي

اللون الأساسي للعلامة — الشعار والأزرار والعناصر التفاعلية.

#F05D25

جمري

نسخة أعمق للحالات التفاعلية والنصوص على الخلفيات الفاتحة.

#D94E1A

حبر ليلي

اللون الأساسي للنصوص والعناوين على الخلفيات الفاتحة.

#1A1A1A

كريمي دافئ

الخلفية الأساسية للموقع ومواد التسويق.

#FBF6F0

رملي هادئ

خلفيات ثانوية للبطاقات وفواصل الأقسام.

#EFE6DB

08/18

الوصول

تباينات موثّقة لكل استخدام

كلّ الأزواج هنا اجتازت قياس WCAG 2.1 — استخدمها مباشرة دون قلق.

Aa · جنّي
هذا النص قابل للقراءة بوضوح.
AAA
التباين
16.2 : 1
الخيار الافتراضي للنصوص الطويلة.
fg #1A1A1Abg #FBF6F0
Aa · جنّي
هذا النص قابل للقراءة بوضوح.
AAA
التباين
14.1 : 1
نصوص على البطاقات الرمليّة.
fg #1A1A1Abg #EFE6DB
Aa · جنّي
هذا النص قابل للقراءة بوضوح.
AA-large
التباين
3.3 : 1
عناوين وأزرار كبيرة فقط (18px+). لا تستخدم للنصوص الطويلة.
fg #FFFFFFbg #F05D25
Aa · جنّي
هذا النص قابل للقراءة بوضوح.
AA-large
التباين
3.9 : 1
درجة «جمري» للعناوين والأرقام الكبيرة (18px+) على الكريمي. للنصوص بحجم المتن استخدم البرتقالي الآمن #B8410F (5.1 : 1).
fg #D94E1Abg #FBF6F0
Aa · جنّي
هذا النص قابل للقراءة بوضوح.
AAA
التباين
17.4 : 1
الوضع الداكن لصفحات المنتجات والفيديوهات.
fg #FFFFFFbg #1A1A1A
Aa · جنّي
هذا النص قابل للقراءة بوضوح.
AAA
التباين
16.2 : 1
لمسة دافئة على الخلفيات الداكنة.
fg #FBF6F0bg #1A1A1A

09/18

الخطوط

خط واحد. تدرّج متعدّد.

نعتمد خط Rubik بأوزان مختلفة لنصنع تسلسلاً بصريّاً واضحاً في كل الواجهات.

Rubik · Google Fonts

Arabic + Latin subsets

400

500

700

800

عرضالعناوين البطولية في الصفحات الرئيسية والحملات.
32–48 / 1.15·800
جنّي — شريكك في التجارة
رئيسيعناوين الأقسام داخل الصفحات.
36–48 / 1.15·700
سوق واحد يجمع كل ما تحتاج
فرعيعناوين البطاقات والمكوّنات الوسيطة.
20–24 / 1.25·600
تجربة شراء ذكية، دفع آمن، توصيل سريع.
نصّالفقرات والنصوص العامّة.
16–18 / 1.6·400
نحن نبني منصّة عراقيّة تربط المتسوّق بأفضل العلامات بأسعار عادلة، مع ضمان وخدمة ما بعد البيع من فريق محلّي.
تسميةتسميات الأقسام والوسوم الصغيرة.
12–14 / 1.4·600
دليل العلامة • الإصدار الأول

10/18

الأيقونات

أيقونات خطّية بوزن واحد

نعتمد مجموعة Lucide المفتوحة كمصدر وحيد للأيقونات، بسمك خط ثابت وزوايا مدوّرة تتناغم مع الخط والشعار.

Lucide · سمك الخط 2lucide.dev

ShoppingBag
Truck
CreditCard
Gift
Trophy
Store
Users
Package
Wallet
Search
Bell
Settings

الأحجام

16 — داخل الشرائح والنصوص الصغيرة
20 — الأزرار وحقول الإدخال والقوائم
24 — شريط التنقّل وبلاطات الأيقونات
32 — بطاقات الميزات والحالات الفارغة

الألوان المسموحة

#1A1A1Aأيقونات الواجهة على الفاتح
#F05D25الأيقونة الفعّالة والبلاطات المؤكسدة
#FFFFFFعلى البرتقالي والغرافيت

أيقونة واحدة لكلّ معنى: لا تُستخدم أيقونتان مختلفتان للفعل نفسه في منتج واحد.
الأيقونة تُرافق نصّاً في الأزرار الرئيسية؛ الأيقونة وحدها تُقبل فقط بحجم 40 بكسل فأكثر ومع aria-label.
لا تُملأ الأيقونات الخطّية ولا تُضاف لها ظلال أو تدرّجات — الشعار وحده يُميَّز بالنقطة البرتقالية.
الأسهم والأيقونات الاتجاهية تنقلب في العربية (ArrowLeft بدل ArrowRight)؛ ما عداها لا يُقلب.
أيقونات المنتجات في الفهرس ثابتة: سوق جنّي ShoppingBag، سوق الجمعة Users، الولاء Gift، فوز Trophy.

11/18

الشبكة والمسافات

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

كلّ المسافات مضاعفات 4 بكسل، وكلّ صفحة تعيش داخل حاوية بعرض أقصى ثابت. هذا ما يجعل الشاشات المختلفة تبدو من عائلة واحدة.

مقياس المسافات — وحدة 4 بكسل

الحاوية: 1280px
الأعمدة: 12
الهامش: 16 / 24
بين الأقسام: 64 / 96

نقطة التوقّف	من	الجهاز
sm	640px	هواتف عريضة
md	768px	الأجهزة اللوحية
lg	1024px	الحواسيب المحمولة
xl	1280px	الشاشات الواسعة
measure	65ch	عرض القراءة للنصوص
touch	44px	أصغر هدف لمس

المسافة بين العناصر المتّصلة أصغر من المسافة بين المجموعات: 8 داخل المكوّن، 16–24 بين المكوّنات، 48–96 بين الأقسام.
الحاوية 1280 بكسل بحدّ أقصى مع هامش 16 على الهاتف و 24 على سطح المكتب؛ لا محتوى يلامس حافة الشاشة.
الشبكة 12 عموداً؛ الأعمدة الشائعة: 12 (نصّ)، 6/6 (بطل)، 4/4/4 (ميزات)، 8/4 (محتوى وشريط جانبي).
الاتجاه منطقي دائماً: استخدم start/end بدل left/right حتى تنقلب الصفحة العربية تلقائيّاً.
الحدّ الأدنى لأيّ هدف لمس 44 بكسل، ولأيّ نصّ متن 16 بكسل.

12/18

النقوش

نقوش تضيف شخصيّة دون أن تسرق الأضواء

نستخدم نقشنا البصري خلف المحتوى لإضفاء العمق، مع الحفاظ على نسبة تباين آمنة للنصوص.

على خلفية كريميّة#FBF6F0

على اللون البرتقالي#F05D25

على الأسود#0B0B0C

على الرصاصي#3F3F46

برتقالي على كريمي#FBF6F0

قواعد سريعة

استخدم النقش كخلفية ثانوية فقط، لا تضعه خلف نصوص طويلة.
الحدّ الأدنى للشفافية 25% لضمان تباين النص.
تجنّب تلوينه بأيّ لون خارج الباليت الرسمي.

تحميل SVG

13/18

الصور والرسوم

صور حقيقية، دافئة، من السوق العراقي

الصورة عند جنّي تُظهر تاجراً أو زبوناً حقيقيّاً في سياقه، بضوء طبيعي ودرجات دافئة — لا صور مخزون عامّة ولا مشاهد مصطنعة.

حقيقية

تجّار وزبائن حقيقيّون في أسواقهم ومحالّهم وبيوتهم. الوجوه تُلتقط بإذن، والمنتجات تُصوَّر كما تُباع.

دافئة

ضوء طبيعي ودرجات دافئة تميل إلى الكريمي والبرتقالي؛ لا فلاتر باردة ولا تشبّع مبالغ فيه.

مركّزة

موضوع واحد واضح لكلّ صورة، وخلفية هادئة تترك مكاناً للنصّ حين يُوضع فوقها.

متّسقة

الرسوم تُبنى من الشخصية الرسمية ومن أشكال بسيطة بألوان اللوحة؛ لا مزج بين أساليب رسم مختلفة في مادّة واحدة.

16:9

الأغلفة والمقالات

4:5

منشورات التواصل

1:1

المصغّرات والأفاتار

افعل

استخدم نسبة 16:9 للأغلفة و 4:5 للمنشورات و 1:1 للمصغّرات.
اترك مساحة هادئة بنسبة الثلث لوضع العناوين عند الحاجة.
صدّر بصيغة WebP أو AVIF بجودة 80 وعرض لا يزيد عن 1600 بكسل للويب.

تجنّب

لا صور مخزون عامّة بوجوه أو مدن لا تشبه العراق.
لا تضع الشعار فوق منطقة مزدحمة من الصورة أو بلا تباين كافٍ.
لا تولّد صوراً بأشخاص وهميّين باسم جنّي، ولا تُعِد رسم الشخصية بنماذج توليدية.

14/18

النظام البصري

الإصدار 1.1.0 · الأداة الدقيقة

اسكيومورفية حديثة — واجهة لها سطح ووزن وضوء

هذا القسم هو المرجع الأساسي لكيفية بناء واجهة جنّي بصرياً: الفلسفة، نموذج الإضاءة، الخامات، مستويات الارتفاع، الحركة، وكل مكوّن جاهز. كل عيّنة أدناه حيّة ومبنية من الأصناف الفعلية في الموقع.

كل عنصر يُبنى كما لو كان جسماً مادياً فعلياً: يُرفع، يُضغط، يُحفر أو يُضاء — لكن بانضباط منتج رقمي معاصر.

واجهة جنّي مستوحاة من الأجهزة الدقيقة عالية الجودة: سطح بوليمر مطفأ، ألواح سيراميكية مرفوعة، تحكّمات برتقالية مؤكسدة بسماكة ظاهرة، وأسطح غرافيتية للأدوات. الهدف ليس محاكاة الجلد والخشب كما في اسكيومورفية 2010، بل إعطاء المستخدم فهماً غريزياً لما يمكن ضغطه وما يحمل ماذا فوق ماذا — عبر الضوء والعمق والملمس لا عبر الزخرفة. ليست نيومورفية (كتل رمادية بظلين)، وليست زجاجية، وليست مجرد ظلال مضافة.

طاولة العيّنات

مكوّنات حقيقية بالأصناف الحقيقية — جرّبها.

skeu-btn-*

skeu-input · skeu-chip

شارةصلبةNeutralنجاح

skeu-tab / skeu-tab-active

skeu-toggle · skeu-check · skeu-radio

الإشعاراتخيار محدّداختيار واحد

skeu-meter · skeu-track / skeu-fill

2,500+

تاجر نشط

skeu-panel · skeu-well · skeu-dark · skeu-alert

لوح سيراميكي مرفوع

بئر بوليمر غائر

سطح غرافيتي

تنبيه نظام مرفوع بحافة دلالية.

المبادئ الستة

منطق مادي حقيقي

قبل تصميم أي عنصر نسأل: لو كان جسماً حقيقياً كيف سيتصرف؟ الزر يُضغط، المفتاح ينزلق، الحقل غائر، البطاقة تجلس فوق السطح، التبويب المختار مغروس في سكته.

مصدر ضوء واحد

الضوء يأتي من الأعلى‑يسار بميل أمامي خفيف في كل الشاشات. كل ظل وكل حافة مضيئة تحترم هذا الاتجاه، فتتماسك الواجهة كجسم واحد.

ضبط النفس قبل الإبهار

أربع عائلات خامات فقط، ثمانية مستويات ارتفاع فقط، حبيبات سطح تُحسّ ولا تُلاحظ. التسلسل الهرمي للعمق أهم من كمية الظلال.

تسلسل عمق واضح

القاعدة ← المناطق الغائرة الوظيفية ← أسطح المحتوى المرفوعة ← التحكّمات المادية ← الطبقات العائمة. يفهمها المستخدم لا شعورياً.

الوضوح يفوز دائماً

الطباعة تبقى حديثة ونظيفة بلا ظلال نصية، والكثافة المعلوماتية محفوظة. عندما يتعارض الجمال مع القراءة نختار القراءة مع لمسة مادية راقية.

الوصول لا يُساوَم عليه

الحالة لا تُنقل بالظل وحده: حلقة تركيز مرئية على كل عنصر، خصائص ARIA على المجزّآت والقوائم، أهداف لمس ≥ 44px، واحترام تفضيل تقليل الحركة.

نموذج الإضاءة

مصدر ضوء افتراضي واحد أعلى‑يسار. الأسطح المرفوعة تحصل على خط إضاءة علوي داخلي (inset 0 1px 0 أبيض)، ظل تماس قصير تحتها، وظل محيطي ناعم أبعد. الأسطح الغائرة تعكس المنطق: ظل داخلي داكن من الأعلى وشفة مضيئة من الأسفل.

كل ظل يُزاح عمودياً للأسفل (y موجب)، ولا يُزاح أفقياً إلا بدرجة ضئيلة.
لون الظل حبر دافئ (rgb 37 22 10) لا أسود محايد — ليتناغم مع الخلفية الكريمية.
الحافة العلوية المضيئة إلزامية على كل سطح مرفوع؛ الحافة السفلية أغمق قليلاً لإظهار السماكة.
التدرجات مسموحة فقط عندما تصف انحناءً أو ضوءاً أو خامة — لا تدرجات زخرفية.

الخامات الأربع

بوليمر مطفأ

body / .skeu-well

يُستخدم في: قاعدة الصفحة، الصواني والآبار الغائرة، حقول الإدخال

الوصفة: لون كريمي دافئ (oklch 0.962 0.012 72) مع إضاءة شعاعية من الأعلى‑يسار، انحدار لوني خفيف نحو الأسفل، وطبقة حبيبات ثابتة بشفافية 4.5%.

سيراميك مرفوع

.skeu-panel / .skeu-panel-2 / .skeu-rail / .skeu-dialog

يُستخدم في: البطاقات، اللوحات، سكة التنقل، النوافذ الحوارية، الأزرار الثانوية

الوصفة: تدرج عمودي من الأبيض إلى الأبيض الدافئ، حد 1px بلون الحافة، خط إضاءة علوي داخلي، ظل تماس + ظل محيطي حسب مستوى الارتفاع.

برتقالي مؤكسد

.skeu-btn-primary / .skeu-tile / .skeu-tab-active / .skeu-chip-solid

يُستخدم في: الزر الأساسي، بلاطات الأيقونات، التبويب النشط، الشارات الصلبة، المفتاح المفعّل

الوصفة: تدرج من #cc4914 أعلى عبر #c4461a إلى #b83f16 أسفل (قبة خفيفة، ≥4.6:1 مع النص الأبيض)، حد #a83c15، لمعة علوية بيضاء 38%، حزام سفلي داكن 2px يكشف السماكة، وهج برتقالي ناعم للخارج. الحالة المضغوطة أغمق وغائرة.

غرافيت

.skeu-dark / .skeu-btn-dark

يُستخدم في: الفوتر، نوافذ الكود، كتل الدعوة الداكنة، عناصر التحكم عليها

الوصفة: تدرج من #2a2624 إلى #171412 مع خطوط فرشاة أفقية بشفافية 1.2%، حافة علوية مضيئة 10%، حافة سفلية داكنة، وظل بعيد عميق.

سلّم الارتفاع

ثمانية مستويات فقط. كل عنصر يعيش في مستوى يناسب دوره ويصعد أو يهبط عند التفاعل.

غائر
.skeu-well--skeu-shadow-recessed
صواني المحتوى الوظيفية، مسارات التقدم، التبويب المختار (نسخة ناعمة)
بئر
.skeu-input / .skeu-well-soft--skeu-shadow-well
حقول الإدخال، الصناديق والمفاتيح، قوائم الصفوف
مستوٍ
.skeu-btn-ghost / .skeu-list-item--skeu-shadow-flush
عناصر القوائم والأزرار الشبحية قبل التحويم — ترتفع عند التفاعل
مرفوع 1
.skeu-panel--skeu-shadow-raised-1
البطاقات القياسية، الشرائح الكبيرة، التنبيهات
مرفوع 2
.skeu-panel-2 / .skeu-rail--skeu-shadow-raised-2
لوحات الأبطال، الحاويات الكبرى، سكة الهيدر، البطاقة عند التحويم
عائم
.skeu-floating--skeu-shadow-floating
القوائم المنسدلة، الرقائق العائمة، النوافذ المنبثقة الصغيرة
طبقة علوية
.skeu-dialog--skeu-shadow-overlay
النوافذ الحوارية فوق خلفية معتمة قليلاً
مضغوط
:active / .skeu-tab-active--skeu-shadow-pressed
لحظة الضغط على أي تحكم، والتبويب المختار

مقياس الأقطار

6px
الشرائح الصغيرة والوسوم
10px
الأزرار القياسية وحقول الإدخال والتحكمات الصغيرة
14px
البلاطات والتبويبات
20px
البطاقات واللوحات
26px
النوافذ الحوارية وسكة التنقل

قواعد الحركة

ضغط الزر — 80ms — ينزل 1px ويتحول ظله الخارجي إلى ظل داخلي؛ يعود خلال 150ms.
تحويم البطاقة — 260ms — ترتفع 2px من مستوى «مرفوع 1» إلى «مرفوع 2» بمنحنى cubic-bezier(0.22, 1, 0.36, 1).
اختيار التبويب — التبويب الجديد يغوص 1px بلون أغمق؛ السابق يعود لمستواه.
المفتاح — الإبهام ينزلق 20px ميكانيكياً خلال 260ms وتُضاء السكة.
القائمة المنسدلة — 180ms — تظهر بارتفاع صغير وتلاشٍ (animate-skeu-pop).
النافذة الحوارية — 260ms — ترتفع من القاعدة بتكبير مضبوط 0.97 → 1 (animate-skeu-dialog).
تقليل الحركة — كل الحركات تُطفأ عند prefers-reduced-motion؛ تبقى الحالات مقروءة بالشكل واللون.

فهرس المكوّنات

الأسطح

skeu-panel
لوح مرفوع
البطاقة القياسية
skeu-panel-2
لوح مرفوع 2
الحاويات الكبرى والأبطال
skeu-panel-interactive
لوح تفاعلي
بطاقة قابلة للنقر ترتفع وتجلس
skeu-panel-selected
لوح مختار
بطاقة مقفلة/مختارة مغروسة بحافة برتقالية
skeu-floating
سطح عائم
القوائم المنسدلة والرقائق
skeu-dialog + skeu-backdrop
نافذة حوارية
الطبقة العلوية وخلفيتها
skeu-rail
سكة تنقل
الهيدر وأشرطة الأدوات اللاصقة
skeu-well / -soft / -accent
بئر غائر
الصواني الوظيفية والصفوف المميزة
skeu-dark
سطح غرافيتي
الفوتر ونوافذ الكود

التحكّمات

skeu-btn-primary
زر أساسي
الإجراء الرئيسي — برتقالي مؤكسد
skeu-btn-secondary
زر ثانوي
زر سيراميكي مطفأ
skeu-btn-tint
زر مصبوغ
إجراء ثانوي بهوية برتقالية
skeu-btn-ghost
زر شبحي
مستوٍ حتى التحويم ثم يرتفع
skeu-btn-destructive
زر حذف
أحمر مُشغَّل آلياً
skeu-input
حقل إدخال
بئر غائر بحلقة إضاءة عند التركيز
skeu-check / skeu-radio
صندوق اختيار / راديو
بئر محفور يُضاء عند التحديد
skeu-toggle
مفتاح
سكة غائرة وإبهام مادي
skeu-tab / skeu-tab-active
تبويب مجزّأ
مفتاح مرفوع؛ النشط مغروس بلون أغمق

العناصر الصغيرة

skeu-tile / -soft / -ceramic
بلاطة أيقونة
مؤكسدة / بئر مصبوغ / سيراميك أبيض
skeu-chip / -solid / -neutral / -success
شارة
شرائح بارزة بحافة شعرية
skeu-meter
قارئ أرقام
الإحصائيات ومؤشرات الأداء
skeu-table / skeu-row
جدول / صف
رأس مرفوع، جسم غائر، صفوف لمسية
skeu-alert-*
تنبيه
أجسام نظام مرتفعة بحافة دلالية
skeu-skeleton
هيكل تحميل
كتل غائرة بمسح ضوئي
skeu-track / skeu-fill
مسار تقدم
سكة غائرة وتعبئة مؤكسدة
skeu-divider
فاصل محفور
خط داكن فوق خط مضيء

قواعد الحالات

الحالة	التمثيل المادي
افتراضي	مرفوع بخامته الطبيعية
تحويم	يرتفع 1–2px وتقوى إضاءته
ضغط	ينزل 1px، ظل داخلي، لون أغمق
تركيز	حلقة إضاءة برتقالية 3px — دائماً مرئية
مختار	مغروس في سكته مع لون تمييز + خاصية ARIA
معطّل	شفافية 55%، إشباع أقل، بلا حركة
تحميل	هياكل غائرة بمسح ضوئي أو مؤشر داخل الزر
خطأ	حافة حمراء + حلقة حمراء خفيفة + رسالة نصية

المنهجية — سبع مراحل

الطريقة التي رُحّل بها المنتج كاملاً إلى النظام الجديد، وهي نفسها الطريقة المطلوبة لأي شاشة جديدة.

1 — التدقيق
جرد كل المسارات والمكوّنات والأنماط المتكررة قبل لمس أي صفحة، وفهم المنتج كنظام واحد.
2 — الأساس
التوكنات، الخامات، نموذج الإضاءة، الظلال، الحدود، الأقطار، الحركة — كلها مركزية في globals.css.
3 — الأوليات
ترقية الأزرار والمدخلات والتبويبات والمفاتيح والشارات والنوافذ قبل أي صفحة.
4 — الهيكل العام
الهيدر كسكة، خلفية القاعدة، الفوتر الغرافيتي، الحاويات.
5 — صفحة‑صفحة
ترحيل كل مسار مع حالات التحميل والفراغ والخطأ، دون حذف أي محتوى أو تغيير أي منطق.
6 — الاستجابة
فحص 1366px و390px بالعربية والإنكليزية: لا تجاوز أفقي، أهداف لمس مريحة، ظلال مبسّطة على الموبايل.
7 — الصقل
تدقيق اتساق شامل وكنس بقايا اللغة القديمة حتى يبدو كل شيء من فريق واحد ونظام واحد.

افعل

ابدأ بصنف الخامة (skeu-panel، skeu-btn-primary…) ثم أضف أدوات Tailwind للتخطيط فقط.
اجعل المحتوى (صور المنتجات، الأرقام، النصوص) هو البطل، والأسطح تدعمه.
استخدم الخصائص المنطقية (start/end) وتأكد من النسختين العربية والإنكليزية.
أعطِ كل حالة (تحويم، ضغط، تركيز، معطّل) تمثيلاً مادياً واضحاً.
احترم مستوى الارتفاع المناسب لدور العنصر — لا ترفع كل شيء.

لا تفعل

لا نيومورفية: كتل رمادية بظل فاتح أعلى‑يسار وظل داكن أسفل‑يمين.
لا جلد ولا خشب ولا قوام صور ثقيل — الخامات مصقولة ومضبوطة.
لا تدرجات زخرفية بلا سبب مادي، ولا ظلال عشوائية خارج التوكنات.
لا تجعل كل شيء حبة دواء — لكل نوع كائن قطره.
لا ظلال على النصوص، ولا تضحية بالتباين من أجل النعومة.
لا متغيرات rtl:/ltr: في Tailwind — لكل لغة جذر <html dir> خاص بها؛ استخدم الأدوات المنطقية (ps-/pe-/text-start) بدلاً منها.

التوكنات الأساسية

الحقيقة الوحيدة للألوان والظلال والأزمنة. لا تُخترع ظلال خارجها.

app/globals.css

:root {
  --skeu-bg: oklch(0.962 0.012 72); /* Polymer base */
  --skeu-surface: oklch(0.993 0.004 80); /* Ceramic surface */
  --skeu-well: oklch(0.955 0.01 72); /* Recessed well colour */
  --skeu-accent: #f05d25; /* GINI orange */
  --skeu-accent-deep: #c9481a; /* Anodized control edge */
  --skeu-accent-text: #b8410f; /* Text-safe orange (AA body text) */
  --skeu-accent-text-strong: #8f3210; /* Orange text on 13–16% accent tints */
  --skeu-edge-control: oklch(0.62 0.02 66); /* Form-control boundary (≥3:1) */
  --skeu-edge: oklch(0.86 0.018 68); /* Surface edge colour */
  --skeu-highlight: rgba(255,255,255,0.92); /* Lit top edge */
  --skeu-ink: 37, 22, 10; /* Warm shadow ink (RGB) */
  --skeu-shadow-raised-1: inset 0 1px 0 highlight, 0 1px 1px, 0 2px 4px -1px, 0 10px 24px -14px; /* Standard card stack */
  --skeu-shadow-control: inset 0 1px 0 white/38, inset 0 -2px 0 dark/32, 0 1px 2px, 0 6px 14px -6px orange/55; /* Primary control stack */
  --skeu-focus-rim: 0 0 0 2px #fff, 0 0 0 4px --skeu-accent-deep + inset; /* Two-tone focus rim (≥3:1) */
  --skeu-transition-fast / -normal: 150ms / 260ms; /* Press timing / lift timing */
}

المراجع القابلة للقراءة آلياً

نفس هذا المحتوى متاح لأي وكيل ذكاء أو أداة تطوير عبر:

التنفيذ الحي: app/globals.css · 2026-09

15/18

الشخصية

جنّي — وجه العلامة

شخصية ثلاثيّة الأبعاد بشعر برتقالي وجاكيت أسود — وسيلتنا البصريّة لإيصال الإحساس الودّي والدافئ في كل مكان تظهر فيه العلامة.

42 / 42·وضعيّات الشخصية الرسميّةمتوفّرة

أمامي

لقطة قريبة

ثقة

ابتسامة

أيدٍ متقاطعة

تصفيق

ترحيب

تفكير

يساري

جانب يسار

يميني

زاوية مائلة

خلفي يسار

تسليم طرد

زي التوصيل

موصّل

يد مرفوعة

يشير للأسفل

تحيّة

يشير للأمام

هاتف بيدين

تركيز

بورتريه

جانب يسار ٢

صندوق جانبي

صندوق بيد

صندوق توصيل

بروفايل

هاتف بيد

احتفال

زاوية علويّة

طرود متعدّدة

زاوية منخفضة

ممتاز

صندوق بيدين

جانب يمين ٢

يمشي بصندوق

بصندوق ٢

منظور علوي

بصندوق

تفاجؤ علوي

بصندوق ٣

كيف نستخدم الشخصية

افعل

ضعها على خلفية تُبرز ملامحها — فاتحة كالكريمي أو داكنة كالأسود — بشرط أن يبقى التباين واضحاً.
حافظ على مساحة تنفّس حولها لا تقلّ عن ارتفاع الرأس.
اختر الوضعية التي تناسب رسالة التصميم (إعلانات، إشعارات، قصص).

تجنّب

لا تعيد تلوينها — الباليت الرسمي فقط.
لا تقلب الذيل البرتقالي بلون آخر.
لا تستخدمها بحجم أصغر من 120 بكسل (تفقد التفاصيل).

16/18

الصوت والنبرة

كيف نتحدّث إلى جمهورنا

أربع صفات ترشدنا عند كتابة أيّ جملة باسم جنّي — من الإعلانات إلى خدمة العملاء.

دافئ

نتحدّث بلغة بسيطة، قريبة من الناس، تعكس ثقافتنا العراقية.

واثق

نقدّم وعوداً نفي بها، ونوضح ما نعرف وما لا نعرف.

مختصَر

جمل قصيرة وأفكار واضحة. كل كلمة تستحق مكانها.

متفائل

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

نقول / لا نقول

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

17/18

للإعلام

نصّ جاهز لوصف جنّي

انسخ الفقرة التالية كما هي في مقالك أو بيانك الصحفي — أو اقتبس الحقائق السريعة مباشرة.

فقرة جاهزة

جنّي (GINI) شركة عراقية لأتمتة الأسواق والتجارة الرقمية تأسّست عام 2023، تهدف إلى ربط التجار ومزودي الخدمات وشركات التوصيل وأنظمة الدفع ضمن منظومة تقنية موحدة. توفّر جنّي أدوات لإدارة الأعمال وعرض المنتجات والخدمات ومعالجة المدفوعات وإدارة الطلبات — مما يمكّن الشركات والتجار من النمو والوصول إلى ملايين المستخدمين بسهولة وكفاءة. مقرّها الرئيسي في بغداد، وتخدم التجار والمستهلكين في جميع المحافظات العراقية.

الاسم الرسمي: GINI (جنّي)
سنة التأسيس: 2023
المقر: بغداد، العراق
النشاط: أتمتة الأسواق والتجارة الرقمية
الموقع: gini.iq
التواصل الإعلامي: info@gini.iq

18/18

الأسئلة الشائعة

أجوبة لأكثر الأسئلة تكراراً

إذا لم تجد ما تبحث عنه، راسلنا على info@gini.iq.

هل يمكنني استخدام الشعار في مقال أو فيديو عن جنّي؟

نعم. الاستخدام التحريري (صحافة، مدوّنات، محتوى إخباري) مسموح به دون إذن مسبق، ما دام الشعار مُستخدماً كما هو موضّح هنا — بالنسب والألوان الأصلية.

أرغب بعمل علامة مشتركة مع جنّي — ما الخطوة؟

راسلنا على info@gini.iq بتفاصيل المشروع والجدول الزمني. عادةً نردّ خلال 24 ساعة ونزوّدك بإرشادات إضافية وأصول خاصّة بالتعاون.

هل يمكنني تعديل الألوان لتتماشى مع هويّتي؟

لا. استخدم الألوان الرسميّة فقط (برتقالي جنّي أو النسخة البيضاء). أي تعديل لوني يُعدّ إساءة استخدام للعلامة.

هل لديكم صور عالية الجودة للإعلام؟

نعم. راسلنا على info@gini.iq وسنرسل لك حزمة صور مخصّصة تشمل لقطات منتجات، فريق العمل، والمقر الرئيسي.

هل اسم «جنّي» و«GINI» علامات مسجّلة؟

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

للإعلام

تحتاج مواد إضافيّة؟ نحن هنا.

أرسل لنا طلبك على info@gini.iq وسنعود إليك بصور مخصّصة أو تصريح علامة خلال 24 ساعة.

مراسلة الفريق العودة للرئيسية

نبني البنية التحتية الرقمية للتجارة في العراق.

تمكين كلّ تاجر من النمو رقمياً.

شركة أتمتة الأسواق والتجارة الرقمية في العراق.

تمكين التجار. تبسيط التجارة.

نحن / لسنا

الشعار الرئيسي

على خلفية كريميّة

على خلفية داكنة

على اللون الأساسي

أحاديّة اللون — على أبيض خالص

أحاديّة اللون — على أسود خالص

الرمز الأحادي

الرمز على اللون البرتقالي

الرمز الأحادي — على أبيض خالص

الرمز الأحادي — على أسود خالص

سوق جنّي

سوق الجمعة

منصة الولاء (DOT)

منصة فوز

ما هو محميّ

ما يُسمح به

ما يُمنع صراحةً

الإبلاغ عن انتهاك

قواعد سريعة

حقيقية

دافئة

مركّزة

متّسقة

طاولة العيّنات

المبادئ الستة

منطق مادي حقيقي

مصدر ضوء واحد

ضبط النفس قبل الإبهار

تسلسل عمق واضح

الوضوح يفوز دائماً

الوصول لا يُساوَم عليه

نموذج الإضاءة

الخامات الأربع

بوليمر مطفأ

سيراميك مرفوع

برتقالي مؤكسد

غرافيت

سلّم الارتفاع

مقياس الأقطار

قواعد الحركة

فهرس المكوّنات

قواعد الحالات

المنهجية — سبع مراحل

افعل

لا تفعل

التوكنات الأساسية

المراجع القابلة للقراءة آلياً

دافئ

واثق

مختصَر

متفائل

نقول / لا نقول

تحتاج مواد إضافيّة؟ نحن هنا.