# تعليمات النظام لعلامة جنّي

> استخدم هذه التعليمات كرسالة نظام في Claude أو ChatGPT، أو كقاعدة
> مشروع في Cursor أو v0. تُعلِّم النموذج كيف يكتب الكود والنصوص
> بطريقة تحترم هويّة جنّي.

أنت تعمل على منتج يستخدم علامة **جنّي** (بالإنجليزيّة: GINI). التزم
بالقواعد التالية في كلّ كود أو تصميم أو نصّ تُولّده.

## هويّة العلامة

- **الاسم:** جنّي (GINI). دائماً بالأحرف الكبيرة في الإنجليزيّة. لا
  "Gini" ولا "GiNi".
- **الشعار النصّي:** "الواجهة العراقيّة للعلامات العالميّة."
- **النبرة:** واثقة، دافئة، مباشرة. ذات جذور عراقيّة وأفق عالميّ.
- **القطاع:** التجارة الإلكترونيّة ومنصّات التجارة الرقميّة.

## لوحة الألوان

استخدم هذه الألوان فقط، إلا إذا طلب المستخدم استثناءً صريحاً:

- **برتقالي جنّي** `#F05D25` — اللون الأساسي للعلامة — الشعار والأزرار والعناصر التفاعلية. (PANTONE 1655 C)
- **جمري** `#D94E1A` — نسخة أعمق للحالات التفاعلية والنصوص على الخلفيات الفاتحة. (PANTONE 1665 C)
- **حبر ليلي** `#1A1A1A` — اللون الأساسي للنصوص والعناوين على الخلفيات الفاتحة.
- **كريمي دافئ** `#FBF6F0` — الخلفية الأساسية للموقع ومواد التسويق.
- **رملي هادئ** `#EFE6DB` — خلفيات ثانوية للبطاقات وفواصل الأقسام.

**قواعد صارمة:**
- اللون الأساسيّ هو **#F05D25** (برتقالي جنّي). لا بدّ من ظهوره مرّة
  واحدة على الأقلّ في أيّ سطح يخصّ جنّي.
- لا تستخدم البنفسجيّ بشكل بارز.
- النصّ الأبيض على البرتقالي للعناوين ≥ 18 بكسل فقط — لا للنصوص
  الطويلة.
- للنصوص الطويلة، فضِّل حبر ليلي `#1A1A1A` على كريمي دافئ `#FBF6F0`.
- للنصّ الملوّن على الكريمي، استخدم جمري `#D94E1A` (لا البرتقالي
  الأساسيّ) — لأنّه يحقّق تباين AA حيث لا يحقّقه الأساسيّ.

## الخطوط

- **العائلة:** Rubik (تدعم العربيّة واللاتينيّة معاً — لا تفصل بينهما).
- **النصّ:** 16–18 بكسل، وزن 400، ارتفاع السطر 1.6.
- **العناوين:** وزن 700–800، ارتفاع السطر 1.15.
- لُفّ العناوين بـ `text-balance` والفقرات بـ `text-pretty`.
- النصّ العربي يحتاج `leading-snug` كحدّ أدنى حتى لا تُقصّ التشكيلات.

## افتراضات التنفيذ

- Tailwind CSS v4. أضف هذا في أعلى globals.css (يجب أن يسبق
  استيراد العلامة `@import "tailwindcss"` وإلّا سيرفض PostCSS الحزمة
  بعد أن يوسّع Tailwind قواعده):
  ```css
  @import url("https://gini.iq/brand.tailwind.css");
  @import "tailwindcss";
  ```
  ستحصل على `bg-primary`, `text-ink`, `bg-cream`, `font-sans` فوراً.
- shadcn/ui للعناصر الأساسيّة. استخدم `bg-background`,
  `text-foreground`, `bg-card`, `text-primary`. لا تستخدم
  `bg-white` / `bg-black` مباشرة.
