{ "$schema": "https://gini.iq/schemas/brand-manifest.json", "manifestVersion": "1.2.0", "generatedAt": "2026-09-01T00:00:00.000Z", "brand": { "name": { "primary": "GINI", "legal": "GINI", "bilingual": "GINI (جنّي)" }, "localizedName": { "ar": "جنّي", "en": "GINI" }, "slug": "gini", "url": "https://gini.iq", "canonical": "https://gini.iq/en/brand", "alternates": { "ar": "https://gini.iq/brand", "en": "https://gini.iq/en/brand" }, "locale": "en", "supportedLocales": [ "ar-IQ", "en-US" ], "tagline": { "primary": "The Iraqi gateway to global brands.", "localized": { "ar": "الواجهة العراقية للعلامات العالمية.", "en": "The Iraqi gateway to global brands." } }, "description": { "short": "An Iraqi digital commerce platform connecting shoppers to the world's best brands — with warranty and local service.", "long": "GINI is an Iraqi market automation and digital commerce company founded in 2023, connecting merchants, service providers, delivery networks, and payment systems within a unified digital ecosystem. GINI provides tools for business management, product and service display, payment processing, and order management — enabling businesses and merchants to grow and reach millions of users efficiently. Headquartered in Baghdad, GINI serves merchants and consumers across every Iraqi province." }, "legalName": "GINI", "industry": "E-commerce & platform services", "foundedYear": 2023, "headquarters": { "city": "Baghdad", "country": "Iraq", "countryCode": "IQ" }, "contact": { "website": "https://gini.iq", "press": "mailto:info@gini.iq", "pressEmail": "info@gini.iq", "social": { "twitter": "@gikicard" } }, "trademark": { "status": "registered", "marks": [ "GINI", "جنّي" ] } }, "identity": { "principles": [ { "id": "mission", "label": "Mission", "title": "We build Iraq's digital commerce infrastructure.", "body": "We connect merchants, service providers, delivery networks, and payment systems within a unified digital ecosystem — providing tools for business management, payments, and order handling so every merchant can reach millions efficiently.", "localized": { "label": { "ar": "الرسالة", "en": "Mission" }, "title": { "ar": "نبني البنية التحتية الرقمية للتجارة في العراق.", "en": "We build Iraq's digital commerce infrastructure." }, "body": { "ar": "نربط التجار ومزودي الخدمات وشركات التوصيل وأنظمة الدفع ضمن منظومة تقنية موحدة، ونوفّر أدوات لإدارة الأعمال ومعالجة المدفوعات وإدارة الطلبات — ليصل كل تاجر إلى ملايين المستخدمين بكفاءة.", "en": "We connect merchants, service providers, delivery networks, and payment systems within a unified digital ecosystem — providing tools for business management, payments, and order handling so every merchant can reach millions efficiently." } } }, { "id": "vision", "label": "Vision", "title": "To empower every merchant to grow digitally.", "body": "A digital ecosystem that small merchants adopt as readily as large ones — easing the transition to the digital economy and unlocking broader markets with smart tools and ready-made infrastructure.", "localized": { "label": { "ar": "الرؤية", "en": "Vision" }, "title": { "ar": "تمكين كلّ تاجر من النمو رقمياً.", "en": "To empower every merchant to grow digitally." }, "body": { "ar": "منظومة رقمية يعتمدها التاجر الصغير قبل الكبير، تُسهّل الانتقال إلى الاقتصاد الرقمي وتفتح أبواب أسواق أوسع بأدوات ذكية وبنية تحتية جاهزة.", "en": "A digital ecosystem that small merchants adopt as readily as large ones — easing the transition to the digital economy and unlocking broader markets with smart tools and ready-made infrastructure." } } }, { "id": "positioning", "label": "Positioning", "title": "Iraq's market automation and digital commerce company.", "body": "Not just an online store. We're an integrated ecosystem that fuses payments, logistics, and business management — serving consumers and merchants alike within a transparent, efficient experience.", "localized": { "label": { "ar": "التموضع", "en": "Positioning" }, "title": { "ar": "شركة أتمتة الأسواق والتجارة الرقمية في العراق.", "en": "Iraq's market automation and digital commerce company." }, "body": { "ar": "لسنا متجراً إلكترونياً فحسب. نحن منظومة متكاملة تدمج المدفوعات واللوجستيات وإدارة الأعمال — تخدم المستهلك والتاجر معاً ضمن تجربة شفافة وفعّالة.", "en": "Not just an online store. We're an integrated ecosystem that fuses payments, logistics, and business management — serving consumers and merchants alike within a transparent, efficient experience." } } }, { "id": "promise", "label": "Promise", "title": "Empower merchants. Simplify commerce.", "body": "Advanced digital tools for merchants of every size, strategic partnerships in payments and delivery, and an ecosystem that creates growth opportunities for all.", "localized": { "label": { "ar": "الوعد", "en": "Promise" }, "title": { "ar": "تمكين التجار. تبسيط التجارة.", "en": "Empower merchants. Simplify commerce." }, "body": { "ar": "أدوات رقمية متقدّمة للتجار الصغار والكبار، شراكات استراتيجية في الدفع والتوصيل، ونظام بيئي يخلق فرص النمو للجميع.", "en": "Advanced digital tools for merchants of every size, strategic partnerships in payments and delivery, and an ecosystem that creates growth opportunities for all." } } } ], "attributes": { "are": [ { "text": "Digital commerce infrastructure", "localized": { "ar": "بنية تحتية رقمية للتجارة", "en": "Digital commerce infrastructure" } }, { "text": "Enablers for merchants of all sizes", "localized": { "ar": "ممكّنون للتجار الصغار والكبار", "en": "Enablers for merchants of all sizes" } }, { "text": "An integrated payments and delivery ecosystem", "localized": { "ar": "منظومة متكاملة للمدفوعات والتوصيل", "en": "An integrated payments and delivery ecosystem" } }, { "text": "Partners in business growth", "localized": { "ar": "شركاء في نمو الأعمال", "en": "Partners in business growth" } } ], "areNot": [ { "text": "Just an online store", "localized": { "ar": "متجراً إلكترونياً فحسب", "en": "Just an online store" } }, { "text": "Disconnected, siloed solutions", "localized": { "ar": "حلولاً منفصلة وغير مترابطة", "en": "Disconnected, siloed solutions" } }, { "text": "A consumer-only platform", "localized": { "ar": "منصّة للمستهلك فقط", "en": "A consumer-only platform" } }, { "text": "A copy of foreign models", "localized": { "ar": "مقلّدون لنماذج خارجية", "en": "A copy of foreign models" } } ] } }, "visual": { "palette": [ { "id": "gini-orange", "role": "primary", "name": { "primary": "GINI Orange", "localized": { "ar": "برتقالي جنّي", "en": "GINI Orange" } }, "description": { "primary": "Primary brand colour — logo, buttons, interactive elements.", "localized": { "ar": "اللون الأساسي للعلامة — الشعار والأزرار والعناصر التفاعلية.", "en": "Primary brand colour — logo, buttons, interactive elements." } }, "hex": "#F05D25", "rgb": { "r": 240, "g": 93, "b": 37, "css": "rgb(240, 93, 37)" }, "hsl": { "h": 17, "s": 87, "l": 54, "css": "hsl(17, 87%, 54%)" }, "cmyk": { "c": 0, "m": 70, "y": 95, "k": 0 }, "pantone": "PANTONE 1655 C", "isLight": false, "recommendedTextColor": "#FFFFFF", "tailwindSuggestion": "orange" }, { "id": "gini-ember", "role": "accent", "name": { "primary": "Ember", "localized": { "ar": "جمري", "en": "Ember" } }, "description": { "primary": "Darker shade for hover states and type on light fills.", "localized": { "ar": "نسخة أعمق للحالات التفاعلية والنصوص على الخلفيات الفاتحة.", "en": "Darker shade for hover states and type on light fills." } }, "hex": "#D94E1A", "rgb": { "r": 217, "g": 78, "b": 26, "css": "rgb(217, 78, 26)" }, "hsl": { "h": 16, "s": 79, "l": 48, "css": "hsl(16, 79%, 48%)" }, "cmyk": { "c": 0, "m": 76, "y": 99, "k": 10 }, "pantone": "PANTONE 1665 C", "isLight": false, "recommendedTextColor": "#FFFFFF", "tailwindSuggestion": "ember" }, { "id": "gini-ink", "role": "text", "name": { "primary": "Night Ink", "localized": { "ar": "حبر ليلي", "en": "Night Ink" } }, "description": { "primary": "Primary text and headlines on light surfaces.", "localized": { "ar": "اللون الأساسي للنصوص والعناوين على الخلفيات الفاتحة.", "en": "Primary text and headlines on light surfaces." } }, "hex": "#1A1A1A", "rgb": { "r": 26, "g": 26, "b": 26, "css": "rgb(26, 26, 26)" }, "hsl": { "h": 0, "s": 0, "l": 10, "css": "hsl(0, 0%, 10%)" }, "cmyk": { "c": 0, "m": 0, "y": 0, "k": 90 }, "pantone": null, "isLight": false, "recommendedTextColor": "#FFFFFF", "tailwindSuggestion": "ink" }, { "id": "gini-cream", "role": "surface", "name": { "primary": "Warm Cream", "localized": { "ar": "كريمي دافئ", "en": "Warm Cream" } }, "description": { "primary": "Primary surface across the site and marketing material.", "localized": { "ar": "الخلفية الأساسية للموقع ومواد التسويق.", "en": "Primary surface across the site and marketing material." } }, "hex": "#FBF6F0", "rgb": { "r": 251, "g": 246, "b": 240, "css": "rgb(251, 246, 240)" }, "hsl": { "h": 33, "s": 58, "l": 96, "css": "hsl(33, 58%, 96%)" }, "cmyk": { "c": 0, "m": 2, "y": 4, "k": 2 }, "pantone": null, "isLight": true, "recommendedTextColor": "#1A1A1A", "tailwindSuggestion": "cream" }, { "id": "gini-sand", "role": "surface", "name": { "primary": "Quiet Sand", "localized": { "ar": "رملي هادئ", "en": "Quiet Sand" } }, "description": { "primary": "Secondary surfaces for cards and section dividers.", "localized": { "ar": "خلفيات ثانوية للبطاقات وفواصل الأقسام.", "en": "Secondary surfaces for cards and section dividers." } }, "hex": "#EFE6DB", "rgb": { "r": 239, "g": 230, "b": 219, "css": "rgb(239, 230, 219)" }, "hsl": { "h": 33, "s": 38, "l": 90, "css": "hsl(33, 38%, 90%)" }, "cmyk": { "c": 0, "m": 4, "y": 8, "k": 6 }, "pantone": null, "isLight": true, "recommendedTextColor": "#1A1A1A", "tailwindSuggestion": "sand" } ], "accessibilityPairs": [ { "id": "ink-on-cream", "foreground": "#1A1A1A", "background": "#FBF6F0", "contrastRatio": "16.2 : 1", "wcag": "AAA", "usage": { "primary": "Default pairing for long-form body copy.", "localized": { "ar": "الخيار الافتراضي للنصوص الطويلة.", "en": "Default pairing for long-form body copy." } } }, { "id": "ink-on-sand", "foreground": "#1A1A1A", "background": "#EFE6DB", "contrastRatio": "14.1 : 1", "wcag": "AAA", "usage": { "primary": "Copy set on sand-toned cards.", "localized": { "ar": "نصوص على البطاقات الرمليّة.", "en": "Copy set on sand-toned cards." } } }, { "id": "white-on-orange", "foreground": "#FFFFFF", "background": "#F05D25", "contrastRatio": "3.3 : 1", "wcag": "AA-large", "usage": { "primary": "Large headings and buttons only (18px+). Avoid body copy.", "localized": { "ar": "عناوين وأزرار كبيرة فقط (18px+). لا تستخدم للنصوص الطويلة.", "en": "Large headings and buttons only (18px+). Avoid body copy." } } }, { "id": "orange-on-cream", "foreground": "#D94E1A", "background": "#FBF6F0", "contrastRatio": "3.9 : 1", "wcag": "AA-large", "usage": { "primary": "Ember for headings and display numbers (18px+) on cream. For body-size text use the text-safe orange #B8410F (5.1 : 1).", "localized": { "ar": "درجة «جمري» للعناوين والأرقام الكبيرة (18px+) على الكريمي. للنصوص بحجم المتن استخدم البرتقالي الآمن #B8410F (5.1 : 1).", "en": "Ember for headings and display numbers (18px+) on cream. For body-size text use the text-safe orange #B8410F (5.1 : 1)." } } }, { "id": "white-on-ink", "foreground": "#FFFFFF", "background": "#1A1A1A", "contrastRatio": "17.4 : 1", "wcag": "AAA", "usage": { "primary": "Dark mode for product pages and video thumbnails.", "localized": { "ar": "الوضع الداكن لصفحات المنتجات والفيديوهات.", "en": "Dark mode for product pages and video thumbnails." } } }, { "id": "cream-on-ink", "foreground": "#FBF6F0", "background": "#1A1A1A", "contrastRatio": "16.2 : 1", "wcag": "AAA", "usage": { "primary": "Warm accent on dark surfaces.", "localized": { "ar": "لمسة دافئة على الخلفيات الداكنة.", "en": "Warm accent on dark surfaces." } } } ] }, "typography": { "primary": { "family": "Rubik", "classification": "Sans-serif", "designer": "Philipp Hubert, Sebastian Fischer (Hubert Jocham)", "googleFontsUrl": "https://fonts.google.com/specimen/Rubik", "weights": [ 400, 500, 700, 800 ], "supportedScripts": [ "Latin", "Arabic", "Hebrew" ] }, "fallbackStack": "Rubik, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", \"Helvetica Neue\", Arial, \"Noto Sans Arabic\", \"Noto Sans\", sans-serif", "scale": [ { "id": "display", "label": { "primary": "Display", "localized": { "ar": "عرض", "en": "Display" } }, "size": "32–48 / 1.15", "weight": "800", "lineHeight": "115%", "usage": { "primary": "Hero titles on marketing pages and campaigns.", "localized": { "ar": "العناوين البطولية في الصفحات الرئيسية والحملات.", "en": "Hero titles on marketing pages and campaigns." } }, "sample": { "ar": "جنّي — شريكك في التجارة", "en": "GINI — your trade partner." } }, { "id": "heading", "label": { "primary": "Heading", "localized": { "ar": "رئيسي", "en": "Heading" } }, "size": "36–48 / 1.15", "weight": "700", "lineHeight": "115%", "usage": { "primary": "Section titles within pages.", "localized": { "ar": "عناوين الأقسام داخل الصفحات.", "en": "Section titles within pages." } }, "sample": { "ar": "سوق واحد يجمع كل ما تحتاج", "en": "One marketplace. Everything you need." } }, { "id": "subheading", "label": { "primary": "Subheading", "localized": { "ar": "فرعي", "en": "Subheading" } }, "size": "20–24 / 1.25", "weight": "600", "lineHeight": "125%", "usage": { "primary": "Card titles and mid-level components.", "localized": { "ar": "عناوين البطاقات والمكوّنات الوسيطة.", "en": "Card titles and mid-level components." } }, "sample": { "ar": "تجربة شراء ذكية، دفع آمن، توصيل سريع.", "en": "Smart shopping, secure payments, fast delivery." } }, { "id": "body", "label": { "primary": "Body", "localized": { "ar": "نصّ", "en": "Body" } }, "size": "16–18 / 1.6", "weight": "400", "lineHeight": "160%", "usage": { "primary": "Paragraphs and general reading copy.", "localized": { "ar": "الفقرات والنصوص العامّة.", "en": "Paragraphs and general reading copy." } }, "sample": { "ar": "نحن نبني منصّة عراقيّة تربط المتسوّق بأفضل العلامات بأسعار عادلة، مع ضمان وخدمة ما بعد البيع من فريق محلّي.", "en": "We build an Iraqi platform that connects shoppers to the best brands at fair prices, with warranty and after-sales service from a local team." } }, { "id": "caption", "label": { "primary": "Caption", "localized": { "ar": "تسمية", "en": "Caption" } }, "size": "12–14 / 1.4", "weight": "600", "lineHeight": "tracked 0.18em", "usage": { "primary": "Section labels and small eyebrow tags.", "localized": { "ar": "تسميات الأقسام والوسوم الصغيرة.", "en": "Section labels and small eyebrow tags." } }, "sample": { "ar": "دليل العلامة • الإصدار الأول", "en": "BRAND GUIDE • VERSION 1" } } ] }, "logos": { "primary": { "id": "primary", "svg": "https://gini.iq/logo.svg" }, "monogram": { "id": "g", "representation": "Capital letter G on brand fill" }, "variants": [ { "id": "wordmark-light", "mode": "color", "background": "light", "title": { "primary": "Primary wordmark", "localized": { "ar": "الشعار الرئيسي", "en": "Primary wordmark" } }, "usage": { "primary": "Default use on light surfaces — marketing and print material.", "localized": { "ar": "الاستخدام الافتراضي على الخلفيات الفاتحة — المواد التسويقية والمطبوعات.", "en": "Default use on light surfaces — marketing and print material." } }, "downloads": { "svg": "https://gini.iq/brand/gini-logo-black.svg", "pngFilename": "gini-logo-wordmark-light.png" } }, { "id": "wordmark-cream", "mode": "color", "background": "cream", "title": { "primary": "On cream surface", "localized": { "ar": "على خلفية كريميّة", "en": "On cream surface" } }, "usage": { "primary": "The default surface across the website and official collateral.", "localized": { "ar": "الخلفية الافتراضيّة عبر الموقع والمواد الرسميّة.", "en": "The default surface across the website and official collateral." } }, "downloads": { "svg": "https://gini.iq/brand/gini-logo-black.svg", "pngFilename": "gini-logo-wordmark-cream.png" } }, { "id": "wordmark-brand", "mode": "mono", "background": "brand", "title": { "primary": "On brand fill", "localized": { "ar": "على اللون الأساسي", "en": "On brand fill" } }, "usage": { "primary": "For campaigns and high-emphasis collateral — we use the all-white wordmark (no orange accent) so the brand colour doesn't repeat on top of itself.", "localized": { "ar": "للحملات الإعلانيّة والعناصر عالية التركيز — نستخدم النسخة البيضاء الخالصة (بلا نقطة برتقاليّة) حتى لا يتكرّر البرتقالي فوق نفسه.", "en": "For campaigns and high-emphasis collateral — we use the all-white wordmark (no orange accent) so the brand colour doesn't repeat on top of itself." } }, "downloads": { "svg": "https://gini.iq/brand/gini-wordmark-mono-white.svg", "pngFilename": "gini-logo-wordmark-brand.png" } }, { "id": "wordmark-dark", "mode": "white", "background": "dark", "title": { "primary": "On dark surface", "localized": { "ar": "على خلفية داكنة", "en": "On dark surface" } }, "usage": { "primary": "Video thumbnails and dark-mode collateral.", "localized": { "ar": "للفيديوهات والإعلانات ذات الخلفيات الداكنة.", "en": "Video thumbnails and dark-mode collateral." } }, "downloads": { "svg": "https://gini.iq/brand/gini-logo-white.svg", "pngFilename": "gini-logo-wordmark-dark.png" } }, { "id": "wordmark-mono-light", "mode": "mono", "background": "pure-white", "title": { "primary": "One-colour — on pure white", "localized": { "ar": "أحاديّة اللون — على أبيض خالص", "en": "One-colour — on pure white" } }, "usage": { "primary": "For one-colour print, or whenever surrounding colours might clash with GINI Orange.", "localized": { "ar": "عند الطباعة أحاديّة اللون أو حين تتواجد ألوان أخرى قد تتعارض مع البرتقالي.", "en": "For one-colour print, or whenever surrounding colours might clash with GINI Orange." } }, "downloads": { "svg": "https://gini.iq/brand/gini-wordmark-mono-black.svg", "pngFilename": "gini-logo-wordmark-mono-light.png" } }, { "id": "wordmark-mono-dark", "mode": "mono", "background": "pure-black", "title": { "primary": "One-colour — on pure black", "localized": { "ar": "أحاديّة اللون — على أسود خالص", "en": "One-colour — on pure black" } }, "usage": { "primary": "Pure black surfaces — or any loud colour that would fight the brand orange.", "localized": { "ar": "الخلفيّات السوداء الخالصة، أو أيّ لون قويّ يتعارض مع البرتقالي.", "en": "Pure black surfaces — or any loud colour that would fight the brand orange." } }, "downloads": { "svg": "https://gini.iq/brand/gini-wordmark-mono-white.svg", "pngFilename": "gini-logo-wordmark-mono-dark.png" } }, { "id": "monogram-light", "mode": "monogram", "background": "cream", "title": { "primary": "Monogram", "localized": { "ar": "الرمز الأحادي", "en": "Monogram" } }, "usage": { "primary": "The condensed GINI mark — watermarks, avatars, and square icons on light surfaces.", "localized": { "ar": "رمز جنّي المختصر — للأختام، الأفاتارات، والأيقونات المربّعة على الخلفيات الفاتحة.", "en": "The condensed GINI mark — watermarks, avatars, and square icons on light surfaces." } }, "downloads": { "svg": "https://gini.iq/brand/gini-monogram-black.svg", "pngFilename": "gini-logo-monogram-light.png" } }, { "id": "monogram-brand", "mode": "mono", "background": "brand", "title": { "primary": "Monogram on brand fill", "localized": { "ar": "الرمز على اللون البرتقالي", "en": "Monogram on brand fill" } }, "usage": { "primary": "Preferred treatment for the app icon and social avatars — we use the all-white monogram (no orange accent) so the brand colour doesn't repeat on top of itself.", "localized": { "ar": "النسخة المفضّلة لأيقونة التطبيق والأفاتار على الشبكات الاجتماعيّة — نستخدم الرمز الأبيض الخالص (بلا نقطة برتقاليّة) حتى لا يتكرّر البرتقالي فوق نفسه.", "en": "Preferred treatment for the app icon and social avatars — we use the all-white monogram (no orange accent) so the brand colour doesn't repeat on top of itself." } }, "downloads": { "svg": "https://gini.iq/brand/gini-monogram-mono-white.svg", "pngFilename": "gini-logo-monogram-brand.png" } }, { "id": "monogram-mono-light", "mode": "mono", "background": "pure-white", "title": { "primary": "Monogram — one-colour on pure white", "localized": { "ar": "الرمز الأحادي — على أبيض خالص", "en": "Monogram — one-colour on pure white" } }, "usage": { "primary": "Single-ink G on pure white — and any surface where the orange accent would clash.", "localized": { "ar": "رمز أحاديّ اللون على الخلفيّات البيضاء الخالصة أو أيّ لون يتعارض مع البرتقالي.", "en": "Single-ink G on pure white — and any surface where the orange accent would clash." } }, "downloads": { "svg": "https://gini.iq/brand/gini-monogram-mono-black.svg", "pngFilename": "gini-logo-monogram-mono-light.png" } }, { "id": "monogram-mono-dark", "mode": "mono", "background": "pure-black", "title": { "primary": "Monogram — one-colour on pure black", "localized": { "ar": "الرمز الأحادي — على أسود خالص", "en": "Monogram — one-colour on pure black" } }, "usage": { "primary": "Single-ink G on pure black — and any saturated colour that would fight the brand orange.", "localized": { "ar": "رمز أحاديّ اللون على الخلفيّات السوداء الخالصة وعلى أيّ لون قويّ يتعارض مع البرتقالي.", "en": "Single-ink G on pure black — and any saturated colour that would fight the brand orange." } }, "downloads": { "svg": "https://gini.iq/brand/gini-monogram-mono-white.svg", "pngFilename": "gini-logo-monogram-mono-dark.png" } } ], "anatomy": [ { "id": "clear-space", "label": { "primary": "Clear space", "localized": { "ar": "المسافة الحرّة", "en": "Clear space" } }, "value": "= 1× G", "note": { "primary": "Maintain a clear space equal to the G-height on every side.", "localized": { "ar": "اترك مساحة حول الشعار بارتفاع حرف G كحدّ أدنى.", "en": "Maintain a clear space equal to the G-height on every side." } } }, { "id": "min-digital", "label": { "primary": "Min. digital size", "localized": { "ar": "الحد الأدنى رقمياً", "en": "Min. digital size" } }, "value": "24 px", "note": { "primary": "Smallest on-screen width where the wordmark stays legible.", "localized": { "ar": "أصغر عرض يحافظ على قراءة الحروف على الشاشة.", "en": "Smallest on-screen width where the wordmark stays legible." } } }, { "id": "min-print", "label": { "primary": "Min. print size", "localized": { "ar": "الحد الأدنى طباعة", "en": "Min. print size" } }, "value": "16 mm", "note": { "primary": "Any printed medium: cards, envelopes, signage.", "localized": { "ar": "لأي وسيط مطبوع: بطاقات، مغلفات، لافتات.", "en": "Any printed medium: cards, envelopes, signage." } } }, { "id": "aspect", "label": { "primary": "Aspect ratio", "localized": { "ar": "نسبة العرض للارتفاع", "en": "Aspect ratio" } }, "value": "≈ 3.1 : 1", "note": { "primary": "Don't alter the ratio — no stretching or squashing.", "localized": { "ar": "لا تعدّل النسبة — مطّها أو ضغطها ممنوع.", "en": "Don't alter the ratio — no stretching or squashing." } } } ], "rules": { "do": [ { "id": "clear-space", "text": "Keep a clear space around the mark equal to the height of the G at minimum.", "localized": { "ar": "اترك مساحة حرة حول الشعار بمقدار ارتفاع حرف G كحدّ أدنى.", "en": "Keep a clear space around the mark equal to the height of the G at minimum." } }, { "id": "min-size", "text": "Don't render the logo narrower than 24px on screen or 16mm in print.", "localized": { "ar": "لا يقلّ عرض الشعار عن 24 بكسل على الشاشة و 16 مم في الطباعة.", "en": "Don't render the logo narrower than 24px on screen or 16mm in print." } }, { "id": "color", "text": "Only use the original orange or the white knocked-out version.", "localized": { "ar": "استخدم النسخة الأصلية باللون البرتقالي أو النسخة البيضاء فقط.", "en": "Only use the original orange or the white knocked-out version." } }, { "id": "white-on-orange", "text": "On any orange surface — or any tint of it — use only the white version of the logo.", "localized": { "ar": "على أيّ خلفية برتقاليّة أو من تدرّجاتها، استخدم النسخة البيضاء من الشعار فقط.", "en": "On any orange surface — or any tint of it — use only the white version of the logo." } }, { "id": "contrast", "text": "Verify background contrast before exporting — check the accessibility table.", "localized": { "ar": "تحقّق من تباين الخلفية قبل التصدير — استخدم الجدول في قسم الوصول.", "en": "Verify background contrast before exporting — check the accessibility table." } } ], "dont": [ { "id": "rotate", "text": "Don't rotate or change the orientation of the logo.", "localized": { "ar": "لا تدوّر الشعار أو تغيّر اتجاهه.", "en": "Don't rotate or change the orientation of the logo." } }, { "id": "black-on-orange", "text": "Never place the black or full-colour logo on an orange surface.", "localized": { "ar": "لا تضع الشعار الأسود أو المحدّد بالألوان على أيّ خلفية برتقاليّة.", "en": "Never place the black or full-colour logo on an orange surface." } }, { "id": "recolor", "text": "Don't replace the colours with anything outside the official palette.", "localized": { "ar": "لا تستبدل ألوان الشعار بألوان أخرى غير معتمدة.", "en": "Don't replace the colours with anything outside the official palette." } }, { "id": "distort", "text": "Don't stretch or squash the logo — preserve its native proportions.", "localized": { "ar": "لا تمطّ الشعار أو تضغطه — حافظ على نسبه الأصلية.", "en": "Don't stretch or squash the logo — preserve its native proportions." } }, { "id": "outline", "text": "Don't add strokes, shadows, or any effects around the logo.", "localized": { "ar": "لا تضف حدوداً أو ظلالاً أو تأثيرات حول الشعار.", "en": "Don't add strokes, shadows, or any effects around the logo." } } ] } }, "voice": { "traits": [ { "id": "warm", "title": { "primary": "Warm", "localized": { "ar": "دافئ", "en": "Warm" } }, "description": { "primary": "We speak in plain language — close to our customers, true to the local culture.", "localized": { "ar": "نتحدّث بلغة بسيطة، قريبة من الناس، تعكس ثقافتنا العراقية.", "en": "We speak in plain language — close to our customers, true to the local culture." } } }, { "id": "confident", "title": { "primary": "Confident", "localized": { "ar": "واثق", "en": "Confident" } }, "description": { "primary": "We make promises we keep, and are honest about what we do and don't know.", "localized": { "ar": "نقدّم وعوداً نفي بها، ونوضح ما نعرف وما لا نعرف.", "en": "We make promises we keep, and are honest about what we do and don't know." } } }, { "id": "sharp", "title": { "primary": "Sharp", "localized": { "ar": "مختصَر", "en": "Sharp" } }, "description": { "primary": "Short sentences, clear ideas. Every word earns its place.", "localized": { "ar": "جمل قصيرة وأفكار واضحة. كل كلمة تستحق مكانها.", "en": "Short sentences, clear ideas. Every word earns its place." } } }, { "id": "optimistic", "title": { "primary": "Optimistic", "localized": { "ar": "متفائل", "en": "Optimistic" } }, "description": { "primary": "We see the opportunity before the obstacle, and build tools that unlock the next step.", "localized": { "ar": "نرى الفرصة قبل العائق، ونصنع أدوات تُسهّل الخطوة التالية.", "en": "We see the opportunity before the obstacle, and build tools that unlock the next step." } } } ], "examples": [ { "id": "hero", "do": { "primary": "We empower merchants to grow digitally — with integrated management, payments, and delivery tools.", "localized": { "ar": "نمكّن التجار من النمو رقمياً — بأدوات إدارة ومدفوعات وتوصيل متكاملة.", "en": "We empower merchants to grow digitally — with integrated management, payments, and delivery tools." } }, "dont": { "primary": "The leading platform delivering an unparalleled shopping experience.", "localized": { "ar": "المنصّة الرائدة التي تقدّم تجربة تسوّق لا مثيل لها.", "en": "The leading platform delivering an unparalleled shopping experience." } }, "rationale": { "primary": "State what we do for merchants and consumers alike, don't claim leadership without proof.", "localized": { "ar": "نوضّح ما نفعله للتجار والمستهلكين معاً، لا ندّعي الريادة بلا دليل.", "en": "State what we do for merchants and consumers alike, don't claim leadership without proof." } } }, { "id": "error", "do": { "primary": "We couldn't complete the payment. Try another card or contact us.", "localized": { "ar": "لم نستطع إتمام الدفع. جرّب بطاقة أخرى أو تواصل معنا.", "en": "We couldn't complete the payment. Try another card or contact us." } }, "dont": { "primary": "An error occurred while processing your request. Please try again later.", "localized": { "ar": "حدث خطأ أثناء معالجة عمليتك. يرجى المحاولة لاحقاً.", "en": "An error occurred while processing your request. Please try again later." } }, "rationale": { "primary": "Explain what happened, then offer the next step. Never leave the customer in limbo.", "localized": { "ar": "اشرح ما حدث، ثم اعرض الخطوة التالية. لا تُعلّق الزبون في المجهول.", "en": "Explain what happened, then offer the next step. Never leave the customer in limbo." } } } ] }, "pattern": { "url": "https://gini.iq/pattern.svg", "description": "A subtle orange pattern inspired by Islamic motifs, used as a light background on marketing material." }, "designSystem": { "version": "1.0.0", "updated": "2026-09", "codename": { "primary": "Precision Instrument", "localized": { "ar": "الأداة الدقيقة", "en": "Precision Instrument" } }, "style": "modern-skeuomorphism", "implementation": "app/globals.css", "reference": "https://gini.iq/en/brand#design-system", "philosophy": { "title": { "primary": "Modern skeuomorphism — an interface with surface, weight and light", "localized": { "ar": "اسكيومورفية حديثة — واجهة لها سطح ووزن وضوء", "en": "Modern skeuomorphism — an interface with surface, weight and light" } }, "oneLiner": { "primary": "Every element is built as if it were a real physical object — raised, pressed, engraved or lit — with the restraint of a contemporary digital product.", "localized": { "ar": "كل عنصر يُبنى كما لو كان جسماً مادياً فعلياً: يُرفع، يُضغط، يُحفر أو يُضاء — لكن بانضباط منتج رقمي معاصر.", "en": "Every element is built as if it were a real physical object — raised, pressed, engraved or lit — with the restraint of a contemporary digital product." } }, "body": { "primary": "GINI's interface takes its cues from premium precision equipment: a matte polymer base, raised ceramic panels, anodized-orange controls with visible thickness, and graphite instrument surfaces. The goal is not the leather-and-wood mimicry of 2010 skeuomorphism but an instinctive understanding of what can be pressed and what sits above what — communicated through light, depth and material, never decoration. It is not neumorphism (grey blobs with two shadows), not glassmorphism, and not \"just shadows\".", "localized": { "ar": "واجهة جنّي مستوحاة من الأجهزة الدقيقة عالية الجودة: سطح بوليمر مطفأ، ألواح سيراميكية مرفوعة، تحكّمات برتقالية مؤكسدة بسماكة ظاهرة، وأسطح غرافيتية للأدوات. الهدف ليس محاكاة الجلد والخشب كما في اسكيومورفية 2010، بل إعطاء المستخدم فهماً غريزياً لما يمكن ضغطه وما يحمل ماذا فوق ماذا — عبر الضوء والعمق والملمس لا عبر الزخرفة. ليست نيومورفية (كتل رمادية بظلين)، وليست زجاجية، وليست مجرد ظلال مضافة.", "en": "GINI's interface takes its cues from premium precision equipment: a matte polymer base, raised ceramic panels, anodized-orange controls with visible thickness, and graphite instrument surfaces. The goal is not the leather-and-wood mimicry of 2010 skeuomorphism but an instinctive understanding of what can be pressed and what sits above what — communicated through light, depth and material, never decoration. It is not neumorphism (grey blobs with two shadows), not glassmorphism, and not \"just shadows\"." } } }, "principles": [ { "id": "physical-logic", "title": { "primary": "Real-world physical logic", "localized": { "ar": "منطق مادي حقيقي", "en": "Real-world physical logic" } }, "body": { "primary": "Before designing any element we ask: if this were a real object, how would it behave? Buttons press, switches slide, fields are recessed, cards sit on the surface, the selected tab is seated in its rail.", "localized": { "ar": "قبل تصميم أي عنصر نسأل: لو كان جسماً حقيقياً كيف سيتصرف؟ الزر يُضغط، المفتاح ينزلق، الحقل غائر، البطاقة تجلس فوق السطح، التبويب المختار مغروس في سكته.", "en": "Before designing any element we ask: if this were a real object, how would it behave? Buttons press, switches slide, fields are recessed, cards sit on the surface, the selected tab is seated in its rail." } } }, { "id": "one-light", "title": { "primary": "One light source", "localized": { "ar": "مصدر ضوء واحد", "en": "One light source" } }, "body": { "primary": "Light always comes from the upper-left, slightly frontal. Every shadow and every highlight respects that direction, so the whole interface reads as one object.", "localized": { "ar": "الضوء يأتي من الأعلى‑يسار بميل أمامي خفيف في كل الشاشات. كل ظل وكل حافة مضيئة تحترم هذا الاتجاه، فتتماسك الواجهة كجسم واحد.", "en": "Light always comes from the upper-left, slightly frontal. Every shadow and every highlight respects that direction, so the whole interface reads as one object." } } }, { "id": "restraint", "title": { "primary": "Restraint over spectacle", "localized": { "ar": "ضبط النفس قبل الإبهار", "en": "Restraint over spectacle" } }, "body": { "primary": "Only four material families, only eight elevation levels, grain that is felt rather than noticed. Depth hierarchy matters more than the quantity of shadows.", "localized": { "ar": "أربع عائلات خامات فقط، ثمانية مستويات ارتفاع فقط، حبيبات سطح تُحسّ ولا تُلاحظ. التسلسل الهرمي للعمق أهم من كمية الظلال.", "en": "Only four material families, only eight elevation levels, grain that is felt rather than noticed. Depth hierarchy matters more than the quantity of shadows." } } }, { "id": "hierarchy", "title": { "primary": "A clear depth hierarchy", "localized": { "ar": "تسلسل عمق واضح", "en": "A clear depth hierarchy" } }, "body": { "primary": "Base → recessed functional areas → raised content surfaces → physical controls → floating overlays. Users understand it without thinking.", "localized": { "ar": "القاعدة ← المناطق الغائرة الوظيفية ← أسطح المحتوى المرفوعة ← التحكّمات المادية ← الطبقات العائمة. يفهمها المستخدم لا شعورياً.", "en": "Base → recessed functional areas → raised content surfaces → physical controls → floating overlays. Users understand it without thinking." } } }, { "id": "clarity", "title": { "primary": "Clarity always wins", "localized": { "ar": "الوضوح يفوز دائماً", "en": "Clarity always wins" } }, "body": { "primary": "Typography stays modern and clean with no text shadows, and information density is preserved. When beauty and legibility conflict, legibility wins — with a premium physical touch.", "localized": { "ar": "الطباعة تبقى حديثة ونظيفة بلا ظلال نصية، والكثافة المعلوماتية محفوظة. عندما يتعارض الجمال مع القراءة نختار القراءة مع لمسة مادية راقية.", "en": "Typography stays modern and clean with no text shadows, and information density is preserved. When beauty and legibility conflict, legibility wins — with a premium physical touch." } } }, { "id": "accessibility", "title": { "primary": "Accessibility is non-negotiable", "localized": { "ar": "الوصول لا يُساوَم عليه", "en": "Accessibility is non-negotiable" } }, "body": { "primary": "State is never communicated by shadow alone: a visible focus rim on every control, ARIA on segmented controls and menus, touch targets ≥ 44px, and reduced-motion respected.", "localized": { "ar": "الحالة لا تُنقل بالظل وحده: حلقة تركيز مرئية على كل عنصر، خصائص ARIA على المجزّآت والقوائم، أهداف لمس ≥ 44px، واحترام تفضيل تقليل الحركة.", "en": "State is never communicated by shadow alone: a visible focus rim on every control, ARIA on segmented controls and menus, touch targets ≥ 44px, and reduced-motion respected." } } } ], "lighting": { "summary": { "primary": "A single virtual light, upper-left. Raised surfaces get an inner top highlight (inset 0 1px 0 white), a short contact shadow beneath, and a softer ambient shadow further out. Recessed surfaces invert the logic: a dark inner shadow at the top and a light lip at the bottom.", "localized": { "ar": "مصدر ضوء افتراضي واحد أعلى‑يسار. الأسطح المرفوعة تحصل على خط إضاءة علوي داخلي (inset 0 1px 0 أبيض)، ظل تماس قصير تحتها، وظل محيطي ناعم أبعد. الأسطح الغائرة تعكس المنطق: ظل داخلي داكن من الأعلى وشفة مضيئة من الأسفل.", "en": "A single virtual light, upper-left. Raised surfaces get an inner top highlight (inset 0 1px 0 white), a short contact shadow beneath, and a softer ambient shadow further out. Recessed surfaces invert the logic: a dark inner shadow at the top and a light lip at the bottom." } }, "rules": [ { "primary": "Every shadow is offset downward (positive y); horizontal offsets are negligible.", "localized": { "ar": "كل ظل يُزاح عمودياً للأسفل (y موجب)، ولا يُزاح أفقياً إلا بدرجة ضئيلة.", "en": "Every shadow is offset downward (positive y); horizontal offsets are negligible." } }, { "primary": "Shadow ink is warm (rgb 37 22 10), never neutral black — it harmonises with the cream base.", "localized": { "ar": "لون الظل حبر دافئ (rgb 37 22 10) لا أسود محايد — ليتناغم مع الخلفية الكريمية.", "en": "Shadow ink is warm (rgb 37 22 10), never neutral black — it harmonises with the cream base." } }, { "primary": "The lit top edge is mandatory on every raised surface; the bottom edge is slightly darker to reveal thickness.", "localized": { "ar": "الحافة العلوية المضيئة إلزامية على كل سطح مرفوع؛ الحافة السفلية أغمق قليلاً لإظهار السماكة.", "en": "The lit top edge is mandatory on every raised surface; the bottom edge is slightly darker to reveal thickness." } }, { "primary": "Gradients are allowed only when they describe curvature, light or material — never decorative gradients.", "localized": { "ar": "التدرجات مسموحة فقط عندما تصف انحناءً أو ضوءاً أو خامة — لا تدرجات زخرفية.", "en": "Gradients are allowed only when they describe curvature, light or material — never decorative gradients." } } ] }, "materials": [ { "id": "polymer", "name": { "primary": "Matte polymer", "localized": { "ar": "بوليمر مطفأ", "en": "Matte polymer" } }, "className": "body / .skeu-well", "usedFor": { "primary": "Page base, recessed trays and wells, input fields", "localized": { "ar": "قاعدة الصفحة، الصواني والآبار الغائرة، حقول الإدخال", "en": "Page base, recessed trays and wells, input fields" } }, "recipe": { "primary": "Warm cream (oklch 0.962 0.012 72) with a radial light from the upper-left, a faint tonal drift toward the bottom, and a fixed grain layer at 4.5% opacity.", "localized": { "ar": "لون كريمي دافئ (oklch 0.962 0.012 72) مع إضاءة شعاعية من الأعلى‑يسار، انحدار لوني خفيف نحو الأسفل، وطبقة حبيبات ثابتة بشفافية 4.5%.", "en": "Warm cream (oklch 0.962 0.012 72) with a radial light from the upper-left, a faint tonal drift toward the bottom, and a fixed grain layer at 4.5% opacity." } } }, { "id": "ceramic", "name": { "primary": "Raised ceramic", "localized": { "ar": "سيراميك مرفوع", "en": "Raised ceramic" } }, "className": ".skeu-panel / .skeu-panel-2 / .skeu-rail / .skeu-dialog", "usedFor": { "primary": "Cards, panels, the navigation rail, dialogs, secondary buttons", "localized": { "ar": "البطاقات، اللوحات، سكة التنقل، النوافذ الحوارية، الأزرار الثانوية", "en": "Cards, panels, the navigation rail, dialogs, secondary buttons" } }, "recipe": { "primary": "Vertical gradient from white to warm white, a 1px edge border, an inner top highlight, and contact + ambient shadows according to the elevation level.", "localized": { "ar": "تدرج عمودي من الأبيض إلى الأبيض الدافئ، حد 1px بلون الحافة، خط إضاءة علوي داخلي، ظل تماس + ظل محيطي حسب مستوى الارتفاع.", "en": "Vertical gradient from white to warm white, a 1px edge border, an inner top highlight, and contact + ambient shadows according to the elevation level." } } }, { "id": "anodized", "name": { "primary": "Anodized orange", "localized": { "ar": "برتقالي مؤكسد", "en": "Anodized orange" } }, "className": ".skeu-btn-primary / .skeu-tile / .skeu-tab-active / .skeu-chip-solid", "usedFor": { "primary": "The primary button, icon tiles, the active tab, solid badges, the ON switch", "localized": { "ar": "الزر الأساسي، بلاطات الأيقونات، التبويب النشط، الشارات الصلبة، المفتاح المفعّل", "en": "The primary button, icon tiles, the active tab, solid badges, the ON switch" } }, "recipe": { "primary": "Gradient from #cc4914 at the top through #c4461a to #b83f16 at the bottom (a slight dome, ≥4.6:1 under white text), #a83c15 border, a 38% white top gloss, a 2px darker bottom band that reveals thickness, and a soft orange outer glow. The pressed state is darker and recessed.", "localized": { "ar": "تدرج من #cc4914 أعلى عبر #c4461a إلى #b83f16 أسفل (قبة خفيفة، ≥4.6:1 مع النص الأبيض)، حد #a83c15، لمعة علوية بيضاء 38%، حزام سفلي داكن 2px يكشف السماكة، وهج برتقالي ناعم للخارج. الحالة المضغوطة أغمق وغائرة.", "en": "Gradient from #cc4914 at the top through #c4461a to #b83f16 at the bottom (a slight dome, ≥4.6:1 under white text), #a83c15 border, a 38% white top gloss, a 2px darker bottom band that reveals thickness, and a soft orange outer glow. The pressed state is darker and recessed." } } }, { "id": "graphite", "name": { "primary": "Graphite", "localized": { "ar": "غرافيت", "en": "Graphite" } }, "className": ".skeu-dark / .skeu-btn-dark", "usedFor": { "primary": "The footer, code windows, dark CTA blocks and the controls on them", "localized": { "ar": "الفوتر، نوافذ الكود، كتل الدعوة الداكنة، عناصر التحكم عليها", "en": "The footer, code windows, dark CTA blocks and the controls on them" } }, "recipe": { "primary": "Gradient from #2a2624 to #171412 with 1.2% horizontal brush lines, a 10% lit top edge, a dark bottom edge, and a deep far shadow.", "localized": { "ar": "تدرج من #2a2624 إلى #171412 مع خطوط فرشاة أفقية بشفافية 1.2%، حافة علوية مضيئة 10%، حافة سفلية داكنة، وظل بعيد عميق.", "en": "Gradient from #2a2624 to #171412 with 1.2% horizontal brush lines, a 10% lit top edge, a dark bottom edge, and a deep far shadow." } } } ], "elevation": [ { "id": "recessed", "name": { "primary": "Recessed", "localized": { "ar": "غائر", "en": "Recessed" } }, "token": "--skeu-shadow-recessed", "className": ".skeu-well", "usedFor": { "primary": "Functional content trays, progress tracks, the soft selected tab", "localized": { "ar": "صواني المحتوى الوظيفية، مسارات التقدم، التبويب المختار (نسخة ناعمة)", "en": "Functional content trays, progress tracks, the soft selected tab" } } }, { "id": "well", "name": { "primary": "Well", "localized": { "ar": "بئر", "en": "Well" } }, "token": "--skeu-shadow-well", "className": ".skeu-input / .skeu-well-soft", "usedFor": { "primary": "Inputs, checkboxes and switches, row lists", "localized": { "ar": "حقول الإدخال، الصناديق والمفاتيح، قوائم الصفوف", "en": "Inputs, checkboxes and switches, row lists" } } }, { "id": "flush", "name": { "primary": "Flush", "localized": { "ar": "مستوٍ", "en": "Flush" } }, "token": "--skeu-shadow-flush", "className": ".skeu-btn-ghost / .skeu-list-item", "usedFor": { "primary": "Menu rows and ghost buttons at rest — they rise on interaction", "localized": { "ar": "عناصر القوائم والأزرار الشبحية قبل التحويم — ترتفع عند التفاعل", "en": "Menu rows and ghost buttons at rest — they rise on interaction" } } }, { "id": "raised-1", "name": { "primary": "Raised 1", "localized": { "ar": "مرفوع 1", "en": "Raised 1" } }, "token": "--skeu-shadow-raised-1", "className": ".skeu-panel", "usedFor": { "primary": "Standard cards, large chips, alerts", "localized": { "ar": "البطاقات القياسية، الشرائح الكبيرة، التنبيهات", "en": "Standard cards, large chips, alerts" } } }, { "id": "raised-2", "name": { "primary": "Raised 2", "localized": { "ar": "مرفوع 2", "en": "Raised 2" } }, "token": "--skeu-shadow-raised-2", "className": ".skeu-panel-2 / .skeu-rail", "usedFor": { "primary": "Hero panels, major containers, the header rail, any card on hover", "localized": { "ar": "لوحات الأبطال، الحاويات الكبرى، سكة الهيدر، البطاقة عند التحويم", "en": "Hero panels, major containers, the header rail, any card on hover" } } }, { "id": "floating", "name": { "primary": "Floating", "localized": { "ar": "عائم", "en": "Floating" } }, "token": "--skeu-shadow-floating", "className": ".skeu-floating", "usedFor": { "primary": "Dropdowns, floating pills, popovers", "localized": { "ar": "القوائم المنسدلة، الرقائق العائمة، النوافذ المنبثقة الصغيرة", "en": "Dropdowns, floating pills, popovers" } } }, { "id": "overlay", "name": { "primary": "Overlay", "localized": { "ar": "طبقة علوية", "en": "Overlay" } }, "token": "--skeu-shadow-overlay", "className": ".skeu-dialog", "usedFor": { "primary": "Dialogs above a lightly dimmed backdrop", "localized": { "ar": "النوافذ الحوارية فوق خلفية معتمة قليلاً", "en": "Dialogs above a lightly dimmed backdrop" } } }, { "id": "pressed", "name": { "primary": "Pressed", "localized": { "ar": "مضغوط", "en": "Pressed" } }, "token": "--skeu-shadow-pressed", "className": ":active / .skeu-tab-active", "usedFor": { "primary": "The instant any control is pressed, and the selected tab", "localized": { "ar": "لحظة الضغط على أي تحكم، والتبويب المختار", "en": "The instant any control is pressed, and the selected tab" } } } ], "radii": [ { "token": "--skeu-radius-xs", "px": 6, "usedFor": { "primary": "Tiny chips and tags", "localized": { "ar": "الشرائح الصغيرة والوسوم", "en": "Tiny chips and tags" } } }, { "token": "--skeu-radius-sm", "px": 10, "usedFor": { "primary": "Standard buttons, inputs, small controls", "localized": { "ar": "الأزرار القياسية وحقول الإدخال والتحكمات الصغيرة", "en": "Standard buttons, inputs, small controls" } } }, { "token": "--skeu-radius-md", "px": 14, "usedFor": { "primary": "Tiles and tabs", "localized": { "ar": "البلاطات والتبويبات", "en": "Tiles and tabs" } } }, { "token": "--skeu-radius-lg", "px": 20, "usedFor": { "primary": "Cards and panels", "localized": { "ar": "البطاقات واللوحات", "en": "Cards and panels" } } }, { "token": "--skeu-radius-xl", "px": 26, "usedFor": { "primary": "Dialogs and the navigation rail", "localized": { "ar": "النوافذ الحوارية وسكة التنقل", "en": "Dialogs and the navigation rail" } } } ], "motion": [ { "title": { "primary": "Button press — 80ms", "localized": { "ar": "ضغط الزر — 80ms", "en": "Button press — 80ms" } }, "body": { "primary": "Drops 1px as the outer shadow turns into an inset; returns within 150ms.", "localized": { "ar": "ينزل 1px ويتحول ظله الخارجي إلى ظل داخلي؛ يعود خلال 150ms.", "en": "Drops 1px as the outer shadow turns into an inset; returns within 150ms." } } }, { "title": { "primary": "Card hover — 260ms", "localized": { "ar": "تحويم البطاقة — 260ms", "en": "Card hover — 260ms" } }, "body": { "primary": "Rises 2px from Raised-1 to Raised-2 on cubic-bezier(0.22, 1, 0.36, 1).", "localized": { "ar": "ترتفع 2px من مستوى «مرفوع 1» إلى «مرفوع 2» بمنحنى cubic-bezier(0.22, 1, 0.36, 1).", "en": "Rises 2px from Raised-1 to Raised-2 on cubic-bezier(0.22, 1, 0.36, 1)." } } }, { "title": { "primary": "Tab selection", "localized": { "ar": "اختيار التبويب", "en": "Tab selection" } }, "body": { "primary": "The new tab sinks 1px with a deeper fill; the previous one springs back.", "localized": { "ar": "التبويب الجديد يغوص 1px بلون أغمق؛ السابق يعود لمستواه.", "en": "The new tab sinks 1px with a deeper fill; the previous one springs back." } } }, { "title": { "primary": "Switch", "localized": { "ar": "المفتاح", "en": "Switch" } }, "body": { "primary": "The thumb slides 20px mechanically over 260ms while the track illuminates.", "localized": { "ar": "الإبهام ينزلق 20px ميكانيكياً خلال 260ms وتُضاء السكة.", "en": "The thumb slides 20px mechanically over 260ms while the track illuminates." } } }, { "title": { "primary": "Dropdown — 180ms", "localized": { "ar": "القائمة المنسدلة — 180ms", "en": "Dropdown — 180ms" } }, "body": { "primary": "Appears with a small lift and fade (animate-skeu-pop).", "localized": { "ar": "تظهر بارتفاع صغير وتلاشٍ (animate-skeu-pop).", "en": "Appears with a small lift and fade (animate-skeu-pop)." } } }, { "title": { "primary": "Dialog — 260ms", "localized": { "ar": "النافذة الحوارية — 260ms", "en": "Dialog — 260ms" } }, "body": { "primary": "Rises from the base with a controlled 0.97 → 1 scale (animate-skeu-dialog).", "localized": { "ar": "ترتفع من القاعدة بتكبير مضبوط 0.97 → 1 (animate-skeu-dialog).", "en": "Rises from the base with a controlled 0.97 → 1 scale (animate-skeu-dialog)." } } }, { "title": { "primary": "Reduced motion", "localized": { "ar": "تقليل الحركة", "en": "Reduced motion" } }, "body": { "primary": "All motion is disabled under prefers-reduced-motion; states remain readable through shape and colour.", "localized": { "ar": "كل الحركات تُطفأ عند prefers-reduced-motion؛ تبقى الحالات مقروءة بالشكل واللون.", "en": "All motion is disabled under prefers-reduced-motion; states remain readable through shape and colour." } } } ], "components": [ { "group": { "primary": "Surfaces", "localized": { "ar": "الأسطح", "en": "Surfaces" } }, "items": [ { "className": "skeu-panel", "name": { "primary": "Raised panel", "localized": { "ar": "لوح مرفوع", "en": "Raised panel" } }, "usedFor": { "primary": "The standard card", "localized": { "ar": "البطاقة القياسية", "en": "The standard card" } } }, { "className": "skeu-panel-2", "name": { "primary": "Raised panel 2", "localized": { "ar": "لوح مرفوع 2", "en": "Raised panel 2" } }, "usedFor": { "primary": "Major containers and heroes", "localized": { "ar": "الحاويات الكبرى والأبطال", "en": "Major containers and heroes" } } }, { "className": "skeu-panel-interactive", "name": { "primary": "Interactive panel", "localized": { "ar": "لوح تفاعلي", "en": "Interactive panel" } }, "usedFor": { "primary": "A clickable card that rises and seats", "localized": { "ar": "بطاقة قابلة للنقر ترتفع وتجلس", "en": "A clickable card that rises and seats" } } }, { "className": "skeu-panel-selected", "name": { "primary": "Selected panel", "localized": { "ar": "لوح مختار", "en": "Selected panel" } }, "usedFor": { "primary": "A locked/selected card pressed in with an accent rim", "localized": { "ar": "بطاقة مقفلة/مختارة مغروسة بحافة برتقالية", "en": "A locked/selected card pressed in with an accent rim" } } }, { "className": "skeu-floating", "name": { "primary": "Floating surface", "localized": { "ar": "سطح عائم", "en": "Floating surface" } }, "usedFor": { "primary": "Dropdowns and pills", "localized": { "ar": "القوائم المنسدلة والرقائق", "en": "Dropdowns and pills" } } }, { "className": "skeu-dialog + skeu-backdrop", "name": { "primary": "Dialog", "localized": { "ar": "نافذة حوارية", "en": "Dialog" } }, "usedFor": { "primary": "The overlay and its backdrop", "localized": { "ar": "الطبقة العلوية وخلفيتها", "en": "The overlay and its backdrop" } } }, { "className": "skeu-rail", "name": { "primary": "Navigation rail", "localized": { "ar": "سكة تنقل", "en": "Navigation rail" } }, "usedFor": { "primary": "The header and sticky toolbars", "localized": { "ar": "الهيدر وأشرطة الأدوات اللاصقة", "en": "The header and sticky toolbars" } } }, { "className": "skeu-well / -soft / -accent", "name": { "primary": "Recessed well", "localized": { "ar": "بئر غائر", "en": "Recessed well" } }, "usedFor": { "primary": "Functional trays and highlighted rows", "localized": { "ar": "الصواني الوظيفية والصفوف المميزة", "en": "Functional trays and highlighted rows" } } }, { "className": "skeu-dark", "name": { "primary": "Graphite surface", "localized": { "ar": "سطح غرافيتي", "en": "Graphite surface" } }, "usedFor": { "primary": "Footer and code windows", "localized": { "ar": "الفوتر ونوافذ الكود", "en": "Footer and code windows" } } } ] }, { "group": { "primary": "Controls", "localized": { "ar": "التحكّمات", "en": "Controls" } }, "items": [ { "className": "skeu-btn-primary", "name": { "primary": "Primary button", "localized": { "ar": "زر أساسي", "en": "Primary button" } }, "usedFor": { "primary": "The main action — anodized orange", "localized": { "ar": "الإجراء الرئيسي — برتقالي مؤكسد", "en": "The main action — anodized orange" } } }, { "className": "skeu-btn-secondary", "name": { "primary": "Secondary button", "localized": { "ar": "زر ثانوي", "en": "Secondary button" } }, "usedFor": { "primary": "Matte ceramic button", "localized": { "ar": "زر سيراميكي مطفأ", "en": "Matte ceramic button" } } }, { "className": "skeu-btn-tint", "name": { "primary": "Tinted button", "localized": { "ar": "زر مصبوغ", "en": "Tinted button" } }, "usedFor": { "primary": "A secondary action with accent identity", "localized": { "ar": "إجراء ثانوي بهوية برتقالية", "en": "A secondary action with accent identity" } } }, { "className": "skeu-btn-ghost", "name": { "primary": "Ghost button", "localized": { "ar": "زر شبحي", "en": "Ghost button" } }, "usedFor": { "primary": "Flush until hovered, then rises", "localized": { "ar": "مستوٍ حتى التحويم ثم يرتفع", "en": "Flush until hovered, then rises" } } }, { "className": "skeu-btn-destructive", "name": { "primary": "Destructive button", "localized": { "ar": "زر حذف", "en": "Destructive button" } }, "usedFor": { "primary": "Machined red", "localized": { "ar": "أحمر مُشغَّل آلياً", "en": "Machined red" } } }, { "className": "skeu-input", "name": { "primary": "Input", "localized": { "ar": "حقل إدخال", "en": "Input" } }, "usedFor": { "primary": "A recessed well with an illuminated focus rim", "localized": { "ar": "بئر غائر بحلقة إضاءة عند التركيز", "en": "A recessed well with an illuminated focus rim" } } }, { "className": "skeu-check / skeu-radio", "name": { "primary": "Checkbox / radio", "localized": { "ar": "صندوق اختيار / راديو", "en": "Checkbox / radio" } }, "usedFor": { "primary": "An engraved well that lights when set", "localized": { "ar": "بئر محفور يُضاء عند التحديد", "en": "An engraved well that lights when set" } } }, { "className": "skeu-toggle", "name": { "primary": "Switch", "localized": { "ar": "مفتاح", "en": "Switch" } }, "usedFor": { "primary": "Recessed track and physical thumb", "localized": { "ar": "سكة غائرة وإبهام مادي", "en": "Recessed track and physical thumb" } } }, { "className": "skeu-tab / skeu-tab-active", "name": { "primary": "Segmented tab", "localized": { "ar": "تبويب مجزّأ", "en": "Segmented tab" } }, "usedFor": { "primary": "A raised key; the active one seated in a deeper fill", "localized": { "ar": "مفتاح مرفوع؛ النشط مغروس بلون أغمق", "en": "A raised key; the active one seated in a deeper fill" } } } ] }, { "group": { "primary": "Small elements", "localized": { "ar": "العناصر الصغيرة", "en": "Small elements" } }, "items": [ { "className": "skeu-tile / -soft / -ceramic", "name": { "primary": "Icon tile", "localized": { "ar": "بلاطة أيقونة", "en": "Icon tile" } }, "usedFor": { "primary": "Anodized / tinted well / white ceramic", "localized": { "ar": "مؤكسدة / بئر مصبوغ / سيراميك أبيض", "en": "Anodized / tinted well / white ceramic" } } }, { "className": "skeu-chip / -solid / -neutral / -success", "name": { "primary": "Chip / badge", "localized": { "ar": "شارة", "en": "Chip / badge" } }, "usedFor": { "primary": "Embossed pills with a hairline edge", "localized": { "ar": "شرائح بارزة بحافة شعرية", "en": "Embossed pills with a hairline edge" } } }, { "className": "skeu-meter", "name": { "primary": "Instrument readout", "localized": { "ar": "قارئ أرقام", "en": "Instrument readout" } }, "usedFor": { "primary": "Stats and KPIs", "localized": { "ar": "الإحصائيات ومؤشرات الأداء", "en": "Stats and KPIs" } } }, { "className": "skeu-table / skeu-row", "name": { "primary": "Table / row", "localized": { "ar": "جدول / صف", "en": "Table / row" } }, "usedFor": { "primary": "Raised header, recessed body, tactile rows", "localized": { "ar": "رأس مرفوع، جسم غائر، صفوف لمسية", "en": "Raised header, recessed body, tactile rows" } } }, { "className": "skeu-alert-*", "name": { "primary": "Alert", "localized": { "ar": "تنبيه", "en": "Alert" } }, "usedFor": { "primary": "Elevated system objects with a semantic edge", "localized": { "ar": "أجسام نظام مرتفعة بحافة دلالية", "en": "Elevated system objects with a semantic edge" } } }, { "className": "skeu-skeleton", "name": { "primary": "Skeleton", "localized": { "ar": "هيكل تحميل", "en": "Skeleton" } }, "usedFor": { "primary": "Recessed blocks with a light sweep", "localized": { "ar": "كتل غائرة بمسح ضوئي", "en": "Recessed blocks with a light sweep" } } }, { "className": "skeu-track / skeu-fill", "name": { "primary": "Progress track", "localized": { "ar": "مسار تقدم", "en": "Progress track" } }, "usedFor": { "primary": "Recessed track and anodized fill", "localized": { "ar": "سكة غائرة وتعبئة مؤكسدة", "en": "Recessed track and anodized fill" } } }, { "className": "skeu-divider", "name": { "primary": "Engraved divider", "localized": { "ar": "فاصل محفور", "en": "Engraved divider" } }, "usedFor": { "primary": "A dark line over a light line", "localized": { "ar": "خط داكن فوق خط مضيء", "en": "A dark line over a light line" } } } ] } ], "library": { "count": 64, "reference": "https://gini.iq/en/brand#components", "stylesheet": "https://gini.iq/skeu.css", "install": { "link": "", "import": "@import url(\"https://gini.iq/skeu.css\");", "pairWith": "https://gini.iq/brand.css", "note": { "primary": "The classes work with plain HTML, React, Vue, Svelte or any framework — zero dependencies. RTL is supported automatically via dir=\"rtl\". Layout utilities (h-10, px-4, gap-2…) are Tailwind and can be swapped for your own CSS.", "localized": { "ar": "الأصناف تعمل مع HTML عادي أو React أو Vue أو Svelte أو أي إطار — لا تبعيّات. الاتجاه من اليمين إلى اليسار مدعوم تلقائياً عبر dir=\"rtl\". أدوات التخطيط (h-10, px-4, gap-2…) هي Tailwind ويمكن استبدالها بـ CSS خاص بك.", "en": "The classes work with plain HTML, React, Vue, Svelte or any framework — zero dependencies. RTL is supported automatically via dir=\"rtl\". Layout utilities (h-10, px-4, gap-2…) are Tailwind and can be swapped for your own CSS." } } }, "groups": [ { "id": "actions", "group": { "primary": "Actions", "localized": { "ar": "الإجراءات", "en": "Actions" } }, "items": [ { "id": "btn-sizes", "name": { "primary": "Primary button — three sizes", "localized": { "ar": "الزر الأساسي — ثلاثة أحجام", "en": "Primary button — three sizes" } }, "description": { "primary": "The anodized button at 32 / 40 / 44px. Size is layout only — the material is the same.", "localized": { "ar": "الزر المؤكسد بارتفاع 32 / 40 / 44px. الحجم يتحدد بأدوات التخطيط فقط، الخامة واحدة.", "en": "The anodized button at 32 / 40 / 44px. Size is layout only — the material is the same." } }, "classes": [ "skeu-btn", "skeu-btn-primary" ], "html": "\n\n" }, { "id": "btn-variants", "name": { "primary": "Button family", "localized": { "ar": "عائلة الأزرار", "en": "Button family" } }, "description": { "primary": "Ceramic secondary, tinted, ghost, destructive, and dark for graphite surfaces.", "localized": { "ar": "ثانوي سيراميكي، مصبوغ، شبحي، حذف، وداكن للأسطح الغرافيتية.", "en": "Ceramic secondary, tinted, ghost, destructive, and dark for graphite surfaces." } }, "classes": [ "skeu-btn-secondary", "skeu-btn-tint", "skeu-btn-ghost", "skeu-btn-destructive", "skeu-btn-dark" ], "html": "\n\n\n\n
\n \n
" }, { "id": "btn-icon", "name": { "primary": "Icon button", "localized": { "ar": "زر أيقونة", "en": "Icon button" } }, "description": { "primary": "A 40px square with only an icon — never without aria-label.", "localized": { "ar": "مربع 40px بأيقونة فقط — لا تنسَ aria-label.", "en": "A 40px square with only an icon — never without aria-label." } }, "classes": [ "skeu-btn", "skeu-btn-secondary", "skeu-btn-primary" ], "html": "\n\n" }, { "id": "btn-leading-icon", "name": { "primary": "Button with leading icon", "localized": { "ar": "زر بأيقونة أمامية", "en": "Button with leading icon" } }, "description": { "primary": "Icon at the start edge, label after it — flips automatically in RTL.", "localized": { "ar": "الأيقونة على جهة البداية، والنص بعدها — يقلب تلقائياً في RTL.", "en": "Icon at the start edge, label after it — flips automatically in RTL." } }, "classes": [ "skeu-btn", "skeu-btn-primary" ], "html": "\n" }, { "id": "btn-loading", "name": { "primary": "Loading button", "localized": { "ar": "زر في حالة تحميل", "en": "Loading button" } }, "description": { "primary": "A spinner inside the control with aria-busy and pointer disabled.", "localized": { "ar": "مؤشر دوران داخل الزر مع aria-busy وتعطيل النقر.", "en": "A spinner inside the control with aria-busy and pointer disabled." } }, "classes": [ "skeu-btn", "skeu-btn-primary" ], "html": "" }, { "id": "btn-disabled", "name": { "primary": "Disabled button", "localized": { "ar": "زر معطّل", "en": "Disabled button" } }, "description": { "primary": "55% opacity, desaturated, no motion — the disabled attribute is enough.", "localized": { "ar": "شفافية 55% وإشباع أقل وبلا حركة — الخاصية disabled تكفي.", "en": "55% opacity, desaturated, no motion — the disabled attribute is enough." } }, "classes": [ "skeu-btn" ], "html": "\n" }, { "id": "btn-group", "name": { "primary": "Button group / split button", "localized": { "ar": "مجموعة أزرار / زر منقسم", "en": "Button group / split button" } }, "description": { "primary": "Adjoining keys sharing one radius; the split button separates the main action from its menu.", "localized": { "ar": "مفاتيح متلاصقة بقطر مشترك، والزر المنقسم يفصل الإجراء الرئيسي عن قائمته.", "en": "Adjoining keys sharing one radius; the split button separates the main action from its menu." } }, "classes": [ "skeu-btn-secondary", "skeu-btn-primary" ], "html": "
\n \n \n \n
\n
\n \n \n
" }, { "id": "fab", "name": { "primary": "Floating action button", "localized": { "ar": "زر عائم (FAB)", "en": "Floating action button" } }, "description": { "primary": "A raised round button for the screen's main action — lives at the floating level.", "localized": { "ar": "زر دائري مرفوع للإجراء الأهم على الشاشة — يعيش في المستوى العائم.", "en": "A raised round button for the screen's main action — lives at the floating level." } }, "classes": [ "skeu-btn", "skeu-btn-primary", "shadow-floating" ], "html": "\n" } ] }, { "id": "forms", "group": { "primary": "Forms", "localized": { "ar": "النماذج", "en": "Forms" } }, "items": [ { "id": "field-text", "name": { "primary": "Text field with label, help and error", "localized": { "ar": "حقل نصي مع تسمية ومساعدة وخطأ", "en": "Text field with label, help and error" } }, "description": { "primary": "The field is a recessed well; the error state adds is-invalid and a message linked via aria-describedby.", "localized": { "ar": "الحقل بئر غائر؛ حالة الخطأ تضيف is-invalid ورسالة مرتبطة عبر aria-describedby.", "en": "The field is a recessed well; the error state adds is-invalid and a message linked via aria-describedby." } }, "classes": [ "skeu-input", "is-invalid" ], "html": "
\n \n \n

As printed on your ID.

\n
\n
\n \n \n

Enter a valid email address.

\n
" }, { "id": "input-icon", "name": { "primary": "Input with leading icon", "localized": { "ar": "حقل بأيقونة أمامية", "en": "Input with leading icon" } }, "description": { "primary": "The icon is pinned to the start edge with logical properties (start-3 / ps-9).", "localized": { "ar": "الأيقونة مثبتة على جهة البداية بخصائص منطقية (start-3 / ps-9).", "en": "The icon is pinned to the start edge with logical properties (start-3 / ps-9)." } }, "classes": [ "skeu-input" ], "html": "" }, { "id": "search", "name": { "primary": "Search field", "localized": { "ar": "حقل بحث", "en": "Search field" } }, "description": { "primary": "A pill-shaped input with a search icon and a keyboard shortcut hint on the end edge.", "localized": { "ar": "حقل مستدير مع أيقونة بحث واختصار لوحة مفاتيح على جهة النهاية.", "en": "A pill-shaped input with a search icon and a keyboard shortcut hint on the end edge." } }, "classes": [ "skeu-input", "skeu-chip-neutral" ], "html": "
\n \n \n ⌘K\n
" }, { "id": "select", "name": { "primary": "Select", "localized": { "ar": "قائمة اختيار", "en": "Select" } }, "description": { "primary": "A native select inside a recessed well with a hand-drawn chevron on the end edge.", "localized": { "ar": "select أصلي داخل بئر غائر مع سهم مرسوم يدوياً على جهة النهاية.", "en": "A native select inside a recessed well with a hand-drawn chevron on the end edge." } }, "classes": [ "skeu-input" ], "html": "" }, { "id": "textarea", "name": { "primary": "Textarea", "localized": { "ar": "منطقة نص", "en": "Textarea" } }, "description": { "primary": "The same well with free height and a character counter below.", "localized": { "ar": "نفس البئر بارتفاع حر وعدّاد أحرف أسفلها.", "en": "The same well with free height and a character counter below." } }, "classes": [ "skeu-input" ], "html": "" }, { "id": "checkbox-list", "name": { "primary": "Checkbox list", "localized": { "ar": "قائمة صناديق اختيار", "en": "Checkbox list" } }, "description": { "primary": "Soft recessed rows; each row is a full label so the touch target is ≥ 44px.", "localized": { "ar": "صفوف غائرة ناعمة، كل صف label كامل ليكون هدف اللمس ≥ 44px.", "en": "Soft recessed rows; each row is a full label so the touch target is ≥ 44px." } }, "classes": [ "skeu-check", "skeu-well-soft" ], "html": "
\n Notifications\n \n \n \n
" }, { "id": "radio-group", "name": { "primary": "Radio group", "localized": { "ar": "مجموعة راديو", "en": "Radio group" } }, "description": { "primary": "Options as cards; the chosen card is pressed in with an accent rim (skeu-panel-selected).", "localized": { "ar": "خيارات كبطاقات؛ البطاقة المختارة تُغرس بحافة برتقالية (skeu-panel-selected).", "en": "Options as cards; the chosen card is pressed in with an accent rim (skeu-panel-selected)." } }, "classes": [ "skeu-check", "skeu-radio", "skeu-panel", "skeu-panel-selected" ], "html": "
\n Delivery speed\n \n \n
" }, { "id": "switch-row", "name": { "primary": "Switch row", "localized": { "ar": "صف مفتاح", "en": "Switch row" } }, "description": { "primary": "A mechanical role=switch with aria-checked; the thumb slides 20px.", "localized": { "ar": "مفتاح ميكانيكي role=switch مع aria-checked؛ الإبهام ينزلق 20px.", "en": "A mechanical role=switch with aria-checked; the thumb slides 20px." } }, "classes": [ "skeu-toggle", "skeu-panel" ], "html": "
\n
\n Push notificationsOrder status on your phone\n \n
\n
\n Marketing emailsOffers and new merchants\n \n
\n
" }, { "id": "segmented", "name": { "primary": "Segmented control", "localized": { "ar": "تحكم مجزّأ", "en": "Segmented control" } }, "description": { "primary": "Raised keys inside a well; the active key is seated in a deeper fill (skeu-tab-active).", "localized": { "ar": "مفاتيح مرفوعة داخل بئر؛ المفتاح النشط مغروس بلون أغمق (skeu-tab-active).", "en": "Raised keys inside a well; the active key is seated in a deeper fill (skeu-tab-active)." } }, "classes": [ "skeu-well", "skeu-tab", "skeu-tab-active" ], "html": "
\n \n \n \n
" }, { "id": "slider", "name": { "primary": "Slider", "localized": { "ar": "شريط تمرير", "en": "Slider" } }, "description": { "primary": "A native range with accent-color inside a well, with a value readout in a meter.", "localized": { "ar": "range أصلي بلون التمييز داخل بئر، مع قراءة قيمة في عدّاد.", "en": "A native range with accent-color inside a well, with a value readout in a meter." } }, "classes": [ "skeu-well", "skeu-meter" ], "html": "
\n \n \n 320K\n
" }, { "id": "dropzone", "name": { "primary": "File drop zone", "localized": { "ar": "منطقة إسقاط ملفات", "en": "File drop zone" } }, "description": { "primary": "A recessed well with an inner dashed border and an icon tile; the real input is visually hidden.", "localized": { "ar": "بئر غائر بحد متقطع داخلي وبلاطة أيقونة، والإدخال الحقيقي مخفي بصرياً.", "en": "A recessed well with an inner dashed border and an icon tile; the real input is visually hidden." } }, "classes": [ "skeu-well", "skeu-tile-soft", "skeu-btn-secondary" ], "html": "" }, { "id": "otp", "name": { "primary": "OTP / code row", "localized": { "ar": "صف رمز التحقق (OTP)", "en": "OTP / code row" } }, "description": { "primary": "Six recessed one-character cells, always LTR for digits.", "localized": { "ar": "ست خلايا غائرة بخانة واحدة، اتجاه LTR دائماً للأرقام.", "en": "Six recessed one-character cells, always LTR for digits." } }, "classes": [ "skeu-input" ], "html": "
\n \n \n \n \n \n \n
" }, { "id": "date-input", "name": { "primary": "Date input", "localized": { "ar": "حقل تاريخ", "en": "Date input" } }, "description": { "primary": "A native input[type=date] in the same well — you get the browser picker for free.", "localized": { "ar": "input[type=date] أصلي في نفس البئر — يحصل على منتقي المتصفح مجاناً.", "en": "A native input[type=date] in the same well — you get the browser picker for free." } }, "classes": [ "skeu-input" ], "html": "
\n \n \n
" }, { "id": "form-layout", "name": { "primary": "Two-column form layout", "localized": { "ar": "تخطيط نموذج بعمودين", "en": "Two-column form layout" } }, "description": { "primary": "A raised panel, one column on phones and two from sm, with the actions in a bottom row.", "localized": { "ar": "لوح مرفوع، شبكة عمود واحد على الموبايل وعمودين من sm، وأزرار في صف أسفل.", "en": "A raised panel, one column on phones and two from sm, with the actions in a bottom row." } }, "classes": [ "skeu-panel", "skeu-input", "skeu-btn-primary", "skeu-btn-ghost" ], "html": "
\n

Shipping address

\n
\n \n \n \n \n \n
\n
\n \n \n
\n
" }, { "id": "validation-summary", "name": { "primary": "Inline validation summary", "localized": { "ar": "ملخص أخطاء النموذج", "en": "Inline validation summary" } }, "description": { "primary": "A raised error alert above the form listing the failing fields with jump links.", "localized": { "ar": "تنبيه خطأ مرفوع أعلى النموذج يجمع الحقول الناقصة بروابط تقفز إليها.", "en": "A raised error alert above the form listing the failing fields with jump links." } }, "classes": [ "skeu-alert", "skeu-alert-error" ], "html": "
\n

Please fix 2 fields before continuing

\n \n
" } ] }, { "id": "navigation", "group": { "primary": "Navigation", "localized": { "ar": "التنقّل", "en": "Navigation" } }, "items": [ { "id": "navbar", "name": { "primary": "Navbar (rail)", "localized": { "ar": "شريط تنقّل (سكة)", "en": "Navbar (rail)" } }, "description": { "primary": "A frosted ceramic rail: logo, links, and the primary action on the end edge.", "localized": { "ar": "سكة سيراميكية مصنفرة: شعار، روابط، والإجراء الأساسي على جهة النهاية.", "en": "A frosted ceramic rail: logo, links, and the primary action on the end edge." } }, "classes": [ "skeu-rail", "skeu-tab", "skeu-tab-active", "skeu-btn-primary" ], "html": "" }, { "id": "breadcrumb", "name": { "primary": "Breadcrumb", "localized": { "ar": "مسار التنقّل", "en": "Breadcrumb" } }, "description": { "primary": "Ceramic chips separated by chevrons; the current page carries aria-current.", "localized": { "ar": "شرائح سيراميكية مفصولة بأسهم؛ الصفحة الحالية aria-current.", "en": "Ceramic chips separated by chevrons; the current page carries aria-current." } }, "classes": [ "skeu-chip-neutral", "skeu-chip" ], "html": "" }, { "id": "tabs", "name": { "primary": "Tabs — underline and segmented", "localized": { "ar": "تبويبات — خطية ومجزّأة", "en": "Tabs — underline and segmented" } }, "description": { "primary": "Underline for pages (a lit line under the active tab), segmented for filters.", "localized": { "ar": "الخطية للصفحات (خط مضيء تحت النشط)، والمجزّأة للفلاتر.", "en": "Underline for pages (a lit line under the active tab), segmented for filters." } }, "classes": [ "skeu-divider", "skeu-tab", "skeu-tab-soft-active" ], "html": "
\n \n \n \n
\n
\n \n \n \n
" }, { "id": "pagination", "name": { "primary": "Pagination", "localized": { "ar": "ترقيم الصفحات", "en": "Pagination" } }, "description": { "primary": "36px square keys; the current page is seated, previous/next are icon buttons.", "localized": { "ar": "مفاتيح مربعة 36px؛ الصفحة الحالية مغروسة، والسابق/التالي أزرار أيقونة.", "en": "36px square keys; the current page is seated, previous/next are icon buttons." } }, "classes": [ "skeu-tab", "skeu-tab-active", "skeu-btn-secondary" ], "html": "" }, { "id": "stepper", "name": { "primary": "Stepper / progress steps", "localized": { "ar": "خطوات التقدّم", "en": "Stepper / progress steps" } }, "description": { "primary": "Done steps are green tiles, the current one anodized, upcoming ones recessed wells — the connector is a progress track.", "localized": { "ar": "الخطوة المنجزة بلاطة خضراء، الحالية مؤكسدة، والقادمة بئر غائر — الخط بينها مسار تقدم.", "en": "Done steps are green tiles, the current one anodized, upcoming ones recessed wells — the connector is a progress track." } }, "classes": [ "skeu-chip-success", "skeu-tile", "skeu-tile-soft", "skeu-track", "skeu-fill" ], "html": "
    \n
  1. Cart
    2. \n
    3. \n
  3. 2Address
    4. \n
    5. \n
  5. 3Payment
    6. \n
" }, { "id": "sidebar", "name": { "primary": "Sidebar list", "localized": { "ar": "قائمة جانبية", "en": "Sidebar list" } }, "description": { "primary": "Flush rows that rise on hover (skeu-list-item); the active item is an accent well.", "localized": { "ar": "صفوف مستوية ترتفع عند التحويم (skeu-list-item)؛ العنصر النشط بئر مصبوغ.", "en": "Flush rows that rise on hover (skeu-list-item); the active item is an accent well." } }, "classes": [ "skeu-panel", "skeu-list-item", "skeu-well-accent" ], "html": "" }, { "id": "bottom-tabs", "name": { "primary": "Bottom mobile tab bar", "localized": { "ar": "شريط تبويبات سفلي للموبايل", "en": "Bottom mobile tab bar" } }, "description": { "primary": "A rail fixed to the bottom with four destinations; the active one is an anodized tile.", "localized": { "ar": "سكة ثابتة أسفل الشاشة بأربع وجهات؛ الوجهة النشطة بلاطة مؤكسدة.", "en": "A rail fixed to the bottom with four destinations; the active one is an anodized tile." } }, "classes": [ "skeu-rail", "skeu-tile", "skeu-tile-soft" ], "html": "" }, { "id": "back-button", "name": { "primary": "Back button", "localized": { "ar": "زر رجوع", "en": "Back button" } }, "description": { "primary": "A ghost button whose arrow mirrors in RTL through -scale-x-100 under [dir=rtl].", "localized": { "ar": "زر شبحي بسهم يقلب في RTL عبر -scale-x-100 تحت [dir=rtl].", "en": "A ghost button whose arrow mirrors in RTL through -scale-x-100 under [dir=rtl]." } }, "classes": [ "skeu-btn", "skeu-btn-ghost" ], "html": "\n \n Back to orders\n" } ] }, { "id": "data", "group": { "primary": "Data display", "localized": { "ar": "عرض البيانات", "en": "Data display" } }, "items": [ { "id": "kpi-tile", "name": { "primary": "KPI tile", "localized": { "ar": "بلاطة مؤشر أداء", "en": "KPI tile" } }, "description": { "primary": "An instrument readout (skeu-meter): small label, big tabular number, helper line.", "localized": { "ar": "قارئ أرقام (skeu-meter): تسمية صغيرة، رقم كبير جدولي، وسطر مساعد.", "en": "An instrument readout (skeu-meter): small label, big tabular number, helper line." } }, "classes": [ "skeu-meter" ], "html": "
\n
Orders today
\n
1,284
\n
Updated 2 min ago
\n
" }, { "id": "stat-delta", "name": { "primary": "Stat row with delta chip", "localized": { "ar": "صف إحصاء مع شريحة فرق", "en": "Stat row with delta chip" } }, "description": { "primary": "Three readouts in a grid, each with a green or neutral delta chip.", "localized": { "ar": "ثلاثة قوارئ في شبكة، لكل منها شريحة خضراء أو محايدة للفرق.", "en": "Three readouts in a grid, each with a green or neutral delta chip." } }, "classes": [ "skeu-meter", "skeu-chip-success", "skeu-chip-neutral" ], "html": "
\n
Revenue
48.2M+12%
\n
Orders
3,410+4%
\n
Returns
1.8%±0
\n
" }, { "id": "product-card", "name": { "primary": "Product card", "localized": { "ar": "بطاقة منتج", "en": "Product card" } }, "description": { "primary": "An interactive panel: image in a ceramic tile, badge, IQD price, add-to-cart.", "localized": { "ar": "لوح تفاعلي: صورة في بلاطة سيراميكية، شارة، سعر بالدينار، وزر إضافة للسلة.", "en": "An interactive panel: image in a ceramic tile, badge, IQD price, add-to-cart." } }, "classes": [ "skeu-panel", "skeu-panel-interactive", "skeu-tile-ceramic", "skeu-chip-solid", "skeu-btn-primary" ], "html": "
\n
\n \"Wireless\n -20%\n
\n

Wireless headphones ANC

\n
89,000 IQD112,000
\n \n
" }, { "id": "pricing-card", "name": { "primary": "Pricing card", "localized": { "ar": "بطاقة تسعير", "en": "Pricing card" } }, "description": { "primary": "A raised-2 panel with a “Most popular” chip, big price, feature list and a primary button.", "localized": { "ar": "لوح مرفوع 2 مع شارة «الأكثر طلباً»، سعر كبير، قائمة مزايا، وزر أساسي.", "en": "A raised-2 panel with a “Most popular” chip, big price, feature list and a primary button." } }, "classes": [ "skeu-panel-2", "skeu-chip-solid", "skeu-btn-primary" ], "html": "
\n Most popular\n
GINI Plus
\n
15,000IQD / month
\n \n \n
" }, { "id": "feature-card", "name": { "primary": "Feature card", "localized": { "ar": "بطاقة ميزة", "en": "Feature card" } }, "description": { "primary": "An anodized icon tile, title, short body — the basic unit of any features grid.", "localized": { "ar": "بلاطة أيقونة مؤكسدة، عنوان، وصف قصير — الوحدة الأساسية لأي شبكة مزايا.", "en": "An anodized icon tile, title, short body — the basic unit of any features grid." } }, "classes": [ "skeu-panel", "skeu-tile" ], "html": "
\n \n

Same-day delivery

\n

Order before 2 pm and receive it tonight anywhere in Baghdad.

\n
" }, { "id": "testimonial", "name": { "primary": "Testimonial card", "localized": { "ar": "بطاقة شهادة", "en": "Testimonial card" } }, "description": { "primary": "Quote, stars, and the speaker row with a ceramic avatar.", "localized": { "ar": "اقتباس، نجوم، وصف المتحدث مع صورة رمزية سيراميكية.", "en": "Quote, stars, and the speaker row with a ceramic avatar." } }, "classes": [ "skeu-panel", "skeu-tile-ceramic" ], "html": "
\n
\n
“Ordered at noon, it was at my door by seven. Never using another app.”
\n
\n SA\n Sara A.Basra · verified buyer\n
\n
" }, { "id": "user-card", "name": { "primary": "User card + avatar group", "localized": { "ar": "بطاقة مستخدم + مجموعة صور رمزية", "en": "User card + avatar group" } }, "description": { "primary": "A two-letter avatar, name and role, and a stacked avatar group with white rings.", "localized": { "ar": "صورة رمزية بحرفين، اسم ودور، ومجموعة صور متراكبة بحد أبيض.", "en": "A two-letter avatar, name and role, and a stacked avatar group with white rings." } }, "classes": [ "skeu-panel", "skeu-tile", "skeu-tile-ceramic", "skeu-chip-neutral" ], "html": "
\n AH\n Ali HassanMerchant · Karrada\n Admin\n
\n
\n MK\n RS\n ZA\n +6\n
" }, { "id": "table", "name": { "primary": "Table with header, rows and actions", "localized": { "ar": "جدول مع رأس وصفوف وإجراءات", "en": "Table with header, rows and actions" } }, "description": { "primary": "skeu-table: a raised sticky header, recessed body, rows that light up on hover with an accent edge.", "localized": { "ar": "skeu-table: رأس مرفوع لاصق، جسم غائر، صفوف تُضاء عند التحويم بحافة برتقالية.", "en": "skeu-table: a raised sticky header, recessed body, rows that light up on hover with an accent edge." } }, "classes": [ "skeu-table", "skeu-chip-success", "skeu-chip", "skeu-btn-ghost" ], "html": "
\n \n \n \n \n \n \n
OrderCustomerStatusTotal
#48213Sara A.Delivered89,000
#48212Omar K.Shipping142,500
\n
" }, { "id": "description-list", "name": { "primary": "Description list", "localized": { "ar": "قائمة وصفية", "en": "Description list" } }, "description": { "primary": "Key/value pairs in a soft well with engraved dividers — for order details and invoices.", "localized": { "ar": "أزواج مفتاح/قيمة في بئر ناعم بفواصل محفورة — لتفاصيل الطلب والفواتير.", "en": "Key/value pairs in a soft well with engraved dividers — for order details and invoices." } }, "classes": [ "skeu-well-soft" ], "html": "
\n
Order
#48213
\n
Placed
12 Sep 2026, 14:02
\n
Payment
Qi Card •• 4821
\n
Total
89,000 IQD
\n
" }, { "id": "timeline", "name": { "primary": "Timeline", "localized": { "ar": "خط زمني", "en": "Timeline" } }, "description": { "primary": "A column of nodes: done (green), current (anodized), upcoming (well).", "localized": { "ar": "عمود نقاط: منجزة (خضراء)، حالية (مؤكسدة نابضة)، قادمة (بئر).", "en": "A column of nodes: done (green), current (anodized), upcoming (well)." } }, "classes": [ "skeu-chip-success", "skeu-tile", "skeu-tile-soft", "skeu-divider" ], "html": "
    \n
  1. Order confirmed
    14:02
    2. \n
  2. Being packed
    Now · Merchant: TechZone
    3. \n
  3. Out for delivery
    4. \n
" }, { "id": "badges", "name": { "primary": "Badges and chips", "localized": { "ar": "الشارات والشرائح", "en": "Badges and chips" } }, "description": { "primary": "Four materials: tinted, solid, neutral, success — plus a counter chip and a dismissible chip.", "localized": { "ar": "أربع خامات: مصبوغة، صلبة، محايدة، نجاح — مع شريحة عدّاد وشريحة قابلة للإزالة.", "en": "Four materials: tinted, solid, neutral, success — plus a counter chip and a dismissible chip." } }, "classes": [ "skeu-chip", "skeu-chip-solid", "skeu-chip-neutral", "skeu-chip-success" ], "html": "New\nFeatured\nDraft\nVerified\n99+\nBasra " }, { "id": "progress", "name": { "primary": "Progress bar + circular progress", "localized": { "ar": "شريط تقدّم + تقدّم دائري", "en": "Progress bar + circular progress" } }, "description": { "primary": "A recessed track with an anodized fill; the ring is an SVG in the same colour with a readout in the middle.", "localized": { "ar": "مسار غائر وتعبئة مؤكسدة؛ الدائري SVG بنفس اللون مع قراءة في المنتصف.", "en": "A recessed track with an anodized fill; the ring is an SVG in the same colour with a readout in the middle." } }, "classes": [ "skeu-track", "skeu-fill" ], "html": "
\n
\n
Uploading68%
\n
\n
\n
\n \n 68%\n
\n
" }, { "id": "gauge", "name": { "primary": "Meter / gauge", "localized": { "ar": "عدّاد / مقياس", "en": "Meter / gauge" } }, "description": { "primary": "A semicircle inside an instrument readout — for satisfaction, capacity or quotas.", "localized": { "ar": "نصف دائرة داخل قارئ أرقام — لمعدلات الرضا أو الطاقة أو الحصص.", "en": "A semicircle inside an instrument readout — for satisfaction, capacity or quotas." } }, "classes": [ "skeu-meter" ], "html": "
\n \n
72%
\n
Fleet capacity
\n
" }, { "id": "empty-state", "name": { "primary": "Empty state", "localized": { "ar": "حالة فارغة", "en": "Empty state" } }, "description": { "primary": "A recessed well with a dashed inner border, a tinted icon tile, short copy and one action.", "localized": { "ar": "بئر غائر بحد متقطع، بلاطة أيقونة مصبوغة، نص قصير، وإجراء واحد.", "en": "A recessed well with a dashed inner border, a tinted icon tile, short copy and one action." } }, "classes": [ "skeu-well", "skeu-tile-soft", "skeu-btn-primary" ], "html": "
\n
\n \n

Your cart is empty

\n

Browse 2,500+ merchants and add something you love.

\n Start shopping\n
\n
" }, { "id": "skeleton", "name": { "primary": "Skeleton set", "localized": { "ar": "مجموعة هياكل تحميل", "en": "Skeleton set" } }, "description": { "primary": "Recessed blocks with a light sweep, in the same geometry as the card they stand in for.", "localized": { "ar": "كتل غائرة بمسح ضوئي، بنفس هندسة البطاقة التي ستحل محلها.", "en": "Recessed blocks with a light sweep, in the same geometry as the card they stand in for." } }, "classes": [ "skeu-panel", "skeu-skeleton" ], "html": "
\n
\n
\n
\n
\n
" }, { "id": "list-rows", "name": { "primary": "List rows with chevrons", "localized": { "ar": "صفوف قائمة بأسهم", "en": "List rows with chevrons" } }, "description": { "primary": "A panel of tappable rows with icon, title, subtitle, and a chevron that mirrors in RTL.", "localized": { "ar": "لوح يحوي صفوفاً قابلة للنقر بأيقونة، عنوان، وصف، وسهم يقلب في RTL.", "en": "A panel of tappable rows with icon, title, subtitle, and a chevron that mirrors in RTL." } }, "classes": [ "skeu-panel", "skeu-list-item", "skeu-tile-soft" ], "html": "" } ] }, { "id": "feedback", "group": { "primary": "Feedback & overlays", "localized": { "ar": "التغذية الراجعة والطبقات", "en": "Feedback & overlays" } }, "items": [ { "id": "alerts", "name": { "primary": "The four semantic alerts", "localized": { "ar": "التنبيهات الدلالية الأربعة", "en": "The four semantic alerts" } }, "description": { "primary": "A raised system object with a coloured start edge — success, error, warning, info.", "localized": { "ar": "جسم نظام مرفوع بحافة ملونة على جهة البداية — نجاح، خطأ، تحذير، معلومة.", "en": "A raised system object with a coloured start edge — success, error, warning, info." } }, "classes": [ "skeu-alert", "skeu-alert-success", "skeu-alert-error", "skeu-alert-warning", "skeu-alert-info" ], "html": "
Saved. Your address is now the default.
\n
Payment failed. The card was declined — try another method.
\n
Low stock. Only 3 left at this price.
\n
Heads up. Deliveries pause during Friday prayer.
" }, { "id": "toast", "name": { "primary": "Toast", "localized": { "ar": "توست", "en": "Toast" } }, "description": { "primary": "A short floating notice with icon, action and dismiss; enters with animate-skeu-pop.", "localized": { "ar": "تنبيه عائم قصير بأيقونة وزر إجراء وإغلاق، يظهر بـ animate-skeu-pop.", "en": "A short floating notice with icon, action and dismiss; enters with animate-skeu-pop." } }, "classes": [ "skeu-floating", "skeu-chip-success", "animate-skeu-pop" ], "html": "
\n \n Added to cartWireless headphones ANC\n \n \n
" }, { "id": "banner", "name": { "primary": "Inline banner", "localized": { "ar": "لافتة مضمّنة", "en": "Inline banner" } }, "description": { "primary": "A full-width accent well for in-page announcements, with a link and dismiss.", "localized": { "ar": "بئر مصبوغ بعرض كامل للإعلانات داخل الصفحة، مع رابط وإغلاق.", "en": "A full-width accent well for in-page announcements, with a link and dismiss." } }, "classes": [ "skeu-well-accent" ], "html": "
\n \n

Free delivery on orders above 50,000 IQD until Friday. Details

\n \n
" }, { "id": "dialog", "name": { "primary": "Modal dialog (live)", "localized": { "ar": "نافذة حوارية (حيّة)", "en": "Modal dialog (live)" } }, "description": { "primary": "A dimmed backdrop + overlay panel with animate-skeu-dialog; Escape closes and focus is trapped inside.", "localized": { "ar": "خلفية معتمة + لوح طبقة علوية بـ animate-skeu-dialog؛ Escape يغلق والتركيز محبوس داخلها.", "en": "A dimmed backdrop + overlay panel with animate-skeu-dialog; Escape closes and focus is trapped inside." } }, "classes": [ "skeu-backdrop", "skeu-dialog", "animate-skeu-dialog", "skeu-btn-primary", "skeu-btn-secondary" ], "html": "
\n
\n

Change delivery address?

\n

Your order will be re-routed to the new address. Delivery time may change.

\n
\n \n \n
\n
\n
" }, { "id": "dropdown", "name": { "primary": "Dropdown menu (live)", "localized": { "ar": "قائمة منسدلة (حيّة)", "en": "Dropdown menu (live)" } }, "description": { "primary": "A floating surface with animate-skeu-pop, role=menuitem rows that rise on hover, and a red destructive item.", "localized": { "ar": "سطح عائم بـ animate-skeu-pop، عناصر role=menuitem تصعد عند التحويم، وعنصر حذف أحمر.", "en": "A floating surface with animate-skeu-pop, role=menuitem rows that rise on hover, and a red destructive item." } }, "classes": [ "skeu-floating", "skeu-list-item", "animate-skeu-pop", "skeu-divider" ], "html": "
\n \n
\n \n \n
\n \n
\n
" }, { "id": "tooltip", "name": { "primary": "Tooltip", "localized": { "ar": "تلميح", "en": "Tooltip" } }, "description": { "primary": "A small graphite surface above the trigger, linked via aria-describedby.", "localized": { "ar": "سطح غرافيتي صغير فوق العنصر، مرتبط عبر aria-describedby.", "en": "A small graphite surface above the trigger, linked via aria-describedby." } }, "classes": [ "skeu-dark" ], "html": "\n \n Delivery fees explained\n" }, { "id": "popover", "name": { "primary": "Popover", "localized": { "ar": "نافذة منبثقة", "en": "Popover" } }, "description": { "primary": "A floating surface with rich content (title, body, action) tied to a trigger with aria-expanded.", "localized": { "ar": "سطح عائم بمحتوى غني (عنوان، نص، إجراء) مرتبط بزر بـ aria-expanded.", "en": "A floating surface with rich content (title, body, action) tied to a trigger with aria-expanded." } }, "classes": [ "skeu-floating", "animate-skeu-pop", "skeu-btn-tint" ], "html": "
\n \n
\n
Balance
\n
2,480 pts
\n

Redeem 1,000 pts for 5,000 IQD off your next order.

\n \n
\n
" }, { "id": "confirm", "name": { "primary": "Confirm dialog (live)", "localized": { "ar": "حوار تأكيد (حيّ)", "en": "Confirm dialog (live)" } }, "description": { "primary": "The same dialog with a warning tile and a red destructive button — for irreversible actions.", "localized": { "ar": "نفس النافذة الحوارية مع بلاطة تحذير وزر حذف أحمر — للإجراءات غير القابلة للتراجع.", "en": "The same dialog with a warning tile and a red destructive button — for irreversible actions." } }, "classes": [ "skeu-backdrop", "skeu-dialog", "animate-skeu-dialog", "skeu-btn-destructive" ], "html": "
\n
\n \n

Cancel this order?

\n

The merchant has already started packing. This can’t be undone.

\n
\n \n \n
\n
\n
" }, { "id": "bottom-sheet", "name": { "primary": "Bottom sheet (live)", "localized": { "ar": "لوح سفلي (حيّ)", "en": "Bottom sheet (live)" } }, "description": { "primary": "A dialog pinned to the bottom of the screen with a drag handle — for phones.", "localized": { "ar": "نافذة حوارية مثبتة أسفل الشاشة بمقبض سحب — للموبايل.", "en": "A dialog pinned to the bottom of the screen with a drag handle — for phones." } }, "classes": [ "skeu-backdrop", "skeu-dialog", "animate-skeu-dialog" ], "html": "
\n
\n \n

Sort by

\n
\n \n \n \n
\n
\n
" } ] }, { "id": "commerce", "group": { "primary": "Commerce", "localized": { "ar": "التجارة", "en": "Commerce" } }, "items": [ { "id": "order-status", "name": { "primary": "Order status pills", "localized": { "ar": "حبوب حالة الطلب", "en": "Order status pills" } }, "description": { "primary": "The four standard GINI states: preparing, out for delivery, delivered, cancelled.", "localized": { "ar": "الأربع حالات القياسية في جنّي: قيد التجهيز، جاري التوصيل، تم التسليم، ملغى.", "en": "The four standard GINI states: preparing, out for delivery, delivered, cancelled." } }, "classes": [ "skeu-chip", "skeu-chip-solid", "skeu-chip-success", "skeu-chip-neutral" ], "html": "Preparing · قيد التجهيز\nOut for delivery · جاري التوصيل\nDelivered · تم التسليم\nCancelled · ملغى" }, { "id": "cart-line", "name": { "primary": "Cart line item", "localized": { "ar": "سطر في السلة", "en": "Cart line item" } }, "description": { "primary": "Thumbnail, name, variant, quantity stepper, line price and a ghost remove button.", "localized": { "ar": "صورة، اسم، خيار، عدّاد كمية، سعر السطر، وزر حذف شبحي.", "en": "Thumbnail, name, variant, quantity stepper, line price and a ghost remove button." } }, "classes": [ "skeu-panel", "skeu-tile-ceramic", "skeu-btn-secondary", "skeu-btn-ghost" ], "html": "
\n \"\"\n
\n
Wireless headphones ANC
\n
Black · 1 year warranty
\n
\n \n 2\n \n
\n
\n
\n
178,000 IQD
\n \n
\n
" }, { "id": "price", "name": { "primary": "Price + discount", "localized": { "ar": "سعر مع خصم", "en": "Price + discount" } }, "description": { "primary": "The current price is bold, the old one struck through, and the discount lives in a success chip.", "localized": { "ar": "السعر الحالي بارز، السعر القديم مشطوب، ونسبة الخصم في شريحة نجاح.", "en": "The current price is bold, the old one struck through, and the discount lives in a success chip." } }, "classes": [ "skeu-chip-success" ], "html": "
\n 89,000 IQD\n 112,000\n Save 23,000\n
\n

Or 3 × 29,667 IQD with installments

" }, { "id": "qty-stepper", "name": { "primary": "Quantity stepper", "localized": { "ar": "عدّاد كمية", "en": "Quantity stepper" } }, "description": { "primary": "Two ceramic keys around a readout well; the minimum disables the decrease key.", "localized": { "ar": "زران سيراميكيان يحيطان ببئر قراءة؛ الحد الأدنى يعطّل زر النقصان.", "en": "Two ceramic keys around a readout well; the minimum disables the decrease key." } }, "classes": [ "skeu-btn-secondary", "skeu-input" ], "html": "
\n \n \n \n
" }, { "id": "delivery-timeline", "name": { "primary": "Delivery timeline", "localized": { "ar": "خط توصيل أفقي", "en": "Delivery timeline" } }, "description": { "primary": "Three horizontal stops with a progress track between them — the mobile form of the timeline.", "localized": { "ar": "ثلاث محطات أفقية بمسار تقدم بينها — نسخة الموبايل من الخط الزمني.", "en": "Three horizontal stops with a progress track between them — the mobile form of the timeline." } }, "classes": [ "skeu-panel", "skeu-chip-success", "skeu-tile", "skeu-tile-soft", "skeu-track", "skeu-fill" ], "html": "
\n
Order #48213Arrives today
\n
    \n
    2. \n
    3. \n
    4. \n
    5. \n
    6. \n
\n
ConfirmedOn the wayDelivered
\n
" }, { "id": "merchant-header", "name": { "primary": "Merchant header card", "localized": { "ar": "بطاقة رأس التاجر", "en": "Merchant header card" } }, "description": { "primary": "Logo in a ceramic tile, name, verified chip, rating, and a follow button.", "localized": { "ar": "شعار في بلاطة سيراميكية، اسم، شارة توثيق، تقييم، وزر متابعة.", "en": "Logo in a ceramic tile, name, verified chip, rating, and a follow button." } }, "classes": [ "skeu-panel-2", "skeu-tile-ceramic", "skeu-chip-success", "skeu-btn-primary" ], "html": "
\n TZ\n
\n

TechZone

Verified
\n
4.8· 1.2K orders · Karrada
\n
\n \n
" }, { "id": "payment-row", "name": { "primary": "Payment method row", "localized": { "ar": "صف طريقة الدفع", "en": "Payment method row" } }, "description": { "primary": "Payment options as radio cards: Qi Card, ZainCash, cash on delivery.", "localized": { "ar": "خيارات دفع كبطاقات راديو: Qi Card، ZainCash، الدفع عند الاستلام.", "en": "Payment options as radio cards: Qi Card, ZainCash, cash on delivery." } }, "classes": [ "skeu-panel", "skeu-panel-selected", "skeu-check", "skeu-radio", "skeu-tile-ceramic" ], "html": "
\n Payment method\n \n \n \n
" }, { "id": "coupon", "name": { "primary": "Coupon / loyalty points chip", "localized": { "ar": "شريحة كوبون / نقاط ولاء", "en": "Coupon / loyalty points chip" } }, "description": { "primary": "A coupon field with an apply button, and an anodized loyalty chip with a tabular balance.", "localized": { "ar": "حقل كوبون مع زر تطبيق، وشريحة نقاط ولاء مؤكسدة برصيد جدولي.", "en": "A coupon field with an apply button, and an anodized loyalty chip with a tabular balance." } }, "classes": [ "skeu-input", "skeu-btn-tint", "skeu-chip-solid", "skeu-chip" ], "html": "
\n \n \n
\n
\n 2,480 pts\n WELCOME10 · -10%\n
" } ] } ] }, "states": [ { "state": { "primary": "Default", "localized": { "ar": "افتراضي", "en": "Default" } }, "rule": { "primary": "Raised in its natural material", "localized": { "ar": "مرفوع بخامته الطبيعية", "en": "Raised in its natural material" } } }, { "state": { "primary": "Hover", "localized": { "ar": "تحويم", "en": "Hover" } }, "rule": { "primary": "Rises 1–2px with stronger highlight", "localized": { "ar": "يرتفع 1–2px وتقوى إضاءته", "en": "Rises 1–2px with stronger highlight" } } }, { "state": { "primary": "Pressed", "localized": { "ar": "ضغط", "en": "Pressed" } }, "rule": { "primary": "Drops 1px, inset shadow, deeper fill", "localized": { "ar": "ينزل 1px، ظل داخلي، لون أغمق", "en": "Drops 1px, inset shadow, deeper fill" } } }, { "state": { "primary": "Focus", "localized": { "ar": "تركيز", "en": "Focus" } }, "rule": { "primary": "A 3px orange illuminated rim — always visible", "localized": { "ar": "حلقة إضاءة برتقالية 3px — دائماً مرئية", "en": "A 3px orange illuminated rim — always visible" } } }, { "state": { "primary": "Selected", "localized": { "ar": "مختار", "en": "Selected" } }, "rule": { "primary": "Seated in its rail with accent fill + ARIA attribute", "localized": { "ar": "مغروس في سكته مع لون تمييز + خاصية ARIA", "en": "Seated in its rail with accent fill + ARIA attribute" } } }, { "state": { "primary": "Disabled", "localized": { "ar": "معطّل", "en": "Disabled" } }, "rule": { "primary": "55% opacity, desaturated, no motion", "localized": { "ar": "شفافية 55%، إشباع أقل، بلا حركة", "en": "55% opacity, desaturated, no motion" } } }, { "state": { "primary": "Loading", "localized": { "ar": "تحميل", "en": "Loading" } }, "rule": { "primary": "Recessed skeletons with a sweep, or a spinner inside the control", "localized": { "ar": "هياكل غائرة بمسح ضوئي أو مؤشر داخل الزر", "en": "Recessed skeletons with a sweep, or a spinner inside the control" } } }, { "state": { "primary": "Error", "localized": { "ar": "خطأ", "en": "Error" } }, "rule": { "primary": "Red edge + soft red rim + a text message", "localized": { "ar": "حافة حمراء + حلقة حمراء خفيفة + رسالة نصية", "en": "Red edge + soft red rim + a text message" } } } ], "methodology": [ { "phase": { "primary": "1 — Audit", "localized": { "ar": "1 — التدقيق", "en": "1 — Audit" } }, "body": { "primary": "Inventory every route, component and repeated pattern before touching a page; understand the product as one system.", "localized": { "ar": "جرد كل المسارات والمكوّنات والأنماط المتكررة قبل لمس أي صفحة، وفهم المنتج كنظام واحد.", "en": "Inventory every route, component and repeated pattern before touching a page; understand the product as one system." } } }, { "phase": { "primary": "2 — Foundation", "localized": { "ar": "2 — الأساس", "en": "2 — Foundation" } }, "body": { "primary": "Tokens, materials, lighting model, shadows, borders, radii, motion — all centralised in globals.css.", "localized": { "ar": "التوكنات، الخامات، نموذج الإضاءة، الظلال، الحدود، الأقطار، الحركة — كلها مركزية في globals.css.", "en": "Tokens, materials, lighting model, shadows, borders, radii, motion — all centralised in globals.css." } } }, { "phase": { "primary": "3 — Primitives", "localized": { "ar": "3 — الأوليات", "en": "3 — Primitives" } }, "body": { "primary": "Upgrade buttons, inputs, tabs, switches, chips and dialogs before any page.", "localized": { "ar": "ترقية الأزرار والمدخلات والتبويبات والمفاتيح والشارات والنوافذ قبل أي صفحة.", "en": "Upgrade buttons, inputs, tabs, switches, chips and dialogs before any page." } } }, { "phase": { "primary": "4 — Global shell", "localized": { "ar": "4 — الهيكل العام", "en": "4 — Global shell" } }, "body": { "primary": "The header as a rail, the base background, the graphite footer, the containers.", "localized": { "ar": "الهيدر كسكة، خلفية القاعدة، الفوتر الغرافيتي، الحاويات.", "en": "The header as a rail, the base background, the graphite footer, the containers." } } }, { "phase": { "primary": "5 — Page by page", "localized": { "ar": "5 — صفحة‑صفحة", "en": "5 — Page by page" } }, "body": { "primary": "Migrate every route including loading, empty and error states, deleting no content and changing no logic.", "localized": { "ar": "ترحيل كل مسار مع حالات التحميل والفراغ والخطأ، دون حذف أي محتوى أو تغيير أي منطق.", "en": "Migrate every route including loading, empty and error states, deleting no content and changing no logic." } } }, { "phase": { "primary": "6 — Responsive review", "localized": { "ar": "6 — الاستجابة", "en": "6 — Responsive review" } }, "body": { "primary": "Check 1366px and 390px in Arabic and English: no horizontal overflow, comfortable touch targets, simplified shadows on mobile.", "localized": { "ar": "فحص 1366px و390px بالعربية والإنكليزية: لا تجاوز أفقي، أهداف لمس مريحة، ظلال مبسّطة على الموبايل.", "en": "Check 1366px and 390px in Arabic and English: no horizontal overflow, comfortable touch targets, simplified shadows on mobile." } } }, { "phase": { "primary": "7 — Polish", "localized": { "ar": "7 — الصقل", "en": "7 — Polish" } }, "body": { "primary": "A full consistency audit and a sweep of legacy fragments until everything reads as one team, one system.", "localized": { "ar": "تدقيق اتساق شامل وكنس بقايا اللغة القديمة حتى يبدو كل شيء من فريق واحد ونظام واحد.", "en": "A full consistency audit and a sweep of legacy fragments until everything reads as one team, one system." } } } ], "do": [ { "primary": "Start with the material class (skeu-panel, skeu-btn-primary…) then add Tailwind utilities for layout only.", "localized": { "ar": "ابدأ بصنف الخامة (skeu-panel، skeu-btn-primary…) ثم أضف أدوات Tailwind للتخطيط فقط.", "en": "Start with the material class (skeu-panel, skeu-btn-primary…) then add Tailwind utilities for layout only." } }, { "primary": "Let content (product imagery, numbers, copy) be the hero; surfaces support it.", "localized": { "ar": "اجعل المحتوى (صور المنتجات، الأرقام، النصوص) هو البطل، والأسطح تدعمه.", "en": "Let content (product imagery, numbers, copy) be the hero; surfaces support it." } }, { "primary": "Use logical properties (start/end) and check both the Arabic and English versions.", "localized": { "ar": "استخدم الخصائص المنطقية (start/end) وتأكد من النسختين العربية والإنكليزية.", "en": "Use logical properties (start/end) and check both the Arabic and English versions." } }, { "primary": "Give every state (hover, pressed, focus, disabled) a clear physical expression.", "localized": { "ar": "أعطِ كل حالة (تحويم، ضغط، تركيز، معطّل) تمثيلاً مادياً واضحاً.", "en": "Give every state (hover, pressed, focus, disabled) a clear physical expression." } }, { "primary": "Respect the elevation level that matches the element's role — don't raise everything.", "localized": { "ar": "احترم مستوى الارتفاع المناسب لدور العنصر — لا ترفع كل شيء.", "en": "Respect the elevation level that matches the element's role — don't raise everything." } } ], "dont": [ { "primary": "No neumorphism: grey blobs with a light shadow top-left and a dark shadow bottom-right.", "localized": { "ar": "لا نيومورفية: كتل رمادية بظل فاتح أعلى‑يسار وظل داكن أسفل‑يمين.", "en": "No neumorphism: grey blobs with a light shadow top-left and a dark shadow bottom-right." } }, { "primary": "No leather, wood or heavy image textures — materials are refined and restrained.", "localized": { "ar": "لا جلد ولا خشب ولا قوام صور ثقيل — الخامات مصقولة ومضبوطة.", "en": "No leather, wood or heavy image textures — materials are refined and restrained." } }, { "primary": "No decorative gradients without a physical reason, and no ad-hoc shadows outside the tokens.", "localized": { "ar": "لا تدرجات زخرفية بلا سبب مادي، ولا ظلال عشوائية خارج التوكنات.", "en": "No decorative gradients without a physical reason, and no ad-hoc shadows outside the tokens." } }, { "primary": "Don't make everything a pill — each object type has its radius.", "localized": { "ar": "لا تجعل كل شيء حبة دواء — لكل نوع كائن قطره.", "en": "Don't make everything a pill — each object type has its radius." } }, { "primary": "No text shadows, and never trade contrast for softness.", "localized": { "ar": "لا ظلال على النصوص، ولا تضحية بالتباين من أجل النعومة.", "en": "No text shadows, and never trade contrast for softness." } }, { "primary": "No Tailwind rtl:/ltr: variants — each locale has its own root; use logical utilities (ps-/pe-/text-start) instead.", "localized": { "ar": "لا متغيرات rtl:/ltr: في Tailwind — لكل لغة جذر خاص بها؛ استخدم الأدوات المنطقية (ps-/pe-/text-start) بدلاً منها.", "en": "No Tailwind rtl:/ltr: variants — each locale has its own root; use logical utilities (ps-/pe-/text-start) instead." } } ], "tokens": [ { "name": "--skeu-bg", "value": "oklch(0.962 0.012 72)", "meaning": { "primary": "Polymer base", "localized": { "ar": "قاعدة البوليمر", "en": "Polymer base" } } }, { "name": "--skeu-surface", "value": "oklch(0.993 0.004 80)", "meaning": { "primary": "Ceramic surface", "localized": { "ar": "سطح السيراميك", "en": "Ceramic surface" } } }, { "name": "--skeu-well", "value": "oklch(0.955 0.01 72)", "meaning": { "primary": "Recessed well colour", "localized": { "ar": "لون البئر الغائر", "en": "Recessed well colour" } } }, { "name": "--skeu-accent", "value": "#f05d25", "meaning": { "primary": "GINI orange", "localized": { "ar": "برتقالي جنّي", "en": "GINI orange" } } }, { "name": "--skeu-accent-deep", "value": "#c9481a", "meaning": { "primary": "Anodized control edge", "localized": { "ar": "حافة التحكّمات المؤكسدة", "en": "Anodized control edge" } } }, { "name": "--skeu-accent-text", "value": "#b8410f", "meaning": { "primary": "Text-safe orange (AA body text)", "localized": { "ar": "برتقالي آمن للنصوص (AA للمتن)", "en": "Text-safe orange (AA body text)" } } }, { "name": "--skeu-accent-text-strong", "value": "#8f3210", "meaning": { "primary": "Orange text on 13–16% accent tints", "localized": { "ar": "نص برتقالي على الخلفيات المصبوغة", "en": "Orange text on 13–16% accent tints" } } }, { "name": "--skeu-edge-control", "value": "oklch(0.62 0.02 66)", "meaning": { "primary": "Form-control boundary (≥3:1)", "localized": { "ar": "حدود حقول الإدخال (≥3:1)", "en": "Form-control boundary (≥3:1)" } } }, { "name": "--skeu-edge", "value": "oklch(0.86 0.018 68)", "meaning": { "primary": "Surface edge colour", "localized": { "ar": "لون حواف الأسطح", "en": "Surface edge colour" } } }, { "name": "--skeu-highlight", "value": "rgba(255,255,255,0.92)", "meaning": { "primary": "Lit top edge", "localized": { "ar": "الحافة العلوية المضيئة", "en": "Lit top edge" } } }, { "name": "--skeu-ink", "value": "37, 22, 10", "meaning": { "primary": "Warm shadow ink (RGB)", "localized": { "ar": "حبر الظلال الدافئ (RGB)", "en": "Warm shadow ink (RGB)" } } }, { "name": "--skeu-shadow-raised-1", "value": "inset 0 1px 0 highlight, 0 1px 1px, 0 2px 4px -1px, 0 10px 24px -14px", "meaning": { "primary": "Standard card stack", "localized": { "ar": "مكدّس البطاقة القياسية", "en": "Standard card stack" } } }, { "name": "--skeu-shadow-control", "value": "inset 0 1px 0 white/38, inset 0 -2px 0 dark/32, 0 1px 2px, 0 6px 14px -6px orange/55", "meaning": { "primary": "Primary control stack", "localized": { "ar": "مكدّس الزر الأساسي", "en": "Primary control stack" } } }, { "name": "--skeu-focus-rim", "value": "0 0 0 2px #fff, 0 0 0 4px --skeu-accent-deep + inset", "meaning": { "primary": "Two-tone focus rim (≥3:1)", "localized": { "ar": "حلقة تركيز ثنائية اللون (≥3:1)", "en": "Two-tone focus rim (≥3:1)" } } }, { "name": "--skeu-transition-fast / -normal", "value": "150ms / 260ms", "meaning": { "primary": "Press timing / lift timing", "localized": { "ar": "زمن الضغط / زمن الارتفاع", "en": "Press timing / lift timing" } } } ], "css": "https://gini.iq/brand.css", "skeuCss": "https://gini.iq/skeu.css" }, "press": { "boilerplate": { "primary": "GINI is an Iraqi market automation and digital commerce company founded in 2023, connecting merchants, service providers, delivery networks, and payment systems within a unified digital ecosystem. GINI provides tools for business management, product and service display, payment processing, and order management — enabling businesses and merchants to grow and reach millions of users efficiently. Headquartered in Baghdad, GINI serves merchants and consumers across every Iraqi province.", "localized": { "ar": "جنّي (GINI) شركة عراقية لأتمتة الأسواق والتجارة الرقمية تأسّست عام 2023، تهدف إلى ربط التجار ومزودي الخدمات وشركات التوصيل وأنظمة الدفع ضمن منظومة تقنية موحدة. توفّر جنّي أدوات لإدارة الأعمال وعرض المنتجات والخدمات ومعالجة المدفوعات وإدارة الطلبات — مما يمكّن الشركات والتجار من النمو والوصول إلى ملايين المستخدمين بسهولة وكفاءة. مقرّها الرئيسي في بغداد، وتخدم التجار والمستهلكين في جميع المحافظات العراقية.", "en": "GINI is an Iraqi market automation and digital commerce company founded in 2023, connecting merchants, service providers, delivery networks, and payment systems within a unified digital ecosystem. GINI provides tools for business management, product and service display, payment processing, and order management — enabling businesses and merchants to grow and reach millions of users efficiently. Headquartered in Baghdad, GINI serves merchants and consumers across every Iraqi province." } }, "facts": [ { "label": { "primary": "Legal name", "localized": { "ar": "الاسم الرسمي", "en": "Legal name" } }, "value": { "primary": "GINI", "localized": { "ar": "GINI (جنّي)", "en": "GINI" } } }, { "label": { "primary": "Founded", "localized": { "ar": "سنة التأسيس", "en": "Founded" } }, "value": { "primary": "2023", "localized": { "ar": "2023", "en": "2023" } } }, { "label": { "primary": "Headquarters", "localized": { "ar": "المقر", "en": "Headquarters" } }, "value": { "primary": "Baghdad, Iraq", "localized": { "ar": "بغداد، العراق", "en": "Baghdad, Iraq" } } }, { "label": { "primary": "Industry", "localized": { "ar": "النشاط", "en": "Industry" } }, "value": { "primary": "Market automation & digital commerce", "localized": { "ar": "أتمتة الأسواق والتجارة الرقمية", "en": "Market automation & digital commerce" } } }, { "label": { "primary": "Website", "localized": { "ar": "الموقع", "en": "Website" } }, "value": { "primary": "gini.iq", "localized": { "ar": "gini.iq", "en": "gini.iq" } } }, { "label": { "primary": "Press contact", "localized": { "ar": "التواصل الإعلامي", "en": "Press contact" } }, "value": { "primary": "info@gini.iq", "localized": { "ar": "info@gini.iq", "en": "info@gini.iq" } } } ], "contact": { "email": "info@gini.iq", "mailto": "mailto:info@gini.iq" } }, "faq": [ { "id": "permission", "question": { "primary": "Can I use the GINI logo in an article or video about the company?", "localized": { "ar": "هل يمكنني استخدام الشعار في مقال أو فيديو عن جنّي؟", "en": "Can I use the GINI logo in an article or video about the company?" } }, "answer": { "primary": "Yes. Editorial use (press, blogs, news) is permitted without prior approval, provided the logo is used as shown here — original proportions and colours.", "localized": { "ar": "نعم. الاستخدام التحريري (صحافة، مدوّنات، محتوى إخباري) مسموح به دون إذن مسبق، ما دام الشعار مُستخدماً كما هو موضّح هنا — بالنسب والألوان الأصلية.", "en": "Yes. Editorial use (press, blogs, news) is permitted without prior approval, provided the logo is used as shown here — original proportions and colours." } } }, { "id": "cobranding", "question": { "primary": "I'd like to do a co-branded piece with GINI — what's the next step?", "localized": { "ar": "أرغب بعمل علامة مشتركة مع جنّي — ما الخطوة؟", "en": "I'd like to do a co-branded piece with GINI — what's the next step?" } }, "answer": { "primary": "Email info@gini.iq with project details and a timeline. We usually respond within 24 hours with additional guidelines and co-branding assets.", "localized": { "ar": "راسلنا على info@gini.iq بتفاصيل المشروع والجدول الزمني. عادةً نردّ خلال 24 ساعة ونزوّدك بإرشادات إضافية وأصول خاصّة بالتعاون.", "en": "Email info@gini.iq with project details and a timeline. We usually respond within 24 hours with additional guidelines and co-branding assets." } } }, { "id": "modifications", "question": { "primary": "Can I recolour the logo to match my own identity?", "localized": { "ar": "هل يمكنني تعديل الألوان لتتماشى مع هويّتي؟", "en": "Can I recolour the logo to match my own identity?" } }, "answer": { "primary": "No. Only the official colours (GINI Orange or the white version) are permitted. Any recolouring is considered brand misuse.", "localized": { "ar": "لا. استخدم الألوان الرسميّة فقط (برتقالي جنّي أو النسخة البيضاء). أي تعديل لوني يُعدّ إساءة استخدام للعلامة.", "en": "No. Only the official colours (GINI Orange or the white version) are permitted. Any recolouring is considered brand misuse." } } }, { "id": "photos", "question": { "primary": "Do you have high-resolution press photos?", "localized": { "ar": "هل لديكم صور عالية الجودة للإعلام؟", "en": "Do you have high-resolution press photos?" } }, "answer": { "primary": "Yes. Email info@gini.iq and we'll send a curated pack including product shots, team imagery, and HQ photography.", "localized": { "ar": "نعم. راسلنا على info@gini.iq وسنرسل لك حزمة صور مخصّصة تشمل لقطات منتجات، فريق العمل، والمقر الرئيسي.", "en": "Yes. Email info@gini.iq and we'll send a curated pack including product shots, team imagery, and HQ photography." } } }, { "id": "trademarks", "question": { "primary": "Are 'GINI' and the GINI wordmark registered trademarks?", "localized": { "ar": "هل اسم «جنّي» و«GINI» علامات مسجّلة؟", "en": "Are 'GINI' and the GINI wordmark registered trademarks?" } }, "answer": { "primary": "Yes, both are trademarks owned by GINI. Avoid using either for similar product or company names that could create confusion.", "localized": { "ar": "نعم، كلاهما علامتان تجاريّتان تخصّان GINI. يجب تجنّب استخدامهما لأسماء منتجات أو شركات مشابهة قد تُسبّب التباساً.", "en": "Yes, both are trademarks owned by GINI. Avoid using either for similar product or company names that could create confusion." } } } ], "license": { "spdxShortIdentifier": "LicenseRef-GINI-Brand-1.0", "summary": "GINI brand assets on this page are available for editorial use (press, news, reviews) and approved partnerships. Do not alter the logo, its colours, or its proportions.", "permitted": [ "editorial-use", "news-coverage", "product-reviews", "partner-marketing", "conference-presentations" ], "restricted": [ "logo-modification", "colour-substitution", "stretching-or-distortion", "outlines-shadows-effects", "merchandise-without-permission", "confusingly-similar-marks" ], "contactForExceptions": "info@gini.iq", "termsUrl": "https://gini.iq/en/brand" }, "version": { "current": "1.7", "updated": "2026-09", "changelog": [ { "version": "1.7", "date": "2026-09", "notes": { "primary": "Design system (modern skeuomorphism): materials, lighting, elevation ladder, motion, component catalog and methodology — with live specimens.", "localized": { "ar": "نظام التصميم البصري (اسكيومورفية حديثة): الخامات، الإضاءة، سلّم الارتفاع، الحركة، فهرس المكوّنات والمنهجية — مع عيّنات حيّة.", "en": "Design system (modern skeuomorphism): materials, lighting, elevation ladder, motion, component catalog and methodology — with live specimens." } } }, { "version": "1.6", "date": "2026-04", "notes": { "primary": "One-colour monogram (G-mark, no orange accent).", "localized": { "ar": "الرمز الأحادي (حرف G) بلا نقطة برتقاليّة.", "en": "One-colour monogram (G-mark, no orange accent)." } } }, { "version": "1.5", "date": "2026-04", "notes": { "primary": "One-colour wordmark — black and white.", "localized": { "ar": "الشعار الكامل أحاديّ اللون — أسود وأبيض.", "en": "One-colour wordmark — black and white." } } }, { "version": "1.4", "date": "2026-04", "notes": { "primary": "Official logo files and trademark section.", "localized": { "ar": "ملفّات الشعار الرسميّة وقسم الملكيّة التجاريّة.", "en": "Official logo files and trademark section." } } }, { "version": "1.3", "date": "2026-04", "notes": { "primary": "Refinements to logo cards, pattern surfaces, and the hero.", "localized": { "ar": "تحسينات على بطاقات الشعار والنقش والعرض الرئيسي.", "en": "Refinements to logo cards, pattern surfaces, and the hero." } } }, { "version": "1.2", "date": "2026-04", "notes": { "primary": "Expanded guide: foundation, anatomy, accessibility, FAQ.", "localized": { "ar": "توسيع الدليل: أسس، تشريح، وصول، أسئلة شائعة.", "en": "Expanded guide: foundation, anatomy, accessibility, FAQ." } } }, { "version": "1.1", "date": "2026-03", "notes": { "primary": "Dark-surface logo variant and Pantone values.", "localized": { "ar": "نسخة الشعار الداكنة وقيم Pantone.", "en": "Dark-surface logo variant and Pantone values." } } }, { "version": "1.0", "date": "2026-02", "notes": { "primary": "First public release.", "localized": { "ar": "الإصدار الأول من الدليل.", "en": "First public release." } } } ] }, "machineReadable": { "jsonManifest": { "ar": "https://gini.iq/brand.json", "en": "https://gini.iq/en/brand.json" }, "markdownGuide": { "ar": "https://gini.iq/brand.md", "en": "https://gini.iq/en/brand.md" }, "humanPage": { "ar": "https://gini.iq/brand", "en": "https://gini.iq/en/brand" }, "otherLocale": { "locale": "ar", "json": "https://gini.iq/brand.json", "markdown": "https://gini.iq/brand.md" } }, "endpoints": { "json": "https://gini.iq/en/brand.json", "markdown": "https://gini.iq/en/brand.md", "schema": "https://gini.iq/schemas/brand-manifest.json", "css": "https://gini.iq/brand.css", "skeuCss": "https://gini.iq/skeu.css", "tailwind": "https://gini.iq/brand.tailwind.css", "tokens": "https://gini.iq/brand.tokens.json", "prompt": "https://gini.iq/en/brand-prompt.md", "cursorrules": "https://gini.iq/cursorrules", "agentsMd": "https://gini.iq/AGENTS.md", "assets": "https://gini.iq/brand/", "mascots": "https://gini.iq/brand/mascots/" } }