{ "$schema": "https://gini.iq/schemas/brand-manifest.json", "manifestVersion": "1.2.0", "generatedAt": "2026-09-07T17:31:30.981Z", "brand": { "name": { "primary": "جنّي", "legal": "GINI", "bilingual": "GINI (جنّي)" }, "localizedName": { "ar": "جنّي", "en": "GINI" }, "slug": "gini", "url": "https://gini.iq", "canonical": "https://gini.iq/brand", "alternates": { "ar": "https://gini.iq/brand", "en": "https://gini.iq/en/brand" }, "locale": "ar", "supportedLocales": [ "ar-IQ", "en-US" ], "tagline": { "primary": "الواجهة العراقية للعلامات العالمية.", "localized": { "ar": "الواجهة العراقية للعلامات العالمية.", "en": "The Iraqi gateway to global brands." } }, "description": { "short": "منصّة تجارة رقمية عراقية تربط المتسوّقين بأفضل العلامات — بضمان وخدمة محليّة.", "long": "جنّي (GINI) شركة عراقية لأتمتة الأسواق والتجارة الرقمية تأسّست عام 2023، تهدف إلى ربط التجار ومزودي الخدمات وشركات التوصيل وأنظمة الدفع ضمن منظومة تقنية موحدة. توفّر جنّي أدوات لإدارة الأعمال وعرض المنتجات والخدمات ومعالجة المدفوعات وإدارة الطلبات — مما يمكّن الشركات والتجار من النمو والوصول إلى ملايين المستخدمين بسهولة وكفاءة. مقرّها الرئيسي في بغداد، وتخدم التجار والمستهلكين في جميع المحافظات العراقية." }, "legalName": "GINI", "industry": "تجارة إلكترونية وخدمات منصّة", "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": "الرسالة", "title": "نبني البنية التحتية الرقمية للتجارة في العراق.", "body": "نربط التجار ومزودي الخدمات وشركات التوصيل وأنظمة الدفع ضمن منظومة تقنية موحدة، ونوفّر أدوات لإدارة الأعمال ومعالجة المدفوعات وإدارة الطلبات — ليصل كل تاجر إلى ملايين المستخدمين بكفاءة.", "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": "الرؤية", "title": "تمكين كلّ تاجر من النمو رقمياً.", "body": "منظومة رقمية يعتمدها التاجر الصغير قبل الكبير، تُسهّل الانتقال إلى الاقتصاد الرقمي وتفتح أبواب أسواق أوسع بأدوات ذكية وبنية تحتية جاهزة.", "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": "التموضع", "title": "شركة أتمتة الأسواق والتجارة الرقمية في العراق.", "body": "لسنا متجراً إلكترونياً فحسب. نحن منظومة متكاملة تدمج المدفوعات واللوجستيات وإدارة الأعمال — تخدم المستهلك والتاجر معاً ضمن تجربة شفافة وفعّالة.", "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": "الوعد", "title": "تمكين التجار. تبسيط التجارة.", "body": "أدوات رقمية متقدّمة للتجار الصغار والكبار، شراكات استراتيجية في الدفع والتوصيل، ونظام بيئي يخلق فرص النمو للجميع.", "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": "بنية تحتية رقمية للتجارة", "localized": { "ar": "بنية تحتية رقمية للتجارة", "en": "Digital commerce infrastructure" } }, { "text": "ممكّنون للتجار الصغار والكبار", "localized": { "ar": "ممكّنون للتجار الصغار والكبار", "en": "Enablers for merchants of all sizes" } }, { "text": "منظومة متكاملة للمدفوعات والتوصيل", "localized": { "ar": "منظومة متكاملة للمدفوعات والتوصيل", "en": "An integrated payments and delivery ecosystem" } }, { "text": "شركاء في نمو الأعمال", "localized": { "ar": "شركاء في نمو الأعمال", "en": "Partners in business growth" } } ], "areNot": [ { "text": "متجراً إلكترونياً فحسب", "localized": { "ar": "متجراً إلكترونياً فحسب", "en": "Just an online store" } }, { "text": "حلولاً منفصلة وغير مترابطة", "localized": { "ar": "حلولاً منفصلة وغير مترابطة", "en": "Disconnected, siloed solutions" } }, { "text": "منصّة للمستهلك فقط", "localized": { "ar": "منصّة للمستهلك فقط", "en": "A consumer-only platform" } }, { "text": "مقلّدون لنماذج خارجية", "localized": { "ar": "مقلّدون لنماذج خارجية", "en": "A copy of foreign models" } } ] } }, "visual": { "palette": [ { "id": "gini-orange", "role": "primary", "name": { "primary": "برتقالي جنّي", "localized": { "ar": "برتقالي جنّي", "en": "GINI Orange" } }, "description": { "primary": "اللون الأساسي للعلامة — الشعار والأزرار والعناصر التفاعلية.", "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": "جمري", "localized": { "ar": "جمري", "en": "Ember" } }, "description": { "primary": "نسخة أعمق للحالات التفاعلية والنصوص على الخلفيات الفاتحة.", "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": "حبر ليلي", "localized": { "ar": "حبر ليلي", "en": "Night Ink" } }, "description": { "primary": "اللون الأساسي للنصوص والعناوين على الخلفيات الفاتحة.", "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": "كريمي دافئ", "localized": { "ar": "كريمي دافئ", "en": "Warm Cream" } }, "description": { "primary": "الخلفية الأساسية للموقع ومواد التسويق.", "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": "رملي هادئ", "localized": { "ar": "رملي هادئ", "en": "Quiet Sand" } }, "description": { "primary": "خلفيات ثانوية للبطاقات وفواصل الأقسام.", "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.4 : 1", "wcag": "AAA", "usage": { "primary": "الخيار الافتراضي للنصوص الطويلة.", "localized": { "ar": "الخيار الافتراضي للنصوص الطويلة.", "en": "Default pairing for long-form body copy." } } }, { "id": "ink-on-sand", "foreground": "#1A1A1A", "background": "#EFE6DB", "contrastRatio": "14.5 : 1", "wcag": "AAA", "usage": { "primary": "نصوص على البطاقات الرمليّة.", "localized": { "ar": "نصوص على البطاقات الرمليّة.", "en": "Copy set on sand-toned cards." } } }, { "id": "white-on-orange", "foreground": "#FFFFFF", "background": "#F05D25", "contrastRatio": "3.6 : 1", "wcag": "AA", "usage": { "primary": "عناوين وأزرار كبيرة فقط (18px+). لا تستخدم للنصوص الطويلة.", "localized": { "ar": "عناوين وأزرار كبيرة فقط (18px+). لا تستخدم للنصوص الطويلة.", "en": "Large headings and buttons only (18px+). Avoid body copy." } } }, { "id": "orange-on-cream", "foreground": "#D94E1A", "background": "#FBF6F0", "contrastRatio": "5.1 : 1", "wcag": "AA", "usage": { "primary": "استخدم درجة «جمري» لتلوين النصوص على الكريمي.", "localized": { "ar": "استخدم درجة «جمري» لتلوين النصوص على الكريمي.", "en": "Use the Ember shade when setting coloured text on cream." } } }, { "id": "white-on-ink", "foreground": "#FFFFFF", "background": "#1A1A1A", "contrastRatio": "17.3 : 1", "wcag": "AAA", "usage": { "primary": "الوضع الداكن لصفحات المنتجات والفيديوهات.", "localized": { "ar": "الوضع الداكن لصفحات المنتجات والفيديوهات.", "en": "Dark mode for product pages and video thumbnails." } } }, { "id": "cream-on-ink", "foreground": "#FBF6F0", "background": "#1A1A1A", "contrastRatio": "15.9 : 1", "wcag": "AAA", "usage": { "primary": "لمسة دافئة على الخلفيات الداكنة.", "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": "عرض", "localized": { "ar": "عرض", "en": "Display" } }, "size": "32–48 / 1.15", "weight": "800", "lineHeight": "115%", "usage": { "primary": "العناوين البطولية في الصفحات الرئيسية والحملات.", "localized": { "ar": "العناوين البطولية في الصفحات الرئيسية والحملات.", "en": "Hero titles on marketing pages and campaigns." } }, "sample": { "ar": "جنّي — شريكك في التجارة", "en": "GINI — your trade partner." } }, { "id": "heading", "label": { "primary": "رئيسي", "localized": { "ar": "رئيسي", "en": "Heading" } }, "size": "36–48 / 1.15", "weight": "700", "lineHeight": "115%", "usage": { "primary": "عناوين الأقسام داخل الصفحات.", "localized": { "ar": "عناوين الأقسام داخل الصفحات.", "en": "Section titles within pages." } }, "sample": { "ar": "سوق واحد يجمع كل ما تحتاج", "en": "One marketplace. Everything you need." } }, { "id": "subheading", "label": { "primary": "فرعي", "localized": { "ar": "فرعي", "en": "Subheading" } }, "size": "20–24 / 1.25", "weight": "600", "lineHeight": "125%", "usage": { "primary": "عناوين البطاقات والمكوّنات الوسيطة.", "localized": { "ar": "عناوين البطاقات والمكوّنات الوسيطة.", "en": "Card titles and mid-level components." } }, "sample": { "ar": "تجربة شراء ذكية، دفع آمن، توصيل سريع.", "en": "Smart shopping, secure payments, fast delivery." } }, { "id": "body", "label": { "primary": "نصّ", "localized": { "ar": "نصّ", "en": "Body" } }, "size": "16–18 / 1.6", "weight": "400", "lineHeight": "160%", "usage": { "primary": "الفقرات والنصوص العامّة.", "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": "تسمية", "localized": { "ar": "تسمية", "en": "Caption" } }, "size": "12–14 / 1.4", "weight": "600", "lineHeight": "tracked 0.18em", "usage": { "primary": "تسميات الأقسام والوسوم الصغيرة.", "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": "الشعار الرئيسي", "localized": { "ar": "الشعار الرئيسي", "en": "Primary wordmark" } }, "usage": { "primary": "الاستخدام الافتراضي على الخلفيات الفاتحة — المواد التسويقية والمطبوعات.", "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": "على خلفية كريميّة", "localized": { "ar": "على خلفية كريميّة", "en": "On cream surface" } }, "usage": { "primary": "الخلفية الافتراضيّة عبر الموقع والمواد الرسميّة.", "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": "على اللون الأساسي", "localized": { "ar": "على اللون الأساسي", "en": "On brand fill" } }, "usage": { "primary": "للحملات الإعلانيّة والعناصر عالية التركيز — نستخدم النسخة البيضاء الخالصة (بلا نقطة برتقاليّة) حتى لا يتكرّر البرتقالي فوق نفسه.", "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": "على خلفية داكنة", "localized": { "ar": "على خلفية داكنة", "en": "On dark surface" } }, "usage": { "primary": "للفيديوهات والإعلانات ذات الخلفيات الداكنة.", "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": "أحاديّة اللون — على أبيض خالص", "localized": { "ar": "أحاديّة اللون — على أبيض خالص", "en": "One-colour — on pure white" } }, "usage": { "primary": "عند الطباعة أحاديّة اللون أو حين تتواجد ألوان أخرى قد تتعارض مع البرتقالي.", "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": "أحاديّة اللون — على أسود خالص", "localized": { "ar": "أحاديّة اللون — على أسود خالص", "en": "One-colour — on pure black" } }, "usage": { "primary": "الخلفيّات السوداء الخالصة، أو أيّ لون قويّ يتعارض مع البرتقالي.", "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": "الرمز الأحادي", "localized": { "ar": "الرمز الأحادي", "en": "Monogram" } }, "usage": { "primary": "رمز جنّي المختصر — للأختام، الأفاتارات، والأيقونات المربّعة على الخلفيات الفاتحة.", "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": "الرمز على اللون البرتقالي", "localized": { "ar": "الرمز على اللون البرتقالي", "en": "Monogram on brand fill" } }, "usage": { "primary": "النسخة المفضّلة لأيقونة التطبيق والأفاتار على الشبكات الاجتماعيّة — نستخدم الرمز الأبيض الخالص (بلا نقطة برتقاليّة) حتى لا يتكرّر البرتقالي فوق نفسه.", "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": "الرمز الأحادي — على أبيض خالص", "localized": { "ar": "الرمز الأحادي — على أبيض خالص", "en": "Monogram — one-colour on pure white" } }, "usage": { "primary": "رمز أحاديّ اللون على الخلفيّات البيضاء الخالصة أو أيّ لون يتعارض مع البرتقالي.", "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": "الرمز الأحادي — على أسود خالص", "localized": { "ar": "الرمز الأحادي — على أسود خالص", "en": "Monogram — one-colour on pure black" } }, "usage": { "primary": "رمز أحاديّ اللون على الخلفيّات السوداء الخالصة وعلى أيّ لون قويّ يتعارض مع البرتقالي.", "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": "المسافة الحرّة", "localized": { "ar": "المسافة الحرّة", "en": "Clear space" } }, "value": "= 1× G", "note": { "primary": "اترك مساحة حول الشعار بارتفاع حرف G كحدّ أدنى.", "localized": { "ar": "اترك مساحة حول الشعار بارتفاع حرف G كحدّ أدنى.", "en": "Maintain a clear space equal to the G-height on every side." } } }, { "id": "min-digital", "label": { "primary": "الحد الأدنى رقمياً", "localized": { "ar": "الحد الأدنى رقمياً", "en": "Min. digital size" } }, "value": "24 px", "note": { "primary": "أصغر عرض يحافظ على قراءة الحروف على الشاشة.", "localized": { "ar": "أصغر عرض يحافظ على قراءة الحروف على الشاشة.", "en": "Smallest on-screen width where the wordmark stays legible." } } }, { "id": "min-print", "label": { "primary": "الحد الأدنى طباعة", "localized": { "ar": "الحد الأدنى طباعة", "en": "Min. print size" } }, "value": "16 mm", "note": { "primary": "لأي وسيط مطبوع: بطاقات، مغلفات، لافتات.", "localized": { "ar": "لأي وسيط مطبوع: بطاقات، مغلفات، لافتات.", "en": "Any printed medium: cards, envelopes, signage." } } }, { "id": "aspect", "label": { "primary": "نسبة العرض للارتفاع", "localized": { "ar": "نسبة العرض للارتفاع", "en": "Aspect ratio" } }, "value": "≈ 3.1 : 1", "note": { "primary": "لا تعدّل النسبة — مطّها أو ضغطها ممنوع.", "localized": { "ar": "لا تعدّل النسبة — مطّها أو ضغطها ممنوع.", "en": "Don't alter the ratio — no stretching or squashing." } } } ], "rules": { "do": [ { "id": "clear-space", "text": "اترك مساحة حرة حول الشعار بمقدار ارتفاع حرف G كحدّ أدنى.", "localized": { "ar": "اترك مساحة حرة حول الشعار بمقدار ارتفاع حرف G كحدّ أدنى.", "en": "Keep a clear space around the mark equal to the height of the G at minimum." } }, { "id": "min-size", "text": "لا يقلّ عرض الشعار عن 24 بكسل على الشاشة و 16 مم في الطباعة.", "localized": { "ar": "لا يقلّ عرض الشعار عن 24 بكسل على الشاشة و 16 مم في الطباعة.", "en": "Don't render the logo narrower than 24px on screen or 16mm in print." } }, { "id": "color", "text": "استخدم النسخة الأصلية باللون البرتقالي أو النسخة البيضاء فقط.", "localized": { "ar": "استخدم النسخة الأصلية باللون البرتقالي أو النسخة البيضاء فقط.", "en": "Only use the original orange or the white knocked-out version." } }, { "id": "white-on-orange", "text": "على أيّ خلفية برتقاليّة أو من تدرّجاتها، استخدم النسخة البيضاء من الشعار فقط.", "localized": { "ar": "على أيّ خلفية برتقاليّة أو من تدرّجاتها، استخدم النسخة البيضاء من الشعار فقط.", "en": "On any orange surface — or any tint of it — use only the white version of the logo." } }, { "id": "contrast", "text": "تحقّق من تباين الخلفية قبل التصدير — استخدم الجدول في قسم الوصول.", "localized": { "ar": "تحقّق من تباين الخلفية قبل التصدير — استخدم الجدول في قسم الوصول.", "en": "Verify background contrast before exporting — check the accessibility table." } } ], "dont": [ { "id": "rotate", "text": "لا تدوّر الشعار أو تغيّر اتجاهه.", "localized": { "ar": "لا تدوّر الشعار أو تغيّر اتجاهه.", "en": "Don't rotate or change the orientation of the logo." } }, { "id": "black-on-orange", "text": "لا تضع الشعار الأسود أو المحدّد بالألوان على أيّ خلفية برتقاليّة.", "localized": { "ar": "لا تضع الشعار الأسود أو المحدّد بالألوان على أيّ خلفية برتقاليّة.", "en": "Never place the black or full-colour logo on an orange surface." } }, { "id": "recolor", "text": "لا تستبدل ألوان الشعار بألوان أخرى غير معتمدة.", "localized": { "ar": "لا تستبدل ألوان الشعار بألوان أخرى غير معتمدة.", "en": "Don't replace the colours with anything outside the official palette." } }, { "id": "distort", "text": "لا تمطّ الشعار أو تضغطه — حافظ على نسبه الأصلية.", "localized": { "ar": "لا تمطّ الشعار أو تضغطه — حافظ على نسبه الأصلية.", "en": "Don't stretch or squash the logo — preserve its native proportions." } }, { "id": "outline", "text": "لا تضف حدوداً أو ظلالاً أو تأثيرات حول الشعار.", "localized": { "ar": "لا تضف حدوداً أو ظلالاً أو تأثيرات حول الشعار.", "en": "Don't add strokes, shadows, or any effects around the logo." } } ] } }, "voice": { "traits": [ { "id": "warm", "title": { "primary": "دافئ", "localized": { "ar": "دافئ", "en": "Warm" } }, "description": { "primary": "نتحدّث بلغة بسيطة، قريبة من الناس، تعكس ثقافتنا العراقية.", "localized": { "ar": "نتحدّث بلغة بسيطة، قريبة من الناس، تعكس ثقافتنا العراقية.", "en": "We speak in plain language — close to our customers, true to the local culture." } } }, { "id": "confident", "title": { "primary": "واثق", "localized": { "ar": "واثق", "en": "Confident" } }, "description": { "primary": "نقدّم وعوداً نفي بها، ونوضح ما نعرف وما لا نعرف.", "localized": { "ar": "نقدّم وعوداً نفي بها، ونوضح ما نعرف وما لا نعرف.", "en": "We make promises we keep, and are honest about what we do and don't know." } } }, { "id": "sharp", "title": { "primary": "مختصَر", "localized": { "ar": "مختصَر", "en": "Sharp" } }, "description": { "primary": "جمل قصيرة وأفكار واضحة. كل كلمة تستحق مكانها.", "localized": { "ar": "جمل قصيرة وأفكار واضحة. كل كلمة تستحق مكانها.", "en": "Short sentences, clear ideas. Every word earns its place." } } }, { "id": "optimistic", "title": { "primary": "متفائل", "localized": { "ar": "متفائل", "en": "Optimistic" } }, "description": { "primary": "نرى الفرصة قبل العائق، ونصنع أدوات تُسهّل الخطوة التالية.", "localized": { "ar": "نرى الفرصة قبل العائق، ونصنع أدوات تُسهّل الخطوة التالية.", "en": "We see the opportunity before the obstacle, and build tools that unlock the next step." } } } ], "examples": [ { "id": "hero", "do": { "primary": "نمكّن التجار من النمو رقمياً — بأدوات إدارة ومدفوعات وتوصيل متكاملة.", "localized": { "ar": "نمكّن التجار من النمو رقمياً — بأدوات إدارة ومدفوعات وتوصيل متكاملة.", "en": "We empower merchants to grow digitally — with integrated management, payments, and delivery tools." } }, "dont": { "primary": "المنصّة الرائدة التي تقدّم تجربة تسوّق لا مثيل لها.", "localized": { "ar": "المنصّة الرائدة التي تقدّم تجربة تسوّق لا مثيل لها.", "en": "The leading platform delivering an unparalleled shopping experience." } }, "rationale": { "primary": "نوضّح ما نفعله للتجار والمستهلكين معاً، لا ندّعي الريادة بلا دليل.", "localized": { "ar": "نوضّح ما نفعله للتجار والمستهلكين معاً، لا ندّعي الريادة بلا دليل.", "en": "State what we do for merchants and consumers alike, don't claim leadership without proof." } } }, { "id": "error", "do": { "primary": "لم نستطع إتمام الدفع. جرّب بطاقة أخرى أو تواصل معنا.", "localized": { "ar": "لم نستطع إتمام الدفع. جرّب بطاقة أخرى أو تواصل معنا.", "en": "We couldn't complete the payment. Try another card or contact us." } }, "dont": { "primary": "حدث خطأ أثناء معالجة عمليتك. يرجى المحاولة لاحقاً.", "localized": { "ar": "حدث خطأ أثناء معالجة عمليتك. يرجى المحاولة لاحقاً.", "en": "An error occurred while processing your request. Please try again later." } }, "rationale": { "primary": "اشرح ما حدث، ثم اعرض الخطوة التالية. لا تُعلّق الزبون في المجهول.", "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": "نقش برتقالي دقيق مستوحى من الزخارف الإسلامية، يُستخدم كخلفية خفيفة في المواد التسويقية." }, "designSystem": { "version": "1.0.0", "updated": "2026-09", "codename": { "primary": "الأداة الدقيقة", "localized": { "ar": "الأداة الدقيقة", "en": "Precision Instrument" } }, "style": "modern-skeuomorphism", "implementation": "app/globals.css", "reference": "https://gini.iq/brand#design-system", "philosophy": { "title": { "primary": "اسكيومورفية حديثة — واجهة لها سطح ووزن وضوء", "localized": { "ar": "اسكيومورفية حديثة — واجهة لها سطح ووزن وضوء", "en": "Modern skeuomorphism — an interface with surface, weight and light" } }, "oneLiner": { "primary": "كل عنصر يُبنى كما لو كان جسماً مادياً فعلياً: يُرفع، يُضغط، يُحفر أو يُضاء — لكن بانضباط منتج رقمي معاصر.", "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": "واجهة جنّي مستوحاة من الأجهزة الدقيقة عالية الجودة: سطح بوليمر مطفأ، ألواح سيراميكية مرفوعة، تحكّمات برتقالية مؤكسدة بسماكة ظاهرة، وأسطح غرافيتية للأدوات. الهدف ليس محاكاة الجلد والخشب كما في اسكيومورفية 2010، بل إعطاء المستخدم فهماً غريزياً لما يمكن ضغطه وما يحمل ماذا فوق ماذا — عبر الضوء والعمق والملمس لا عبر الزخرفة. ليست نيومورفية (كتل رمادية بظلين)، وليست زجاجية، وليست مجرد ظلال مضافة.", "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": "منطق مادي حقيقي", "localized": { "ar": "منطق مادي حقيقي", "en": "Real-world physical logic" } }, "body": { "primary": "قبل تصميم أي عنصر نسأل: لو كان جسماً حقيقياً كيف سيتصرف؟ الزر يُضغط، المفتاح ينزلق، الحقل غائر، البطاقة تجلس فوق السطح، التبويب المختار مغروس في سكته.", "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": "مصدر ضوء واحد", "localized": { "ar": "مصدر ضوء واحد", "en": "One light source" } }, "body": { "primary": "الضوء يأتي من الأعلى‑يسار بميل أمامي خفيف في كل الشاشات. كل ظل وكل حافة مضيئة تحترم هذا الاتجاه، فتتماسك الواجهة كجسم واحد.", "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": "ضبط النفس قبل الإبهار", "localized": { "ar": "ضبط النفس قبل الإبهار", "en": "Restraint over spectacle" } }, "body": { "primary": "أربع عائلات خامات فقط، ثمانية مستويات ارتفاع فقط، حبيبات سطح تُحسّ ولا تُلاحظ. التسلسل الهرمي للعمق أهم من كمية الظلال.", "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": "تسلسل عمق واضح", "localized": { "ar": "تسلسل عمق واضح", "en": "A clear depth hierarchy" } }, "body": { "primary": "القاعدة ← المناطق الغائرة الوظيفية ← أسطح المحتوى المرفوعة ← التحكّمات المادية ← الطبقات العائمة. يفهمها المستخدم لا شعورياً.", "localized": { "ar": "القاعدة ← المناطق الغائرة الوظيفية ← أسطح المحتوى المرفوعة ← التحكّمات المادية ← الطبقات العائمة. يفهمها المستخدم لا شعورياً.", "en": "Base → recessed functional areas → raised content surfaces → physical controls → floating overlays. Users understand it without thinking." } } }, { "id": "clarity", "title": { "primary": "الوضوح يفوز دائماً", "localized": { "ar": "الوضوح يفوز دائماً", "en": "Clarity always wins" } }, "body": { "primary": "الطباعة تبقى حديثة ونظيفة بلا ظلال نصية، والكثافة المعلوماتية محفوظة. عندما يتعارض الجمال مع القراءة نختار القراءة مع لمسة مادية راقية.", "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": "الوصول لا يُساوَم عليه", "localized": { "ar": "الوصول لا يُساوَم عليه", "en": "Accessibility is non-negotiable" } }, "body": { "primary": "الحالة لا تُنقل بالظل وحده: حلقة تركيز مرئية على كل عنصر، خصائص ARIA على المجزّآت والقوائم، أهداف لمس ≥ 44px، واحترام تفضيل تقليل الحركة.", "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": "مصدر ضوء افتراضي واحد أعلى‑يسار. الأسطح المرفوعة تحصل على خط إضاءة علوي داخلي (inset 0 1px 0 أبيض)، ظل تماس قصير تحتها، وظل محيطي ناعم أبعد. الأسطح الغائرة تعكس المنطق: ظل داخلي داكن من الأعلى وشفة مضيئة من الأسفل.", "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": "كل ظل يُزاح عمودياً للأسفل (y موجب)، ولا يُزاح أفقياً إلا بدرجة ضئيلة.", "localized": { "ar": "كل ظل يُزاح عمودياً للأسفل (y موجب)، ولا يُزاح أفقياً إلا بدرجة ضئيلة.", "en": "Every shadow is offset downward (positive y); horizontal offsets are negligible." } }, { "primary": "لون الظل حبر دافئ (rgb 37 22 10) لا أسود محايد — ليتناغم مع الخلفية الكريمية.", "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": "الحافة العلوية المضيئة إلزامية على كل سطح مرفوع؛ الحافة السفلية أغمق قليلاً لإظهار السماكة.", "localized": { "ar": "الحافة العلوية المضيئة إلزامية على كل سطح مرفوع؛ الحافة السفلية أغمق قليلاً لإظهار السماكة.", "en": "The lit top edge is mandatory on every raised surface; the bottom edge is slightly darker to reveal thickness." } }, { "primary": "التدرجات مسموحة فقط عندما تصف انحناءً أو ضوءاً أو خامة — لا تدرجات زخرفية.", "localized": { "ar": "التدرجات مسموحة فقط عندما تصف انحناءً أو ضوءاً أو خامة — لا تدرجات زخرفية.", "en": "Gradients are allowed only when they describe curvature, light or material — never decorative gradients." } } ] }, "materials": [ { "id": "polymer", "name": { "primary": "بوليمر مطفأ", "localized": { "ar": "بوليمر مطفأ", "en": "Matte polymer" } }, "className": "body / .skeu-well", "usedFor": { "primary": "قاعدة الصفحة، الصواني والآبار الغائرة، حقول الإدخال", "localized": { "ar": "قاعدة الصفحة، الصواني والآبار الغائرة، حقول الإدخال", "en": "Page base, recessed trays and wells, input fields" } }, "recipe": { "primary": "لون كريمي دافئ (oklch 0.962 0.012 72) مع إضاءة شعاعية من الأعلى‑يسار، انحدار لوني خفيف نحو الأسفل، وطبقة حبيبات ثابتة بشفافية 4.5%.", "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": "سيراميك مرفوع", "localized": { "ar": "سيراميك مرفوع", "en": "Raised ceramic" } }, "className": ".skeu-panel / .skeu-panel-2 / .skeu-rail / .skeu-dialog", "usedFor": { "primary": "البطاقات، اللوحات، سكة التنقل، النوافذ الحوارية، الأزرار الثانوية", "localized": { "ar": "البطاقات، اللوحات، سكة التنقل، النوافذ الحوارية، الأزرار الثانوية", "en": "Cards, panels, the navigation rail, dialogs, secondary buttons" } }, "recipe": { "primary": "تدرج عمودي من الأبيض إلى الأبيض الدافئ، حد 1px بلون الحافة، خط إضاءة علوي داخلي، ظل تماس + ظل محيطي حسب مستوى الارتفاع.", "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": "برتقالي مؤكسد", "localized": { "ar": "برتقالي مؤكسد", "en": "Anodized orange" } }, "className": ".skeu-btn-primary / .skeu-tile / .skeu-tab-active / .skeu-chip-solid", "usedFor": { "primary": "الزر الأساسي، بلاطات الأيقونات، التبويب النشط، الشارات الصلبة، المفتاح المفعّل", "localized": { "ar": "الزر الأساسي، بلاطات الأيقونات، التبويب النشط، الشارات الصلبة، المفتاح المفعّل", "en": "The primary button, icon tiles, the active tab, solid badges, the ON switch" } }, "recipe": { "primary": "تدرج من #ff7a44 أعلى إلى #e2531f أسفل (قبة خفيفة)، حد #c94a1b، لمعة علوية بيضاء 38%، حزام سفلي داكن 2px يكشف السماكة، وهج برتقالي ناعم للخارج. الحالة المضغوطة أغمق وغائرة.", "localized": { "ar": "تدرج من #ff7a44 أعلى إلى #e2531f أسفل (قبة خفيفة)، حد #c94a1b، لمعة علوية بيضاء 38%، حزام سفلي داكن 2px يكشف السماكة، وهج برتقالي ناعم للخارج. الحالة المضغوطة أغمق وغائرة.", "en": "Gradient from #ff7a44 at the top to #e2531f at the bottom (a slight dome), #c94a1b 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": "غرافيت", "localized": { "ar": "غرافيت", "en": "Graphite" } }, "className": ".skeu-dark / .skeu-btn-dark", "usedFor": { "primary": "الفوتر، نوافذ الكود، كتل الدعوة الداكنة، عناصر التحكم عليها", "localized": { "ar": "الفوتر، نوافذ الكود، كتل الدعوة الداكنة، عناصر التحكم عليها", "en": "The footer, code windows, dark CTA blocks and the controls on them" } }, "recipe": { "primary": "تدرج من #2a2624 إلى #171412 مع خطوط فرشاة أفقية بشفافية 1.2%، حافة علوية مضيئة 10%، حافة سفلية داكنة، وظل بعيد عميق.", "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": "غائر", "localized": { "ar": "غائر", "en": "Recessed" } }, "token": "--skeu-shadow-recessed", "className": ".skeu-well", "usedFor": { "primary": "صواني المحتوى الوظيفية، مسارات التقدم، التبويب المختار (نسخة ناعمة)", "localized": { "ar": "صواني المحتوى الوظيفية، مسارات التقدم، التبويب المختار (نسخة ناعمة)", "en": "Functional content trays, progress tracks, the soft selected tab" } } }, { "id": "well", "name": { "primary": "بئر", "localized": { "ar": "بئر", "en": "Well" } }, "token": "--skeu-shadow-well", "className": ".skeu-input / .skeu-well-soft", "usedFor": { "primary": "حقول الإدخال، الصناديق والمفاتيح، قوائم الصفوف", "localized": { "ar": "حقول الإدخال، الصناديق والمفاتيح، قوائم الصفوف", "en": "Inputs, checkboxes and switches, row lists" } } }, { "id": "flush", "name": { "primary": "مستوٍ", "localized": { "ar": "مستوٍ", "en": "Flush" } }, "token": "--skeu-shadow-flush", "className": ".skeu-btn-ghost / .skeu-list-item", "usedFor": { "primary": "عناصر القوائم والأزرار الشبحية قبل التحويم — ترتفع عند التفاعل", "localized": { "ar": "عناصر القوائم والأزرار الشبحية قبل التحويم — ترتفع عند التفاعل", "en": "Menu rows and ghost buttons at rest — they rise on interaction" } } }, { "id": "raised-1", "name": { "primary": "مرفوع 1", "localized": { "ar": "مرفوع 1", "en": "Raised 1" } }, "token": "--skeu-shadow-raised-1", "className": ".skeu-panel", "usedFor": { "primary": "البطاقات القياسية، الشرائح الكبيرة، التنبيهات", "localized": { "ar": "البطاقات القياسية، الشرائح الكبيرة، التنبيهات", "en": "Standard cards, large chips, alerts" } } }, { "id": "raised-2", "name": { "primary": "مرفوع 2", "localized": { "ar": "مرفوع 2", "en": "Raised 2" } }, "token": "--skeu-shadow-raised-2", "className": ".skeu-panel-2 / .skeu-rail", "usedFor": { "primary": "لوحات الأبطال، الحاويات الكبرى، سكة الهيدر، البطاقة عند التحويم", "localized": { "ar": "لوحات الأبطال، الحاويات الكبرى، سكة الهيدر، البطاقة عند التحويم", "en": "Hero panels, major containers, the header rail, any card on hover" } } }, { "id": "floating", "name": { "primary": "عائم", "localized": { "ar": "عائم", "en": "Floating" } }, "token": "--skeu-shadow-floating", "className": ".skeu-floating", "usedFor": { "primary": "القوائم المنسدلة، الرقائق العائمة، النوافذ المنبثقة الصغيرة", "localized": { "ar": "القوائم المنسدلة، الرقائق العائمة، النوافذ المنبثقة الصغيرة", "en": "Dropdowns, floating pills, popovers" } } }, { "id": "overlay", "name": { "primary": "طبقة علوية", "localized": { "ar": "طبقة علوية", "en": "Overlay" } }, "token": "--skeu-shadow-overlay", "className": ".skeu-dialog", "usedFor": { "primary": "النوافذ الحوارية فوق خلفية معتمة قليلاً", "localized": { "ar": "النوافذ الحوارية فوق خلفية معتمة قليلاً", "en": "Dialogs above a lightly dimmed backdrop" } } }, { "id": "pressed", "name": { "primary": "مضغوط", "localized": { "ar": "مضغوط", "en": "Pressed" } }, "token": "--skeu-shadow-pressed", "className": ":active / .skeu-tab-active", "usedFor": { "primary": "لحظة الضغط على أي تحكم، والتبويب المختار", "localized": { "ar": "لحظة الضغط على أي تحكم، والتبويب المختار", "en": "The instant any control is pressed, and the selected tab" } } } ], "radii": [ { "token": "--skeu-radius-xs", "px": 6, "usedFor": { "primary": "الشرائح الصغيرة والوسوم", "localized": { "ar": "الشرائح الصغيرة والوسوم", "en": "Tiny chips and tags" } } }, { "token": "--skeu-radius-sm", "px": 10, "usedFor": { "primary": "الأزرار القياسية وحقول الإدخال والتحكمات الصغيرة", "localized": { "ar": "الأزرار القياسية وحقول الإدخال والتحكمات الصغيرة", "en": "Standard buttons, inputs, small controls" } } }, { "token": "--skeu-radius-md", "px": 14, "usedFor": { "primary": "البلاطات والتبويبات", "localized": { "ar": "البلاطات والتبويبات", "en": "Tiles and tabs" } } }, { "token": "--skeu-radius-lg", "px": 20, "usedFor": { "primary": "البطاقات واللوحات", "localized": { "ar": "البطاقات واللوحات", "en": "Cards and panels" } } }, { "token": "--skeu-radius-xl", "px": 26, "usedFor": { "primary": "النوافذ الحوارية وسكة التنقل", "localized": { "ar": "النوافذ الحوارية وسكة التنقل", "en": "Dialogs and the navigation rail" } } } ], "motion": [ { "title": { "primary": "ضغط الزر — 80ms", "localized": { "ar": "ضغط الزر — 80ms", "en": "Button press — 80ms" } }, "body": { "primary": "ينزل 1px ويتحول ظله الخارجي إلى ظل داخلي؛ يعود خلال 150ms.", "localized": { "ar": "ينزل 1px ويتحول ظله الخارجي إلى ظل داخلي؛ يعود خلال 150ms.", "en": "Drops 1px as the outer shadow turns into an inset; returns within 150ms." } } }, { "title": { "primary": "تحويم البطاقة — 260ms", "localized": { "ar": "تحويم البطاقة — 260ms", "en": "Card hover — 260ms" } }, "body": { "primary": "ترتفع 2px من مستوى «مرفوع 1» إلى «مرفوع 2» بمنحنى 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": "اختيار التبويب", "localized": { "ar": "اختيار التبويب", "en": "Tab selection" } }, "body": { "primary": "التبويب الجديد يغوص 1px بلون أغمق؛ السابق يعود لمستواه.", "localized": { "ar": "التبويب الجديد يغوص 1px بلون أغمق؛ السابق يعود لمستواه.", "en": "The new tab sinks 1px with a deeper fill; the previous one springs back." } } }, { "title": { "primary": "المفتاح", "localized": { "ar": "المفتاح", "en": "Switch" } }, "body": { "primary": "الإبهام ينزلق 20px ميكانيكياً خلال 260ms وتُضاء السكة.", "localized": { "ar": "الإبهام ينزلق 20px ميكانيكياً خلال 260ms وتُضاء السكة.", "en": "The thumb slides 20px mechanically over 260ms while the track illuminates." } } }, { "title": { "primary": "القائمة المنسدلة — 180ms", "localized": { "ar": "القائمة المنسدلة — 180ms", "en": "Dropdown — 180ms" } }, "body": { "primary": "تظهر بارتفاع صغير وتلاشٍ (animate-skeu-pop).", "localized": { "ar": "تظهر بارتفاع صغير وتلاشٍ (animate-skeu-pop).", "en": "Appears with a small lift and fade (animate-skeu-pop)." } } }, { "title": { "primary": "النافذة الحوارية — 260ms", "localized": { "ar": "النافذة الحوارية — 260ms", "en": "Dialog — 260ms" } }, "body": { "primary": "ترتفع من القاعدة بتكبير مضبوط 0.97 → 1 (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": "تقليل الحركة", "localized": { "ar": "تقليل الحركة", "en": "Reduced motion" } }, "body": { "primary": "كل الحركات تُطفأ عند prefers-reduced-motion؛ تبقى الحالات مقروءة بالشكل واللون.", "localized": { "ar": "كل الحركات تُطفأ عند prefers-reduced-motion؛ تبقى الحالات مقروءة بالشكل واللون.", "en": "All motion is disabled under prefers-reduced-motion; states remain readable through shape and colour." } } } ], "components": [ { "group": { "primary": "الأسطح", "localized": { "ar": "الأسطح", "en": "Surfaces" } }, "items": [ { "className": "skeu-panel", "name": { "primary": "لوح مرفوع", "localized": { "ar": "لوح مرفوع", "en": "Raised panel" } }, "usedFor": { "primary": "البطاقة القياسية", "localized": { "ar": "البطاقة القياسية", "en": "The standard card" } } }, { "className": "skeu-panel-2", "name": { "primary": "لوح مرفوع 2", "localized": { "ar": "لوح مرفوع 2", "en": "Raised panel 2" } }, "usedFor": { "primary": "الحاويات الكبرى والأبطال", "localized": { "ar": "الحاويات الكبرى والأبطال", "en": "Major containers and heroes" } } }, { "className": "skeu-panel-interactive", "name": { "primary": "لوح تفاعلي", "localized": { "ar": "لوح تفاعلي", "en": "Interactive panel" } }, "usedFor": { "primary": "بطاقة قابلة للنقر ترتفع وتجلس", "localized": { "ar": "بطاقة قابلة للنقر ترتفع وتجلس", "en": "A clickable card that rises and seats" } } }, { "className": "skeu-panel-selected", "name": { "primary": "لوح مختار", "localized": { "ar": "لوح مختار", "en": "Selected panel" } }, "usedFor": { "primary": "بطاقة مقفلة/مختارة مغروسة بحافة برتقالية", "localized": { "ar": "بطاقة مقفلة/مختارة مغروسة بحافة برتقالية", "en": "A locked/selected card pressed in with an accent rim" } } }, { "className": "skeu-floating", "name": { "primary": "سطح عائم", "localized": { "ar": "سطح عائم", "en": "Floating surface" } }, "usedFor": { "primary": "القوائم المنسدلة والرقائق", "localized": { "ar": "القوائم المنسدلة والرقائق", "en": "Dropdowns and pills" } } }, { "className": "skeu-dialog + skeu-backdrop", "name": { "primary": "نافذة حوارية", "localized": { "ar": "نافذة حوارية", "en": "Dialog" } }, "usedFor": { "primary": "الطبقة العلوية وخلفيتها", "localized": { "ar": "الطبقة العلوية وخلفيتها", "en": "The overlay and its backdrop" } } }, { "className": "skeu-rail", "name": { "primary": "سكة تنقل", "localized": { "ar": "سكة تنقل", "en": "Navigation rail" } }, "usedFor": { "primary": "الهيدر وأشرطة الأدوات اللاصقة", "localized": { "ar": "الهيدر وأشرطة الأدوات اللاصقة", "en": "The header and sticky toolbars" } } }, { "className": "skeu-well / -soft / -accent", "name": { "primary": "بئر غائر", "localized": { "ar": "بئر غائر", "en": "Recessed well" } }, "usedFor": { "primary": "الصواني الوظيفية والصفوف المميزة", "localized": { "ar": "الصواني الوظيفية والصفوف المميزة", "en": "Functional trays and highlighted rows" } } }, { "className": "skeu-dark", "name": { "primary": "سطح غرافيتي", "localized": { "ar": "سطح غرافيتي", "en": "Graphite surface" } }, "usedFor": { "primary": "الفوتر ونوافذ الكود", "localized": { "ar": "الفوتر ونوافذ الكود", "en": "Footer and code windows" } } } ] }, { "group": { "primary": "التحكّمات", "localized": { "ar": "التحكّمات", "en": "Controls" } }, "items": [ { "className": "skeu-btn-primary", "name": { "primary": "زر أساسي", "localized": { "ar": "زر أساسي", "en": "Primary button" } }, "usedFor": { "primary": "الإجراء الرئيسي — برتقالي مؤكسد", "localized": { "ar": "الإجراء الرئيسي — برتقالي مؤكسد", "en": "The main action — anodized orange" } } }, { "className": "skeu-btn-secondary", "name": { "primary": "زر ثانوي", "localized": { "ar": "زر ثانوي", "en": "Secondary button" } }, "usedFor": { "primary": "زر سيراميكي مطفأ", "localized": { "ar": "زر سيراميكي مطفأ", "en": "Matte ceramic button" } } }, { "className": "skeu-btn-tint", "name": { "primary": "زر مصبوغ", "localized": { "ar": "زر مصبوغ", "en": "Tinted button" } }, "usedFor": { "primary": "إجراء ثانوي بهوية برتقالية", "localized": { "ar": "إجراء ثانوي بهوية برتقالية", "en": "A secondary action with accent identity" } } }, { "className": "skeu-btn-ghost", "name": { "primary": "زر شبحي", "localized": { "ar": "زر شبحي", "en": "Ghost button" } }, "usedFor": { "primary": "مستوٍ حتى التحويم ثم يرتفع", "localized": { "ar": "مستوٍ حتى التحويم ثم يرتفع", "en": "Flush until hovered, then rises" } } }, { "className": "skeu-btn-destructive", "name": { "primary": "زر حذف", "localized": { "ar": "زر حذف", "en": "Destructive button" } }, "usedFor": { "primary": "أحمر مُشغَّل آلياً", "localized": { "ar": "أحمر مُشغَّل آلياً", "en": "Machined red" } } }, { "className": "skeu-input", "name": { "primary": "حقل إدخال", "localized": { "ar": "حقل إدخال", "en": "Input" } }, "usedFor": { "primary": "بئر غائر بحلقة إضاءة عند التركيز", "localized": { "ar": "بئر غائر بحلقة إضاءة عند التركيز", "en": "A recessed well with an illuminated focus rim" } } }, { "className": "skeu-check / skeu-radio", "name": { "primary": "صندوق اختيار / راديو", "localized": { "ar": "صندوق اختيار / راديو", "en": "Checkbox / radio" } }, "usedFor": { "primary": "بئر محفور يُضاء عند التحديد", "localized": { "ar": "بئر محفور يُضاء عند التحديد", "en": "An engraved well that lights when set" } } }, { "className": "skeu-toggle", "name": { "primary": "مفتاح", "localized": { "ar": "مفتاح", "en": "Switch" } }, "usedFor": { "primary": "سكة غائرة وإبهام مادي", "localized": { "ar": "سكة غائرة وإبهام مادي", "en": "Recessed track and physical thumb" } } }, { "className": "skeu-tab / skeu-tab-active", "name": { "primary": "تبويب مجزّأ", "localized": { "ar": "تبويب مجزّأ", "en": "Segmented tab" } }, "usedFor": { "primary": "مفتاح مرفوع؛ النشط مغروس بلون أغمق", "localized": { "ar": "مفتاح مرفوع؛ النشط مغروس بلون أغمق", "en": "A raised key; the active one seated in a deeper fill" } } } ] }, { "group": { "primary": "العناصر الصغيرة", "localized": { "ar": "العناصر الصغيرة", "en": "Small elements" } }, "items": [ { "className": "skeu-tile / -soft / -ceramic", "name": { "primary": "بلاطة أيقونة", "localized": { "ar": "بلاطة أيقونة", "en": "Icon tile" } }, "usedFor": { "primary": "مؤكسدة / بئر مصبوغ / سيراميك أبيض", "localized": { "ar": "مؤكسدة / بئر مصبوغ / سيراميك أبيض", "en": "Anodized / tinted well / white ceramic" } } }, { "className": "skeu-chip / -solid / -neutral / -success", "name": { "primary": "شارة", "localized": { "ar": "شارة", "en": "Chip / badge" } }, "usedFor": { "primary": "شرائح بارزة بحافة شعرية", "localized": { "ar": "شرائح بارزة بحافة شعرية", "en": "Embossed pills with a hairline edge" } } }, { "className": "skeu-meter", "name": { "primary": "قارئ أرقام", "localized": { "ar": "قارئ أرقام", "en": "Instrument readout" } }, "usedFor": { "primary": "الإحصائيات ومؤشرات الأداء", "localized": { "ar": "الإحصائيات ومؤشرات الأداء", "en": "Stats and KPIs" } } }, { "className": "skeu-table / skeu-row", "name": { "primary": "جدول / صف", "localized": { "ar": "جدول / صف", "en": "Table / row" } }, "usedFor": { "primary": "رأس مرفوع، جسم غائر، صفوف لمسية", "localized": { "ar": "رأس مرفوع، جسم غائر، صفوف لمسية", "en": "Raised header, recessed body, tactile rows" } } }, { "className": "skeu-alert-*", "name": { "primary": "تنبيه", "localized": { "ar": "تنبيه", "en": "Alert" } }, "usedFor": { "primary": "أجسام نظام مرتفعة بحافة دلالية", "localized": { "ar": "أجسام نظام مرتفعة بحافة دلالية", "en": "Elevated system objects with a semantic edge" } } }, { "className": "skeu-skeleton", "name": { "primary": "هيكل تحميل", "localized": { "ar": "هيكل تحميل", "en": "Skeleton" } }, "usedFor": { "primary": "كتل غائرة بمسح ضوئي", "localized": { "ar": "كتل غائرة بمسح ضوئي", "en": "Recessed blocks with a light sweep" } } }, { "className": "skeu-track / skeu-fill", "name": { "primary": "مسار تقدم", "localized": { "ar": "مسار تقدم", "en": "Progress track" } }, "usedFor": { "primary": "سكة غائرة وتعبئة مؤكسدة", "localized": { "ar": "سكة غائرة وتعبئة مؤكسدة", "en": "Recessed track and anodized fill" } } }, { "className": "skeu-divider", "name": { "primary": "فاصل محفور", "localized": { "ar": "فاصل محفور", "en": "Engraved divider" } }, "usedFor": { "primary": "خط داكن فوق خط مضيء", "localized": { "ar": "خط داكن فوق خط مضيء", "en": "A dark line over a light line" } } } ] } ], "library": { "count": 64, "reference": "https://gini.iq/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": "الأصناف تعمل مع HTML عادي أو React أو Vue أو Svelte أو أي إطار — لا تبعيّات. الاتجاه من اليمين إلى اليسار مدعوم تلقائياً عبر dir=\"rtl\". أدوات التخطيط (h-10, px-4, gap-2…) هي Tailwind ويمكن استبدالها بـ 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": "الإجراءات", "localized": { "ar": "الإجراءات", "en": "Actions" } }, "items": [ { "id": "btn-sizes", "name": { "primary": "الزر الأساسي — ثلاثة أحجام", "localized": { "ar": "الزر الأساسي — ثلاثة أحجام", "en": "Primary button — three sizes" } }, "description": { "primary": "الزر المؤكسد بارتفاع 32 / 40 / 44px. الحجم يتحدد بأدوات التخطيط فقط، الخامة واحدة.", "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": "عائلة الأزرار", "localized": { "ar": "عائلة الأزرار", "en": "Button family" } }, "description": { "primary": "ثانوي سيراميكي، مصبوغ، شبحي، حذف، وداكن للأسطح الغرافيتية.", "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": "زر أيقونة", "localized": { "ar": "زر أيقونة", "en": "Icon button" } }, "description": { "primary": "مربع 40px بأيقونة فقط — لا تنسَ 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": "زر بأيقونة أمامية", "localized": { "ar": "زر بأيقونة أمامية", "en": "Button with leading icon" } }, "description": { "primary": "الأيقونة على جهة البداية، والنص بعدها — يقلب تلقائياً في 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": "زر في حالة تحميل", "localized": { "ar": "زر في حالة تحميل", "en": "Loading button" } }, "description": { "primary": "مؤشر دوران داخل الزر مع aria-busy وتعطيل النقر.", "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": "زر معطّل", "localized": { "ar": "زر معطّل", "en": "Disabled button" } }, "description": { "primary": "شفافية 55% وإشباع أقل وبلا حركة — الخاصية disabled تكفي.", "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": "مجموعة أزرار / زر منقسم", "localized": { "ar": "مجموعة أزرار / زر منقسم", "en": "Button group / split button" } }, "description": { "primary": "مفاتيح متلاصقة بقطر مشترك، والزر المنقسم يفصل الإجراء الرئيسي عن قائمته.", "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": "زر عائم (FAB)", "localized": { "ar": "زر عائم (FAB)", "en": "Floating action button" } }, "description": { "primary": "زر دائري مرفوع للإجراء الأهم على الشاشة — يعيش في المستوى العائم.", "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": "النماذج", "localized": { "ar": "النماذج", "en": "Forms" } }, "items": [ { "id": "field-text", "name": { "primary": "حقل نصي مع تسمية ومساعدة وخطأ", "localized": { "ar": "حقل نصي مع تسمية ومساعدة وخطأ", "en": "Text field with label, help and error" } }, "description": { "primary": "الحقل بئر غائر؛ حالة الخطأ تضيف is-invalid ورسالة مرتبطة عبر 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": "حقل بأيقونة أمامية", "localized": { "ar": "حقل بأيقونة أمامية", "en": "Input with leading icon" } }, "description": { "primary": "الأيقونة مثبتة على جهة البداية بخصائص منطقية (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": "حقل بحث", "localized": { "ar": "حقل بحث", "en": "Search field" } }, "description": { "primary": "حقل مستدير مع أيقونة بحث واختصار لوحة مفاتيح على جهة النهاية.", "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": "قائمة اختيار", "localized": { "ar": "قائمة اختيار", "en": "Select" } }, "description": { "primary": "select أصلي داخل بئر غائر مع سهم مرسوم يدوياً على جهة النهاية.", "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": "منطقة نص", "localized": { "ar": "منطقة نص", "en": "Textarea" } }, "description": { "primary": "نفس البئر بارتفاع حر وعدّاد أحرف أسفلها.", "localized": { "ar": "نفس البئر بارتفاع حر وعدّاد أحرف أسفلها.", "en": "The same well with free height and a character counter below." } }, "classes": [ "skeu-input" ], "html": "" }, { "id": "checkbox-list", "name": { "primary": "قائمة صناديق اختيار", "localized": { "ar": "قائمة صناديق اختيار", "en": "Checkbox list" } }, "description": { "primary": "صفوف غائرة ناعمة، كل صف label كامل ليكون هدف اللمس ≥ 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": "مجموعة راديو", "localized": { "ar": "مجموعة راديو", "en": "Radio group" } }, "description": { "primary": "خيارات كبطاقات؛ البطاقة المختارة تُغرس بحافة برتقالية (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": "صف مفتاح", "localized": { "ar": "صف مفتاح", "en": "Switch row" } }, "description": { "primary": "مفتاح ميكانيكي role=switch مع aria-checked؛ الإبهام ينزلق 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": "تحكم مجزّأ", "localized": { "ar": "تحكم مجزّأ", "en": "Segmented control" } }, "description": { "primary": "مفاتيح مرفوعة داخل بئر؛ المفتاح النشط مغروس بلون أغمق (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": "شريط تمرير", "localized": { "ar": "شريط تمرير", "en": "Slider" } }, "description": { "primary": "range أصلي بلون التمييز داخل بئر، مع قراءة قيمة في عدّاد.", "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": "منطقة إسقاط ملفات", "localized": { "ar": "منطقة إسقاط ملفات", "en": "File drop zone" } }, "description": { "primary": "بئر غائر بحد متقطع داخلي وبلاطة أيقونة، والإدخال الحقيقي مخفي بصرياً.", "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)", "localized": { "ar": "صف رمز التحقق (OTP)", "en": "OTP / code row" } }, "description": { "primary": "ست خلايا غائرة بخانة واحدة، اتجاه LTR دائماً للأرقام.", "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": "حقل تاريخ", "localized": { "ar": "حقل تاريخ", "en": "Date input" } }, "description": { "primary": "input[type=date] أصلي في نفس البئر — يحصل على منتقي المتصفح مجاناً.", "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": "تخطيط نموذج بعمودين", "localized": { "ar": "تخطيط نموذج بعمودين", "en": "Two-column form layout" } }, "description": { "primary": "لوح مرفوع، شبكة عمود واحد على الموبايل وعمودين من sm، وأزرار في صف أسفل.", "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": "ملخص أخطاء النموذج", "localized": { "ar": "ملخص أخطاء النموذج", "en": "Inline validation summary" } }, "description": { "primary": "تنبيه خطأ مرفوع أعلى النموذج يجمع الحقول الناقصة بروابط تقفز إليها.", "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": "التنقّل", "localized": { "ar": "التنقّل", "en": "Navigation" } }, "items": [ { "id": "navbar", "name": { "primary": "شريط تنقّل (سكة)", "localized": { "ar": "شريط تنقّل (سكة)", "en": "Navbar (rail)" } }, "description": { "primary": "سكة سيراميكية مصنفرة: شعار، روابط، والإجراء الأساسي على جهة النهاية.", "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": "مسار التنقّل", "localized": { "ar": "مسار التنقّل", "en": "Breadcrumb" } }, "description": { "primary": "شرائح سيراميكية مفصولة بأسهم؛ الصفحة الحالية 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": "تبويبات — خطية ومجزّأة", "localized": { "ar": "تبويبات — خطية ومجزّأة", "en": "Tabs — underline and segmented" } }, "description": { "primary": "الخطية للصفحات (خط مضيء تحت النشط)، والمجزّأة للفلاتر.", "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": "ترقيم الصفحات", "localized": { "ar": "ترقيم الصفحات", "en": "Pagination" } }, "description": { "primary": "مفاتيح مربعة 36px؛ الصفحة الحالية مغروسة، والسابق/التالي أزرار أيقونة.", "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": "خطوات التقدّم", "localized": { "ar": "خطوات التقدّم", "en": "Stepper / progress steps" } }, "description": { "primary": "الخطوة المنجزة بلاطة خضراء، الحالية مؤكسدة، والقادمة بئر غائر — الخط بينها مسار تقدم.", "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": "قائمة جانبية", "localized": { "ar": "قائمة جانبية", "en": "Sidebar list" } }, "description": { "primary": "صفوف مستوية ترتفع عند التحويم (skeu-list-item)؛ العنصر النشط بئر مصبوغ.", "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": "شريط تبويبات سفلي للموبايل", "localized": { "ar": "شريط تبويبات سفلي للموبايل", "en": "Bottom mobile tab bar" } }, "description": { "primary": "سكة ثابتة أسفل الشاشة بأربع وجهات؛ الوجهة النشطة بلاطة مؤكسدة.", "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": "زر رجوع", "localized": { "ar": "زر رجوع", "en": "Back button" } }, "description": { "primary": "زر شبحي بسهم يقلب في RTL عبر -scale-x-100 تحت [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": "عرض البيانات", "localized": { "ar": "عرض البيانات", "en": "Data display" } }, "items": [ { "id": "kpi-tile", "name": { "primary": "بلاطة مؤشر أداء", "localized": { "ar": "بلاطة مؤشر أداء", "en": "KPI tile" } }, "description": { "primary": "قارئ أرقام (skeu-meter): تسمية صغيرة، رقم كبير جدولي، وسطر مساعد.", "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": "صف إحصاء مع شريحة فرق", "localized": { "ar": "صف إحصاء مع شريحة فرق", "en": "Stat row with delta chip" } }, "description": { "primary": "ثلاثة قوارئ في شبكة، لكل منها شريحة خضراء أو محايدة للفرق.", "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": "بطاقة منتج", "localized": { "ar": "بطاقة منتج", "en": "Product card" } }, "description": { "primary": "لوح تفاعلي: صورة في بلاطة سيراميكية، شارة، سعر بالدينار، وزر إضافة للسلة.", "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": "بطاقة تسعير", "localized": { "ar": "بطاقة تسعير", "en": "Pricing card" } }, "description": { "primary": "لوح مرفوع 2 مع شارة «الأكثر طلباً»، سعر كبير، قائمة مزايا، وزر أساسي.", "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": "بطاقة ميزة", "localized": { "ar": "بطاقة ميزة", "en": "Feature card" } }, "description": { "primary": "بلاطة أيقونة مؤكسدة، عنوان، وصف قصير — الوحدة الأساسية لأي شبكة مزايا.", "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": "بطاقة شهادة", "localized": { "ar": "بطاقة شهادة", "en": "Testimonial card" } }, "description": { "primary": "اقتباس، نجوم، وصف المتحدث مع صورة رمزية سيراميكية.", "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": "بطاقة مستخدم + مجموعة صور رمزية", "localized": { "ar": "بطاقة مستخدم + مجموعة صور رمزية", "en": "User card + avatar group" } }, "description": { "primary": "صورة رمزية بحرفين، اسم ودور، ومجموعة صور متراكبة بحد أبيض.", "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": "جدول مع رأس وصفوف وإجراءات", "localized": { "ar": "جدول مع رأس وصفوف وإجراءات", "en": "Table with header, rows and actions" } }, "description": { "primary": "skeu-table: رأس مرفوع لاصق، جسم غائر، صفوف تُضاء عند التحويم بحافة برتقالية.", "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": "قائمة وصفية", "localized": { "ar": "قائمة وصفية", "en": "Description list" } }, "description": { "primary": "أزواج مفتاح/قيمة في بئر ناعم بفواصل محفورة — لتفاصيل الطلب والفواتير.", "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": "خط زمني", "localized": { "ar": "خط زمني", "en": "Timeline" } }, "description": { "primary": "عمود نقاط: منجزة (خضراء)، حالية (مؤكسدة نابضة)، قادمة (بئر).", "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": "الشارات والشرائح", "localized": { "ar": "الشارات والشرائح", "en": "Badges and chips" } }, "description": { "primary": "أربع خامات: مصبوغة، صلبة، محايدة، نجاح — مع شريحة عدّاد وشريحة قابلة للإزالة.", "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": "شريط تقدّم + تقدّم دائري", "localized": { "ar": "شريط تقدّم + تقدّم دائري", "en": "Progress bar + circular progress" } }, "description": { "primary": "مسار غائر وتعبئة مؤكسدة؛ الدائري SVG بنفس اللون مع قراءة في المنتصف.", "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": "عدّاد / مقياس", "localized": { "ar": "عدّاد / مقياس", "en": "Meter / gauge" } }, "description": { "primary": "نصف دائرة داخل قارئ أرقام — لمعدلات الرضا أو الطاقة أو الحصص.", "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": "حالة فارغة", "localized": { "ar": "حالة فارغة", "en": "Empty state" } }, "description": { "primary": "بئر غائر بحد متقطع، بلاطة أيقونة مصبوغة، نص قصير، وإجراء واحد.", "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": "مجموعة هياكل تحميل", "localized": { "ar": "مجموعة هياكل تحميل", "en": "Skeleton set" } }, "description": { "primary": "كتل غائرة بمسح ضوئي، بنفس هندسة البطاقة التي ستحل محلها.", "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": "صفوف قائمة بأسهم", "localized": { "ar": "صفوف قائمة بأسهم", "en": "List rows with chevrons" } }, "description": { "primary": "لوح يحوي صفوفاً قابلة للنقر بأيقونة، عنوان، وصف، وسهم يقلب في 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": "التغذية الراجعة والطبقات", "localized": { "ar": "التغذية الراجعة والطبقات", "en": "Feedback & overlays" } }, "items": [ { "id": "alerts", "name": { "primary": "التنبيهات الدلالية الأربعة", "localized": { "ar": "التنبيهات الدلالية الأربعة", "en": "The four semantic alerts" } }, "description": { "primary": "جسم نظام مرفوع بحافة ملونة على جهة البداية — نجاح، خطأ، تحذير، معلومة.", "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": "توست", "localized": { "ar": "توست", "en": "Toast" } }, "description": { "primary": "تنبيه عائم قصير بأيقونة وزر إجراء وإغلاق، يظهر بـ 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": "لافتة مضمّنة", "localized": { "ar": "لافتة مضمّنة", "en": "Inline banner" } }, "description": { "primary": "بئر مصبوغ بعرض كامل للإعلانات داخل الصفحة، مع رابط وإغلاق.", "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": "نافذة حوارية (حيّة)", "localized": { "ar": "نافذة حوارية (حيّة)", "en": "Modal dialog (live)" } }, "description": { "primary": "خلفية معتمة + لوح طبقة علوية بـ animate-skeu-dialog؛ Escape يغلق والتركيز محبوس داخلها.", "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": "قائمة منسدلة (حيّة)", "localized": { "ar": "قائمة منسدلة (حيّة)", "en": "Dropdown menu (live)" } }, "description": { "primary": "سطح عائم بـ animate-skeu-pop، عناصر role=menuitem تصعد عند التحويم، وعنصر حذف أحمر.", "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": "تلميح", "localized": { "ar": "تلميح", "en": "Tooltip" } }, "description": { "primary": "سطح غرافيتي صغير فوق العنصر، مرتبط عبر 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": "نافذة منبثقة", "localized": { "ar": "نافذة منبثقة", "en": "Popover" } }, "description": { "primary": "سطح عائم بمحتوى غني (عنوان، نص، إجراء) مرتبط بزر بـ 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": "حوار تأكيد (حيّ)", "localized": { "ar": "حوار تأكيد (حيّ)", "en": "Confirm dialog (live)" } }, "description": { "primary": "نفس النافذة الحوارية مع بلاطة تحذير وزر حذف أحمر — للإجراءات غير القابلة للتراجع.", "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": "لوح سفلي (حيّ)", "localized": { "ar": "لوح سفلي (حيّ)", "en": "Bottom sheet (live)" } }, "description": { "primary": "نافذة حوارية مثبتة أسفل الشاشة بمقبض سحب — للموبايل.", "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": "التجارة", "localized": { "ar": "التجارة", "en": "Commerce" } }, "items": [ { "id": "order-status", "name": { "primary": "حبوب حالة الطلب", "localized": { "ar": "حبوب حالة الطلب", "en": "Order status pills" } }, "description": { "primary": "الأربع حالات القياسية في جنّي: قيد التجهيز، جاري التوصيل، تم التسليم، ملغى.", "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": "سطر في السلة", "localized": { "ar": "سطر في السلة", "en": "Cart line item" } }, "description": { "primary": "صورة، اسم، خيار، عدّاد كمية، سعر السطر، وزر حذف شبحي.", "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": "سعر مع خصم", "localized": { "ar": "سعر مع خصم", "en": "Price + discount" } }, "description": { "primary": "السعر الحالي بارز، السعر القديم مشطوب، ونسبة الخصم في شريحة نجاح.", "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": "عدّاد كمية", "localized": { "ar": "عدّاد كمية", "en": "Quantity stepper" } }, "description": { "primary": "زران سيراميكيان يحيطان ببئر قراءة؛ الحد الأدنى يعطّل زر النقصان.", "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": "خط توصيل أفقي", "localized": { "ar": "خط توصيل أفقي", "en": "Delivery timeline" } }, "description": { "primary": "ثلاث محطات أفقية بمسار تقدم بينها — نسخة الموبايل من الخط الزمني.", "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": "بطاقة رأس التاجر", "localized": { "ar": "بطاقة رأس التاجر", "en": "Merchant header card" } }, "description": { "primary": "شعار في بلاطة سيراميكية، اسم، شارة توثيق، تقييم، وزر متابعة.", "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": "صف طريقة الدفع", "localized": { "ar": "صف طريقة الدفع", "en": "Payment method row" } }, "description": { "primary": "خيارات دفع كبطاقات راديو: Qi Card، ZainCash، الدفع عند الاستلام.", "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": "شريحة كوبون / نقاط ولاء", "localized": { "ar": "شريحة كوبون / نقاط ولاء", "en": "Coupon / loyalty points chip" } }, "description": { "primary": "حقل كوبون مع زر تطبيق، وشريحة نقاط ولاء مؤكسدة برصيد جدولي.", "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": "افتراضي", "localized": { "ar": "افتراضي", "en": "Default" } }, "rule": { "primary": "مرفوع بخامته الطبيعية", "localized": { "ar": "مرفوع بخامته الطبيعية", "en": "Raised in its natural material" } } }, { "state": { "primary": "تحويم", "localized": { "ar": "تحويم", "en": "Hover" } }, "rule": { "primary": "يرتفع 1–2px وتقوى إضاءته", "localized": { "ar": "يرتفع 1–2px وتقوى إضاءته", "en": "Rises 1–2px with stronger highlight" } } }, { "state": { "primary": "ضغط", "localized": { "ar": "ضغط", "en": "Pressed" } }, "rule": { "primary": "ينزل 1px، ظل داخلي، لون أغمق", "localized": { "ar": "ينزل 1px، ظل داخلي، لون أغمق", "en": "Drops 1px, inset shadow, deeper fill" } } }, { "state": { "primary": "تركيز", "localized": { "ar": "تركيز", "en": "Focus" } }, "rule": { "primary": "حلقة إضاءة برتقالية 3px — دائماً مرئية", "localized": { "ar": "حلقة إضاءة برتقالية 3px — دائماً مرئية", "en": "A 3px orange illuminated rim — always visible" } } }, { "state": { "primary": "مختار", "localized": { "ar": "مختار", "en": "Selected" } }, "rule": { "primary": "مغروس في سكته مع لون تمييز + خاصية ARIA", "localized": { "ar": "مغروس في سكته مع لون تمييز + خاصية ARIA", "en": "Seated in its rail with accent fill + ARIA attribute" } } }, { "state": { "primary": "معطّل", "localized": { "ar": "معطّل", "en": "Disabled" } }, "rule": { "primary": "شفافية 55%، إشباع أقل، بلا حركة", "localized": { "ar": "شفافية 55%، إشباع أقل، بلا حركة", "en": "55% opacity, desaturated, no motion" } } }, { "state": { "primary": "تحميل", "localized": { "ar": "تحميل", "en": "Loading" } }, "rule": { "primary": "هياكل غائرة بمسح ضوئي أو مؤشر داخل الزر", "localized": { "ar": "هياكل غائرة بمسح ضوئي أو مؤشر داخل الزر", "en": "Recessed skeletons with a sweep, or a spinner inside the control" } } }, { "state": { "primary": "خطأ", "localized": { "ar": "خطأ", "en": "Error" } }, "rule": { "primary": "حافة حمراء + حلقة حمراء خفيفة + رسالة نصية", "localized": { "ar": "حافة حمراء + حلقة حمراء خفيفة + رسالة نصية", "en": "Red edge + soft red rim + a text message" } } } ], "methodology": [ { "phase": { "primary": "1 — التدقيق", "localized": { "ar": "1 — التدقيق", "en": "1 — Audit" } }, "body": { "primary": "جرد كل المسارات والمكوّنات والأنماط المتكررة قبل لمس أي صفحة، وفهم المنتج كنظام واحد.", "localized": { "ar": "جرد كل المسارات والمكوّنات والأنماط المتكررة قبل لمس أي صفحة، وفهم المنتج كنظام واحد.", "en": "Inventory every route, component and repeated pattern before touching a page; understand the product as one system." } } }, { "phase": { "primary": "2 — الأساس", "localized": { "ar": "2 — الأساس", "en": "2 — Foundation" } }, "body": { "primary": "التوكنات، الخامات، نموذج الإضاءة، الظلال، الحدود، الأقطار، الحركة — كلها مركزية في globals.css.", "localized": { "ar": "التوكنات، الخامات، نموذج الإضاءة، الظلال، الحدود، الأقطار، الحركة — كلها مركزية في globals.css.", "en": "Tokens, materials, lighting model, shadows, borders, radii, motion — all centralised in globals.css." } } }, { "phase": { "primary": "3 — الأوليات", "localized": { "ar": "3 — الأوليات", "en": "3 — Primitives" } }, "body": { "primary": "ترقية الأزرار والمدخلات والتبويبات والمفاتيح والشارات والنوافذ قبل أي صفحة.", "localized": { "ar": "ترقية الأزرار والمدخلات والتبويبات والمفاتيح والشارات والنوافذ قبل أي صفحة.", "en": "Upgrade buttons, inputs, tabs, switches, chips and dialogs before any page." } } }, { "phase": { "primary": "4 — الهيكل العام", "localized": { "ar": "4 — الهيكل العام", "en": "4 — Global shell" } }, "body": { "primary": "الهيدر كسكة، خلفية القاعدة، الفوتر الغرافيتي، الحاويات.", "localized": { "ar": "الهيدر كسكة، خلفية القاعدة، الفوتر الغرافيتي، الحاويات.", "en": "The header as a rail, the base background, the graphite footer, the containers." } } }, { "phase": { "primary": "5 — صفحة‑صفحة", "localized": { "ar": "5 — صفحة‑صفحة", "en": "5 — Page by page" } }, "body": { "primary": "ترحيل كل مسار مع حالات التحميل والفراغ والخطأ، دون حذف أي محتوى أو تغيير أي منطق.", "localized": { "ar": "ترحيل كل مسار مع حالات التحميل والفراغ والخطأ، دون حذف أي محتوى أو تغيير أي منطق.", "en": "Migrate every route including loading, empty and error states, deleting no content and changing no logic." } } }, { "phase": { "primary": "6 — الاستجابة", "localized": { "ar": "6 — الاستجابة", "en": "6 — Responsive review" } }, "body": { "primary": "فحص 1366px و390px بالعربية والإنكليزية: لا تجاوز أفقي، أهداف لمس مريحة، ظلال مبسّطة على الموبايل.", "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 — الصقل", "localized": { "ar": "7 — الصقل", "en": "7 — Polish" } }, "body": { "primary": "تدقيق اتساق شامل وكنس بقايا اللغة القديمة حتى يبدو كل شيء من فريق واحد ونظام واحد.", "localized": { "ar": "تدقيق اتساق شامل وكنس بقايا اللغة القديمة حتى يبدو كل شيء من فريق واحد ونظام واحد.", "en": "A full consistency audit and a sweep of legacy fragments until everything reads as one team, one system." } } } ], "do": [ { "primary": "ابدأ بصنف الخامة (skeu-panel، skeu-btn-primary…) ثم أضف أدوات Tailwind للتخطيط فقط.", "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": "اجعل المحتوى (صور المنتجات، الأرقام، النصوص) هو البطل، والأسطح تدعمه.", "localized": { "ar": "اجعل المحتوى (صور المنتجات، الأرقام، النصوص) هو البطل، والأسطح تدعمه.", "en": "Let content (product imagery, numbers, copy) be the hero; surfaces support it." } }, { "primary": "استخدم الخصائص المنطقية (start/end) وتأكد من النسختين العربية والإنكليزية.", "localized": { "ar": "استخدم الخصائص المنطقية (start/end) وتأكد من النسختين العربية والإنكليزية.", "en": "Use logical properties (start/end) and check both the Arabic and English versions." } }, { "primary": "أعطِ كل حالة (تحويم، ضغط، تركيز، معطّل) تمثيلاً مادياً واضحاً.", "localized": { "ar": "أعطِ كل حالة (تحويم، ضغط، تركيز، معطّل) تمثيلاً مادياً واضحاً.", "en": "Give every state (hover, pressed, focus, disabled) a clear physical expression." } }, { "primary": "احترم مستوى الارتفاع المناسب لدور العنصر — لا ترفع كل شيء.", "localized": { "ar": "احترم مستوى الارتفاع المناسب لدور العنصر — لا ترفع كل شيء.", "en": "Respect the elevation level that matches the element's role — don't raise everything." } } ], "dont": [ { "primary": "لا نيومورفية: كتل رمادية بظل فاتح أعلى‑يسار وظل داكن أسفل‑يمين.", "localized": { "ar": "لا نيومورفية: كتل رمادية بظل فاتح أعلى‑يسار وظل داكن أسفل‑يمين.", "en": "No neumorphism: grey blobs with a light shadow top-left and a dark shadow bottom-right." } }, { "primary": "لا جلد ولا خشب ولا قوام صور ثقيل — الخامات مصقولة ومضبوطة.", "localized": { "ar": "لا جلد ولا خشب ولا قوام صور ثقيل — الخامات مصقولة ومضبوطة.", "en": "No leather, wood or heavy image textures — materials are refined and restrained." } }, { "primary": "لا تدرجات زخرفية بلا سبب مادي، ولا ظلال عشوائية خارج التوكنات.", "localized": { "ar": "لا تدرجات زخرفية بلا سبب مادي، ولا ظلال عشوائية خارج التوكنات.", "en": "No decorative gradients without a physical reason, and no ad-hoc shadows outside the tokens." } }, { "primary": "لا تجعل كل شيء حبة دواء — لكل نوع كائن قطره.", "localized": { "ar": "لا تجعل كل شيء حبة دواء — لكل نوع كائن قطره.", "en": "Don't make everything a pill — each object type has its radius." } }, { "primary": "لا ظلال على النصوص، ولا تضحية بالتباين من أجل النعومة.", "localized": { "ar": "لا ظلال على النصوص، ولا تضحية بالتباين من أجل النعومة.", "en": "No text shadows, and never trade contrast for softness." } }, { "primary": "لا متغيرات rtl:/ltr: في Tailwind — الجذر مثبّت على RTL وتتسرب إلى النسخة الإنكليزية.", "localized": { "ar": "لا متغيرات rtl:/ltr: في Tailwind — الجذر مثبّت على RTL وتتسرب إلى النسخة الإنكليزية.", "en": "No Tailwind rtl:/ltr: variants — the root is hard-coded RTL and they leak into the English version." } } ], "tokens": [ { "name": "--skeu-bg", "value": "oklch(0.962 0.012 72)", "meaning": { "primary": "قاعدة البوليمر", "localized": { "ar": "قاعدة البوليمر", "en": "Polymer base" } } }, { "name": "--skeu-surface", "value": "oklch(0.993 0.004 80)", "meaning": { "primary": "سطح السيراميك", "localized": { "ar": "سطح السيراميك", "en": "Ceramic surface" } } }, { "name": "--skeu-well", "value": "oklch(0.955 0.01 72)", "meaning": { "primary": "لون البئر الغائر", "localized": { "ar": "لون البئر الغائر", "en": "Recessed well colour" } } }, { "name": "--skeu-accent", "value": "#f05d25", "meaning": { "primary": "برتقالي جنّي", "localized": { "ar": "برتقالي جنّي", "en": "GINI orange" } } }, { "name": "--skeu-accent-deep", "value": "#c9481a", "meaning": { "primary": "حافة التحكّمات المؤكسدة", "localized": { "ar": "حافة التحكّمات المؤكسدة", "en": "Anodized control edge" } } }, { "name": "--skeu-edge", "value": "oklch(0.86 0.018 68)", "meaning": { "primary": "لون حواف الأسطح", "localized": { "ar": "لون حواف الأسطح", "en": "Surface edge colour" } } }, { "name": "--skeu-highlight", "value": "rgba(255,255,255,0.92)", "meaning": { "primary": "الحافة العلوية المضيئة", "localized": { "ar": "الحافة العلوية المضيئة", "en": "Lit top edge" } } }, { "name": "--skeu-ink", "value": "37, 22, 10", "meaning": { "primary": "حبر الظلال الدافئ (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": "مكدّس البطاقة القياسية", "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": "مكدّس الزر الأساسي", "localized": { "ar": "مكدّس الزر الأساسي", "en": "Primary control stack" } } }, { "name": "--skeu-focus-rim", "value": "0 0 0 3px rgba(240,93,37,.22) + inset", "meaning": { "primary": "حلقة التركيز المضيئة", "localized": { "ar": "حلقة التركيز المضيئة", "en": "Illuminated focus rim" } } }, { "name": "--skeu-transition-fast / -normal", "value": "150ms / 260ms", "meaning": { "primary": "زمن الضغط / زمن الارتفاع", "localized": { "ar": "زمن الضغط / زمن الارتفاع", "en": "Press timing / lift timing" } } } ], "css": "https://gini.iq/brand.css", "skeuCss": "https://gini.iq/skeu.css" }, "press": { "boilerplate": { "primary": "جنّي (GINI) شركة عراقية لأتمتة الأسواق والتجارة الرقمية تأسّست عام 2023، تهدف إلى ربط التجار ومزودي الخدمات وشركات التوصيل وأنظمة الدفع ضمن منظومة تقنية موحدة. توفّر جنّي أدوات لإدارة الأعمال وعرض المنتجات والخدمات ومعالجة المدفوعات وإدارة الطلبات — مما يمكّن الشركات والتجار من النمو والوصول إلى ملايين المستخدمين بسهولة وكفاءة. مقرّها الرئيسي في بغداد، وتخدم التجار والمستهلكين في جميع المحافظات العراقية.", "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": "الاسم الرسمي", "localized": { "ar": "الاسم الرسمي", "en": "Legal name" } }, "value": { "primary": "GINI (جنّي)", "localized": { "ar": "GINI (جنّي)", "en": "GINI" } } }, { "label": { "primary": "سنة التأسيس", "localized": { "ar": "سنة التأسيس", "en": "Founded" } }, "value": { "primary": "2023", "localized": { "ar": "2023", "en": "2023" } } }, { "label": { "primary": "المقر", "localized": { "ar": "المقر", "en": "Headquarters" } }, "value": { "primary": "بغداد، العراق", "localized": { "ar": "بغداد، العراق", "en": "Baghdad, Iraq" } } }, { "label": { "primary": "النشاط", "localized": { "ar": "النشاط", "en": "Industry" } }, "value": { "primary": "أتمتة الأسواق والتجارة الرقمية", "localized": { "ar": "أتمتة الأسواق والتجارة الرقمية", "en": "Market automation & digital commerce" } } }, { "label": { "primary": "الموقع", "localized": { "ar": "الموقع", "en": "Website" } }, "value": { "primary": "gini.iq", "localized": { "ar": "gini.iq", "en": "gini.iq" } } }, { "label": { "primary": "التواصل الإعلامي", "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": "هل يمكنني استخدام الشعار في مقال أو فيديو عن جنّي؟", "localized": { "ar": "هل يمكنني استخدام الشعار في مقال أو فيديو عن جنّي؟", "en": "Can I use the GINI logo in an article or video about the company?" } }, "answer": { "primary": "نعم. الاستخدام التحريري (صحافة، مدوّنات، محتوى إخباري) مسموح به دون إذن مسبق، ما دام الشعار مُستخدماً كما هو موضّح هنا — بالنسب والألوان الأصلية.", "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": "أرغب بعمل علامة مشتركة مع جنّي — ما الخطوة؟", "localized": { "ar": "أرغب بعمل علامة مشتركة مع جنّي — ما الخطوة؟", "en": "I'd like to do a co-branded piece with GINI — what's the next step?" } }, "answer": { "primary": "راسلنا على info@gini.iq بتفاصيل المشروع والجدول الزمني. عادةً نردّ خلال 24 ساعة ونزوّدك بإرشادات إضافية وأصول خاصّة بالتعاون.", "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": "هل يمكنني تعديل الألوان لتتماشى مع هويّتي؟", "localized": { "ar": "هل يمكنني تعديل الألوان لتتماشى مع هويّتي؟", "en": "Can I recolour the logo to match my own identity?" } }, "answer": { "primary": "لا. استخدم الألوان الرسميّة فقط (برتقالي جنّي أو النسخة البيضاء). أي تعديل لوني يُعدّ إساءة استخدام للعلامة.", "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": "هل لديكم صور عالية الجودة للإعلام؟", "localized": { "ar": "هل لديكم صور عالية الجودة للإعلام؟", "en": "Do you have high-resolution press photos?" } }, "answer": { "primary": "نعم. راسلنا على info@gini.iq وسنرسل لك حزمة صور مخصّصة تشمل لقطات منتجات، فريق العمل، والمقر الرئيسي.", "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": "هل اسم «جنّي» و«GINI» علامات مسجّلة؟", "localized": { "ar": "هل اسم «جنّي» و«GINI» علامات مسجّلة؟", "en": "Are 'GINI' and the GINI wordmark registered trademarks?" } }, "answer": { "primary": "نعم، كلاهما علامتان تجاريّتان تخصّان GINI. يجب تجنّب استخدامهما لأسماء منتجات أو شركات مشابهة قد تُسبّب التباساً.", "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": "تُتاح أصول علامة جنّي على هذه الصفحة للاستخدام التحريري (صحافة، محتوى إخباري، مراجعات) وللشراكات المعتمدة. يُمنع تعديل الشعار أو ألوانه أو نسبه.", "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/brand" }, "version": { "current": "1.7", "updated": "2026-09", "changelog": [ { "version": "1.7", "date": "2026-09", "notes": { "primary": "نظام التصميم البصري (اسكيومورفية حديثة): الخامات، الإضاءة، سلّم الارتفاع، الحركة، فهرس المكوّنات والمنهجية — مع عيّنات حيّة.", "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": "الرمز الأحادي (حرف G) بلا نقطة برتقاليّة.", "localized": { "ar": "الرمز الأحادي (حرف G) بلا نقطة برتقاليّة.", "en": "One-colour monogram (G-mark, no orange accent)." } } }, { "version": "1.5", "date": "2026-04", "notes": { "primary": "الشعار الكامل أحاديّ اللون — أسود وأبيض.", "localized": { "ar": "الشعار الكامل أحاديّ اللون — أسود وأبيض.", "en": "One-colour wordmark — black and white." } } }, { "version": "1.4", "date": "2026-04", "notes": { "primary": "ملفّات الشعار الرسميّة وقسم الملكيّة التجاريّة.", "localized": { "ar": "ملفّات الشعار الرسميّة وقسم الملكيّة التجاريّة.", "en": "Official logo files and trademark section." } } }, { "version": "1.3", "date": "2026-04", "notes": { "primary": "تحسينات على بطاقات الشعار والنقش والعرض الرئيسي.", "localized": { "ar": "تحسينات على بطاقات الشعار والنقش والعرض الرئيسي.", "en": "Refinements to logo cards, pattern surfaces, and the hero." } } }, { "version": "1.2", "date": "2026-04", "notes": { "primary": "توسيع الدليل: أسس، تشريح، وصول، أسئلة شائعة.", "localized": { "ar": "توسيع الدليل: أسس، تشريح، وصول، أسئلة شائعة.", "en": "Expanded guide: foundation, anatomy, accessibility, FAQ." } } }, { "version": "1.1", "date": "2026-03", "notes": { "primary": "نسخة الشعار الداكنة وقيم Pantone.", "localized": { "ar": "نسخة الشعار الداكنة وقيم Pantone.", "en": "Dark-surface logo variant and Pantone values." } } }, { "version": "1.0", "date": "2026-02", "notes": { "primary": "الإصدار الأول من الدليل.", "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": "en", "json": "https://gini.iq/en/brand.json", "markdown": "https://gini.iq/en/brand.md" } }, "endpoints": { "json": "https://gini.iq/brand.json", "markdown": "https://gini.iq/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/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/" } }