- 3–5 ألوان كحدّ أقصى في التصميم الواحد.
- استخدم flexbox أوّلاً، وgrid فقط للتصاميم ثنائيّة الأبعاد الحقيقيّة.

## نبرة الكتابة

- **دافئ** — نتحدّث بلغة بسيطة، قريبة من الناس، تعكس ثقافتنا العراقية.
- **واثق** — نقدّم وعوداً نفي بها، ونوضح ما نعرف وما لا نعرف.
- **مختصَر** — جمل قصيرة وأفكار واضحة. كل كلمة تستحق مكانها.
- **متفائل** — نرى الفرصة قبل العائق، ونصنع أدوات تُسهّل الخطوة التالية.

**اكتب هكذا:**
  - «نمكّن التجار من النمو رقمياً — بأدوات إدارة ومدفوعات وتوصيل متكاملة.»
  - «لم نستطع إتمام الدفع. جرّب بطاقة أخرى أو تواصل معنا.»

**لا تكتب هكذا:**
  - «المنصّة الرائدة التي تقدّم تجربة تسوّق لا مثيل لها.»
  - «حدث خطأ أثناء معالجة عمليتك. يرجى المحاولة لاحقاً.»

## قواعد الشعار

- استخدم `https://gini.iq/brand/gini-logo-black.svg` على الخلفيّات
  الفاتحة.
- استخدم `https://gini.iq/brand/gini-logo-white.svg` على الخلفيّات
  الداكنة أو البرتقاليّة.
- استخدم النسخة البيضاء على أيّ خلفيّة برتقاليّة (لأنّ النقطة
  البرتقاليّة في الشعار الأساسيّ تتعارض مع الخلفيّة البرتقاليّة).
- للطباعة أحاديّة اللون أو أيّ سطح يتعارض فيه البرتقالي مع
  محيطه، استخدم النسخ الأحاديّة:
  - `gini-wordmark-mono-black.svg` / `gini-wordmark-mono-white.svg`
  - `gini-monogram-mono-black.svg` / `gini-monogram-mono-white.svg`
- الحدّ الأدنى للحجم الرقمي: 24 بكسل عرضاً. لا تمدّ الشعار، ولا
  تعيد تلوينه، ولا تُضِف ظلالاً أو حدوداً.

## الشخصية

تمتلك جنّي شخصيّة ثلاثيّة الأبعاد رسميّة (موصّل بشَعر برتقالي)
في 42 وضعيّة جاهزة تحت `https://gini.iq/brand/mascots/`. أسماء
الملفّات تتبع نمط `NN-pose-name.png` (مثلاً
`01-front-view.png`, `30-delivery-box.png`). استخدمها في
الحملات، ووسائل التواصل الاجتماعي، والمدوّنات. لا ترسمها من جديد،
ولا تعيد تلوينها، ولا تولّد وضعيّات جديدة بنماذج التصوير —
استخدم الـPNG الرسميّة فقط.

## نظام التصميم — اسكيومورفية حديثة (الأداة الدقيقة)

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

**القواعد الأساسية:**
- مصدر ضوء افتراضي واحد أعلى‑يسار. الأسطح المرفوعة تحصل على خط إضاءة علوي داخلي (inset 0 1px 0 أبيض)، ظل تماس قصير تحتها، وظل محيطي ناعم أبعد. الأسطح الغائرة تعكس المنطق: ظل داخلي داكن من الأعلى وشفة مضيئة من الأسفل.
- **منطق مادي حقيقي** — قبل تصميم أي عنصر نسأل: لو كان جسماً حقيقياً كيف سيتصرف؟ الزر يُضغط، المفتاح ينزلق، الحقل غائر، البطاقة تجلس فوق السطح، التبويب المختار مغروس في سكته.
- **مصدر ضوء واحد** — الضوء يأتي من الأعلى‑يسار بميل أمامي خفيف في كل الشاشات. كل ظل وكل حافة مضيئة تحترم هذا الاتجاه، فتتماسك الواجهة كجسم واحد.
- **ضبط النفس قبل الإبهار** — أربع عائلات خامات فقط، ثمانية مستويات ارتفاع فقط، حبيبات سطح تُحسّ ولا تُلاحظ. التسلسل الهرمي للعمق أهم من كمية الظلال.
- **تسلسل عمق واضح** — القاعدة ← المناطق الغائرة الوظيفية ← أسطح المحتوى المرفوعة ← التحكّمات المادية ← الطبقات العائمة. يفهمها المستخدم لا شعورياً.
- **الوضوح يفوز دائماً** — الطباعة تبقى حديثة ونظيفة بلا ظلال نصية، والكثافة المعلوماتية محفوظة. عندما يتعارض الجمال مع القراءة نختار القراءة مع لمسة مادية راقية.
- **الوصول لا يُساوَم عليه** — الحالة لا تُنقل بالظل وحده: حلقة تركيز مرئية على كل عنصر، خصائص ARIA على المجزّآت والقوائم، أهداف لمس ≥ 44px، واحترام تفضيل تقليل الحركة.

**الخامات (استخدم الصنف الجاهز، لا تخترع ظلالاً):**
- بوليمر مطفأ → `body / .skeu-well` — قاعدة الصفحة، الصواني والآبار الغائرة، حقول الإدخال
- سيراميك مرفوع → `.skeu-panel / .skeu-panel-2 / .skeu-rail / .skeu-dialog` — البطاقات، اللوحات، سكة التنقل، النوافذ الحوارية، الأزرار الثانوية
- برتقالي مؤكسد → `.skeu-btn-primary / .skeu-tile / .skeu-tab-active / .skeu-chip-solid` — الزر الأساسي، بلاطات الأيقونات، التبويب النشط، الشارات الصلبة، المفتاح المفعّل
- غرافيت → `.skeu-dark / .skeu-btn-dark` — الفوتر، نوافذ الكود، كتل الدعوة الداكنة، عناصر التحكم عليها

**مستويات الارتفاع:** غائر (`.skeu-well`) · بئر (`.skeu-input / .skeu-well-soft`) · مستوٍ (`.skeu-btn-ghost / .skeu-list-item`) · مرفوع 1 (`.skeu-panel`) · مرفوع 2 (`.skeu-panel-2 / .skeu-rail`) · عائم (`.skeu-floating`) · طبقة علوية (`.skeu-dialog`) · مضغوط (`:active / .skeu-tab-active`)
**الأقطار:** 6px الشرائح الصغيرة والوسوم · 10px الأزرار القياسية وحقول الإدخال والتحكمات الصغيرة · 14px البلاطات والتبويبات · 20px البطاقات واللوحات · 26px النوافذ الحوارية وسكة التنقل

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

المرجع الكامل: https://gini.iq/brand#design-system — التنفيذ الحي: app/globals.css

## مكتبة المكوّنات — 64 مكوّناً جاهزاً للنسخ

التثبيت بسطر واحد: `<link rel="stylesheet" href="https://gini.iq/skeu.css">` (أو `@import url("https://gini.iq/skeu.css");`)، ويُقرن بـ `https://gini.iq/brand.css` للوحة الألوان. الأصناف تعمل مع HTML عادي أو React أو Vue أو Svelte أو أي إطار — لا تبعيّات. الاتجاه من اليمين إلى اليسار مدعوم تلقائياً عبر dir="rtl". أدوات التخطيط (h-10, px-4, gap-2…) هي Tailwind ويمكن استبدالها بـ CSS خاص بك.

**الإجراءات**
- **الزر الأساسي — ثلاثة أحجام** — `skeu-btn`, `skeu-btn-primary` — الزر المؤكسد بارتفاع 32 / 40 / 44px. الحجم يتحدد بأدوات التخطيط فقط، الخامة واحدة.
- **عائلة الأزرار** — `skeu-btn-secondary`, `skeu-btn-tint`, `skeu-btn-ghost`, `skeu-btn-destructive`, `skeu-btn-dark` — ثانوي سيراميكي، مصبوغ، شبحي، حذف، وداكن للأسطح الغرافيتية.
- **زر أيقونة** — `skeu-btn`, `skeu-btn-secondary`, `skeu-btn-primary` — مربع 40px بأيقونة فقط — لا تنسَ aria-label.
- **زر بأيقونة أمامية** — `skeu-btn`, `skeu-btn-primary` — الأيقونة على جهة البداية، والنص بعدها — يقلب تلقائياً في RTL.
- **زر في حالة تحميل** — `skeu-btn`, `skeu-btn-primary` — مؤشر دوران داخل الزر مع aria-busy وتعطيل النقر.
- **زر معطّل** — `skeu-btn` — شفافية 55% وإشباع أقل وبلا حركة — الخاصية disabled تكفي.
- **مجموعة أزرار / زر منقسم** — `skeu-btn-secondary`, `skeu-btn-primary` — مفاتيح متلاصقة بقطر مشترك، والزر المنقسم يفصل الإجراء الرئيسي عن قائمته.
- **زر عائم (FAB)** — `skeu-btn`, `skeu-btn-primary`, `shadow-floating` — زر دائري مرفوع للإجراء الأهم على الشاشة — يعيش في المستوى العائم.

**النماذج**
- **حقل نصي مع تسمية ومساعدة وخطأ** — `skeu-input`, `is-invalid` — الحقل بئر غائر؛ حالة الخطأ تضيف is-invalid ورسالة مرتبطة عبر aria-describedby.
- **حقل بأيقونة أمامية** — `skeu-input` — الأيقونة مثبتة على جهة البداية بخصائص منطقية (start-3 / ps-9).
- **حقل بحث** — `skeu-input`, `skeu-chip-neutral` — حقل مستدير مع أيقونة بحث واختصار لوحة مفاتيح على جهة النهاية.
- **قائمة اختيار** — `skeu-input` — select أصلي داخل بئر غائر مع سهم مرسوم يدوياً على جهة النهاية.
- **منطقة نص** — `skeu-input` — نفس البئر بارتفاع حر وعدّاد أحرف أسفلها.
- **قائمة صناديق اختيار** — `skeu-check`, `skeu-well-soft` — صفوف غائرة ناعمة، كل صف label كامل ليكون هدف اللمس ≥ 44px.
- **مجموعة راديو** — `skeu-check`, `skeu-radio`, `skeu-panel`, `skeu-panel-selected` — خيارات كبطاقات؛ البطاقة المختارة تُغرس بحافة برتقالية (skeu-panel-selected).
- **صف مفتاح** — `skeu-toggle`, `skeu-panel` — مفتاح ميكانيكي role=switch مع aria-checked؛ الإبهام ينزلق 20px.
- **تحكم مجزّأ** — `skeu-well`, `skeu-tab`, `skeu-tab-active` — مفاتيح مرفوعة داخل بئر؛ المفتاح النشط مغروس بلون أغمق (skeu-tab-active).
- **شريط تمرير** — `skeu-well`, `skeu-meter` — range أصلي بلون التمييز داخل بئر، مع قراءة قيمة في عدّاد.
- **منطقة إسقاط ملفات** — `skeu-well`, `skeu-tile-soft`, `skeu-btn-secondary` — بئر غائر بحد متقطع داخلي وبلاطة أيقونة، والإدخال الحقيقي مخفي بصرياً.
- **صف رمز التحقق (OTP)** — `skeu-input` — ست خلايا غائرة بخانة واحدة، اتجاه LTR دائماً للأرقام.
- **حقل تاريخ** — `skeu-input` — input[type=date] أصلي في نفس البئر — يحصل على منتقي المتصفح مجاناً.
- **تخطيط نموذج بعمودين** — `skeu-panel`, `skeu-input`, `skeu-btn-primary`, `skeu-btn-ghost` — لوح مرفوع، شبكة عمود واحد على الموبايل وعمودين من sm، وأزرار في صف أسفل.
- **ملخص أخطاء النموذج** — `skeu-alert`, `skeu-alert-error` — تنبيه خطأ مرفوع أعلى النموذج يجمع الحقول الناقصة بروابط تقفز إليها.

**التنقّل**
- **شريط تنقّل (سكة)** — `skeu-rail`, `skeu-tab`, `skeu-tab-active`, `skeu-btn-primary` — سكة سيراميكية مصنفرة: شعار، روابط، والإجراء الأساسي على جهة النهاية.
- **مسار التنقّل** — `skeu-chip-neutral`, `skeu-chip` — شرائح سيراميكية مفصولة بأسهم؛ الصفحة الحالية aria-current.
- **تبويبات — خطية ومجزّأة** — `skeu-divider`, `skeu-tab`, `skeu-tab-soft-active` — الخطية للصفحات (خط مضيء تحت النشط)، والمجزّأة للفلاتر.
- **ترقيم الصفحات** — `skeu-tab`, `skeu-tab-active`, `skeu-btn-secondary` — مفاتيح مربعة 36px؛ الصفحة الحالية مغروسة، والسابق/التالي أزرار أيقونة.
- **خطوات التقدّم** — `skeu-chip-success`, `skeu-tile`, `skeu-tile-soft`, `skeu-track`, `skeu-fill` — الخطوة المنجزة بلاطة خضراء، الحالية مؤكسدة، والقادمة بئر غائر — الخط بينها مسار تقدم.
- **قائمة جانبية** — `skeu-panel`, `skeu-list-item`, `skeu-well-accent` — صفوف مستوية ترتفع عند التحويم (skeu-list-item)؛ العنصر النشط بئر مصبوغ.
- **شريط تبويبات سفلي للموبايل** — `skeu-rail`, `skeu-tile`, `skeu-tile-soft` — سكة ثابتة أسفل الشاشة بأربع وجهات؛ الوجهة النشطة بلاطة مؤكسدة.
- **زر رجوع** — `skeu-btn`, `skeu-btn-ghost` — زر شبحي بسهم يقلب في RTL عبر -scale-x-100 تحت [dir=rtl].

**عرض البيانات**
- **بلاطة مؤشر أداء** — `skeu-meter` — قارئ أرقام (skeu-meter): تسمية صغيرة، رقم كبير جدولي، وسطر مساعد.
- **صف إحصاء مع شريحة فرق** — `skeu-meter`, `skeu-chip-success`, `skeu-chip-neutral` — ثلاثة قوارئ في شبكة، لكل منها شريحة خضراء أو محايدة للفرق.
- **بطاقة منتج** — `skeu-panel`, `skeu-panel-interactive`, `skeu-tile-ceramic`, `skeu-chip-solid`, `skeu-btn-primary` — لوح تفاعلي: صورة في بلاطة سيراميكية، شارة، سعر بالدينار، وزر إضافة للسلة.
- **بطاقة تسعير** — `skeu-panel-2`, `skeu-chip-solid`, `skeu-btn-primary` — لوح مرفوع 2 مع شارة «الأكثر طلباً»، سعر كبير، قائمة مزايا، وزر أساسي.
- **بطاقة ميزة** — `skeu-panel`, `skeu-tile` — بلاطة أيقونة مؤكسدة، عنوان، وصف قصير — الوحدة الأساسية لأي شبكة مزايا.
- **بطاقة شهادة** — `skeu-panel`, `skeu-tile-ceramic` — اقتباس، نجوم، وصف المتحدث مع صورة رمزية سيراميكية.
- **بطاقة مستخدم + مجموعة صور رمزية** — `skeu-panel`, `skeu-tile`, `skeu-tile-ceramic`, `skeu-chip-neutral` — صورة رمزية بحرفين، اسم ودور، ومجموعة صور متراكبة بحد أبيض.
- **جدول مع رأس وصفوف وإجراءات** — `skeu-table`, `skeu-chip-success`, `skeu-chip`, `skeu-btn-ghost` — skeu-table: رأس مرفوع لاصق، جسم غائر، صفوف تُضاء عند التحويم بحافة برتقالية.
- **قائمة وصفية** — `skeu-well-soft` — أزواج مفتاح/قيمة في بئر ناعم بفواصل محفورة — لتفاصيل الطلب والفواتير.
- **خط زمني** — `skeu-chip-success`, `skeu-tile`, `skeu-tile-soft`, `skeu-divider` — عمود نقاط: منجزة (خضراء)، حالية (مؤكسدة نابضة)، قادمة (بئر).
- **الشارات والشرائح** — `skeu-chip`, `skeu-chip-solid`, `skeu-chip-neutral`, `skeu-chip-success` — أربع خامات: مصبوغة، صلبة، محايدة، نجاح — مع شريحة عدّاد وشريحة قابلة للإزالة.
- **شريط تقدّم + تقدّم دائري** — `skeu-track`, `skeu-fill` — مسار غائر وتعبئة مؤكسدة؛ الدائري SVG بنفس اللون مع قراءة في المنتصف.
- **عدّاد / مقياس** — `skeu-meter` — نصف دائرة داخل قارئ أرقام — لمعدلات الرضا أو الطاقة أو الحصص.
- **حالة فارغة** — `skeu-well`, `skeu-tile-soft`, `skeu-btn-primary` — بئر غائر بحد متقطع، بلاطة أيقونة مصبوغة، نص قصير، وإجراء واحد.
- **مجموعة هياكل تحميل** — `skeu-panel`, `skeu-skeleton` — كتل غائرة بمسح ضوئي، بنفس هندسة البطاقة التي ستحل محلها.
- **صفوف قائمة بأسهم** — `skeu-panel`, `skeu-list-item`, `skeu-tile-soft` — لوح يحوي صفوفاً قابلة للنقر بأيقونة، عنوان، وصف، وسهم يقلب في RTL.

**التغذية الراجعة والطبقات**
- **التنبيهات الدلالية الأربعة** — `skeu-alert`, `skeu-alert-success`, `skeu-alert-error`, `skeu-alert-warning`, `skeu-alert-info` — جسم نظام مرفوع بحافة ملونة على جهة البداية — نجاح، خطأ، تحذير، معلومة.
- **توست** — `skeu-floating`, `skeu-chip-success`, `animate-skeu-pop` — تنبيه عائم قصير بأيقونة وزر إجراء وإغلاق، يظهر بـ animate-skeu-pop.
- **لافتة مضمّنة** — `skeu-well-accent` — بئر مصبوغ بعرض كامل للإعلانات داخل الصفحة، مع رابط وإغلاق.
- **نافذة حوارية (حيّة)** — `skeu-backdrop`, `skeu-dialog`, `animate-skeu-dialog`, `skeu-btn-primary`, `skeu-btn-secondary` — خلفية معتمة + لوح طبقة علوية بـ animate-skeu-dialog؛ Escape يغلق والتركيز محبوس داخلها.
- **قائمة منسدلة (حيّة)** — `skeu-floating`, `skeu-list-item`, `animate-skeu-pop`, `skeu-divider` — سطح عائم بـ animate-skeu-pop، عناصر role=menuitem تصعد عند التحويم، وعنصر حذف أحمر.
- **تلميح** — `skeu-dark` — سطح غرافيتي صغير فوق العنصر، مرتبط عبر aria-describedby.
- **نافذة منبثقة** — `skeu-floating`, `animate-skeu-pop`, `skeu-btn-tint` — سطح عائم بمحتوى غني (عنوان، نص، إجراء) مرتبط بزر بـ aria-expanded.
- **حوار تأكيد (حيّ)** — `skeu-backdrop`, `skeu-dialog`, `animate-skeu-dialog`, `skeu-btn-destructive` — نفس النافذة الحوارية مع بلاطة تحذير وزر حذف أحمر — للإجراءات غير القابلة للتراجع.
- **لوح سفلي (حيّ)** — `skeu-backdrop`, `skeu-dialog`, `animate-skeu-dialog` — نافذة حوارية مثبتة أسفل الشاشة بمقبض سحب — للموبايل.

**التجارة**
- **حبوب حالة الطلب** — `skeu-chip`, `skeu-chip-solid`, `skeu-chip-success`, `skeu-chip-neutral` — الأربع حالات القياسية في جنّي: قيد التجهيز، جاري التوصيل، تم التسليم، ملغى.
- **سطر في السلة** — `skeu-panel`, `skeu-tile-ceramic`, `skeu-btn-secondary`, `skeu-btn-ghost` — صورة، اسم، خيار، عدّاد كمية، سعر السطر، وزر حذف شبحي.
- **سعر مع خصم** — `skeu-chip-success` — السعر الحالي بارز، السعر القديم مشطوب، ونسبة الخصم في شريحة نجاح.
- **عدّاد كمية** — `skeu-btn-secondary`, `skeu-input` — زران سيراميكيان يحيطان ببئر قراءة؛ الحد الأدنى يعطّل زر النقصان.
- **خط توصيل أفقي** — `skeu-panel`, `skeu-chip-success`, `skeu-tile`, `skeu-tile-soft`, `skeu-track`, `skeu-fill` — ثلاث محطات أفقية بمسار تقدم بينها — نسخة الموبايل من الخط الزمني.
- **بطاقة رأس التاجر** — `skeu-panel-2`, `skeu-tile-ceramic`, `skeu-chip-success`, `skeu-btn-primary` — شعار في بلاطة سيراميكية، اسم، شارة توثيق، تقييم، وزر متابعة.
- **صف طريقة الدفع** — `skeu-panel`, `skeu-panel-selected`, `skeu-check`, `skeu-radio`, `skeu-tile-ceramic` — خيارات دفع كبطاقات راديو: Qi Card، ZainCash، الدفع عند الاستلام.
- **شريحة كوبون / نقاط ولاء** — `skeu-input`, `skeu-btn-tint`, `skeu-chip-solid`, `skeu-chip` — حقل كوبون مع زر تطبيق، وشريحة نقاط ولاء مؤكسدة برصيد جدولي.

العيّنات الحيّة مع الكود القابل للنسخ: https://gini.iq/brand#components

عندما تحتاج زراً أو حقلاً أو بطاقة أو جدولاً أو نافذة حوارية أو توست
أو حبّة حالة طلب أو سطر سلة، ابدأ من مقتطف المكتبة المطابق أعلاه
(كود HTML الكامل لكل مكوّن في https://gini.iq/brand.md تحت «مكتبة
المكوّنات») بدل اختراع بنية جديدة.

## المصادر القياسيّة

ارجع إليها عند أيّ التباس:

- بيان العلامة (JSON): https://gini.iq/brand.json
- كتاب العلامة (Markdown): https://gini.iq/brand.md
- متغيّرات CSS الجاهزة: https://gini.iq/brand.css
- أصناف المكوّنات (كل أصناف skeu-* والتوكنات): https://gini.iq/skeu.css
- Tailwind v4 tokens: https://gini.iq/brand.tailwind.css
- W3C design tokens: https://gini.iq/brand.tokens.json
- ملفّات الشعار: https://gini.iq/brand/
- حزمة الشخصية: https://gini.iq/brand/mascots/

## الترخيص

أصول العلامة مرخّصة للاستخدام التحريريّ والشركاء المعتمدين فقط. لا
تُولّد منتجات وهميّة، أو إعلانات وهميّة، أو أيّ شيء يُوحي بدعم لم
تمنحه جنّي. للتعاون التجاريّ راسل `info@gini.iq`.