GINI (جنّي)
Iraq's digital commerce infrastructure.
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.
The official guide to how GINI shows up in the world — an Iraqi company automating markets and digital commerce, empowering merchants of all sizes to grow within a unified digital ecosystem. Every asset is free to download.
GINI Orange · Pantone 1655 C
400 · 500 · 700 · 800
SVG + PNG formats
2026-09
Four pillars that steer our market automation and merchant empowerment ecosystem — guiding every design and editorial decision.
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.
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.
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.
Advanced digital tools for merchants of every size, strategic partnerships in payments and delivery, and an ecosystem that creates growth opportunities for all.
A mark representing Iraq's market automation and digital commerce ecosystem. The full wordmark for primary use, the monogram for tight spaces. Every file ships as native SVG.
The first-choice, default mark on every piece that represents GINI. Four approved backgrounds.
Default use on light surfaces — marketing and print material.
The default surface across the website and official collateral.
Video thumbnails and dark-mode collateral.
The wordmark without the orange accent — for pure black or white surfaces, or any hue that would clash with GINI Orange. Also the right pick for one-colour print, stamps, and embroidery.
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.
For one-colour print, or whenever surrounding colours might clash with GINI Orange.
Pure black surfaces — or any loud colour that would fight the brand orange.
Reach for the monogram (the G-mark) when the wordmark won't fit: avatars, app icons, and image watermarks.
The condensed GINI mark — watermarks, avatars, and square icons on light surfaces.
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.
Single-ink G on pure white — and any surface where the orange accent would clash.
Single-ink G on pure black — and any saturated colour that would fight the brand orange.
Every product has a mark of its own under the GINI umbrella. The product mark is used inside the product and its material; the GINI mark remains the signature on anything that represents the company.
svgThe unified online marketplace — the primary consumer product mark.
svgThe weekly wholesale market — a seasonal mark in the same family.
pngThe points and rewards programme — a mark that also appears inside partner apps.
svgThe draws and prizes platform with Qi Card — a co-branded mark shown beside its partner.
The GINI mark leads on the start side, then a rule one G-height tall, then the product mark at the same height.
The numbers that keep the mark legible and consistent wherever it appears.
The grid above visualises the minimum clear space around the mark: the dashed safe area must remain at least one G-height on every side.
Maintain a clear space equal to the G-height on every side.
Smallest on-screen width where the wordmark stays legible.
Any printed medium: cards, envelopes, signage.
Don't alter the ratio — no stretching or squashing.
Two short lists keep the mark sharp: what to always do, and what to never do.
The name, wordmark, monogram, associated product marks, and brand colours are legally protected intellectual property. No third party may use them without formal reference to us.
© 2023–2026 GINI. All rights reserved. ‘GINI’, ‘جنّي’, the full wordmark, the monogram, and the primary brand colour (Orange #F05D25) are trademarks registered with the Intellectual Property Directorate of the Republic of Iraq. Use, reproduction, or alteration without prior written permission from GINI is prohibited.
The names ‘GINI’ and ‘جنّي’, the full wordmark, the monogram (the G-mark), sub-product names such as ‘GINI Market’ and ‘GINI Jumaa’, the primary brand colour (Orange #F05D25), and our signature pattern — all legally protected marks and assets.
Editorial use (press, reviews, news coverage) using the assets exactly as shown in this guide — no modification to form, colour, or proportions. Any commercial use requires prior written permission.
Registering domains, apps, or companies with names confusingly similar to ‘GINI’, modifying the logo or its colours or stretching it, applying it to unauthorised merchandise or services, or presenting content in a way that implies official GINI affiliation when none exists.
If you spot unauthorised use of GINI assets, email info@gini.iq with evidence (links, screenshots) and we'll pursue it through legal channels within 72 business hours.
A warm primary anchored by considered neutrals — built for clarity and contrast.
GINI Orange
Primary brand colour — logo, buttons, interactive elements.
Ember
Darker shade for hover states and type on light fills.
Night Ink
Primary text and headlines on light surfaces.
Warm Cream
Primary surface across the site and marketing material.
Quiet Sand
Secondary surfaces for cards and section dividers.
Every pair below has been measured against WCAG 2.1 — use it without second-guessing.
Aa · GINI
This body text reads clearly.
AAADefault pairing for long-form body copy.
Aa · GINI
This body text reads clearly.
AAACopy set on sand-toned cards.
Aa · GINI
This body text reads clearly.
AA-largeLarge headings and buttons only (18px+). Avoid body copy.
Aa · GINI
This body text reads clearly.
AA-largeEmber for headings and display numbers (18px+) on cream. For body-size text use the text-safe orange #B8410F (5.1 : 1).
Aa · GINI
This body text reads clearly.
AAADark mode for product pages and video thumbnails.
Aa · GINI
This body text reads clearly.
AAAWarm accent on dark surfaces.
We rely on Rubik across weights to build a clear visual hierarchy across every surface.
Rubik · Google Fonts
Arabic + Latin subsets
GINI — your trade partner.
One marketplace. Everything you need.
Smart shopping, secure payments, fast delivery.
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.
BRAND GUIDE • VERSION 1
Lucide is the single icon source, drawn at one stroke weight with rounded joins that sit naturally next to the typeface and the mark.
ShoppingBagTruckCreditCardGiftTrophyStoreUsersPackageWalletSearchBellSettings#1A1A1AInterface icons on light surfaces#F05D25The active icon and anodized tiles#FFFFFFOn orange and graphiteEvery distance is a multiple of 4px and every page lives inside a fixed-width container. That is what makes different screens read as one family.
| Breakpoint | From | Device |
|---|---|---|
| sm | 640px | Large phones |
| md | 768px | Tablets |
| lg | 1024px | Laptops |
| xl | 1280px | Wide desktops |
| measure | 65ch | Reading width for prose |
| touch | 44px | Smallest touch target |
Our signature pattern sits behind content to add depth, while keeping text contrast safe.
A GINI image shows a real merchant or customer in context, in natural light and warm tones — no generic stock, no staged scenes.
Real merchants and customers in their markets, shops and homes. Faces are photographed with consent; products are shown as they are sold.
Natural light and warm grading that leans cream and orange; no cold filters, no over-saturation.
One clear subject per image and a calm background that leaves room for copy when text sits on top.
Illustration is built from the official mascot and simple shapes in palette colours; never mix drawing styles in one piece.
16:9
4:5
1:1This section is the primary reference for how the GINI interface is built visually: philosophy, lighting model, materials, elevation levels, motion and every ready-made component. Every specimen below is live and built from the real classes used on the site.
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.
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".
Real components with the real classes — try them.
skeu-btn-*skeu-input · skeu-chipskeu-tab / skeu-tab-activeskeu-toggle · skeu-check · skeu-radioskeu-meter · skeu-track / skeu-fillskeu-panel · skeu-well · skeu-dark · skeu-alertBefore 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.
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.
Only four material families, only eight elevation levels, grain that is felt rather than noticed. Depth hierarchy matters more than the quantity of shadows.
Base → recessed functional areas → raised content surfaces → physical controls → floating overlays. Users understand it without thinking.
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.
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.
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.
body / .skeu-wellUsed for: Page base, recessed trays and wells, input fields
Recipe: 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.
.skeu-panel / .skeu-panel-2 / .skeu-rail / .skeu-dialogUsed for: Cards, panels, the navigation rail, dialogs, secondary buttons
Recipe: Vertical gradient from white to warm white, a 1px edge border, an inner top highlight, and contact + ambient shadows according to the elevation level.
.skeu-btn-primary / .skeu-tile / .skeu-tab-active / .skeu-chip-solidUsed for: The primary button, icon tiles, the active tab, solid badges, the ON switch
Recipe: Gradient from #cc4914 at the top through #c4461a to #b83f16 at the bottom (a slight dome, ≥4.6:1 under white text), #a83c15 border, a 38% white top gloss, a 2px darker bottom band that reveals thickness, and a soft orange outer glow. The pressed state is darker and recessed.
.skeu-dark / .skeu-btn-darkUsed for: The footer, code windows, dark CTA blocks and the controls on them
Recipe: 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.
Only eight levels. Every element lives at the level that matches its role and rises or sinks on interaction.
.skeu-well--skeu-shadow-recessedFunctional content trays, progress tracks, the soft selected tab
.skeu-input / .skeu-well-soft--skeu-shadow-wellInputs, checkboxes and switches, row lists
.skeu-btn-ghost / .skeu-list-item--skeu-shadow-flushMenu rows and ghost buttons at rest — they rise on interaction
.skeu-panel--skeu-shadow-raised-1Standard cards, large chips, alerts
.skeu-panel-2 / .skeu-rail--skeu-shadow-raised-2Hero panels, major containers, the header rail, any card on hover
.skeu-floating--skeu-shadow-floatingDropdowns, floating pills, popovers
.skeu-dialog--skeu-shadow-overlayDialogs above a lightly dimmed backdrop
:active / .skeu-tab-active--skeu-shadow-pressedThe instant any control is pressed, and the selected tab
skeu-panelskeu-panel-2skeu-panel-interactiveskeu-panel-selectedskeu-floatingskeu-dialog + skeu-backdropskeu-railskeu-well / -soft / -accentskeu-darkskeu-btn-primaryskeu-btn-secondaryskeu-btn-tintskeu-btn-ghostskeu-btn-destructiveskeu-inputskeu-check / skeu-radioskeu-toggleskeu-tab / skeu-tab-activeskeu-tile / -soft / -ceramicskeu-chip / -solid / -neutral / -successskeu-meterskeu-table / skeu-rowskeu-alert-*skeu-skeletonskeu-track / skeu-fillskeu-divider| State | Physical expression |
|---|---|
| Default | Raised in its natural material |
| Hover | Rises 1–2px with stronger highlight |
| Pressed | Drops 1px, inset shadow, deeper fill |
| Focus | A 3px orange illuminated rim — always visible |
| Selected | Seated in its rail with accent fill + ARIA attribute |
| Disabled | 55% opacity, desaturated, no motion |
| Loading | Recessed skeletons with a sweep, or a spinner inside the control |
| Error | Red edge + soft red rim + a text message |
How the whole product was migrated to the new system, and the same method required for any new screen.
Inventory every route, component and repeated pattern before touching a page; understand the product as one system.
Tokens, materials, lighting model, shadows, borders, radii, motion — all centralised in globals.css.
Upgrade buttons, inputs, tabs, switches, chips and dialogs before any page.
The header as a rail, the base background, the graphite footer, the containers.
Migrate every route including loading, empty and error states, deleting no content and changing no logic.
Check 1366px and 390px in Arabic and English: no horizontal overflow, comfortable touch targets, simplified shadows on mobile.
A full consistency audit and a sweep of legacy fragments until everything reads as one team, one system.
The single truth for colours, shadows and timings. No shadows are invented outside it.
:root {
--skeu-bg: oklch(0.962 0.012 72); /* Polymer base */
--skeu-surface: oklch(0.993 0.004 80); /* Ceramic surface */
--skeu-well: oklch(0.955 0.01 72); /* Recessed well colour */
--skeu-accent: #f05d25; /* GINI orange */
--skeu-accent-deep: #c9481a; /* Anodized control edge */
--skeu-accent-text: #b8410f; /* Text-safe orange (AA body text) */
--skeu-accent-text-strong: #8f3210; /* Orange text on 13–16% accent tints */
--skeu-edge-control: oklch(0.62 0.02 66); /* Form-control boundary (≥3:1) */
--skeu-edge: oklch(0.86 0.018 68); /* Surface edge colour */
--skeu-highlight: rgba(255,255,255,0.92); /* Lit top edge */
--skeu-ink: 37, 22, 10; /* Warm shadow ink (RGB) */
--skeu-shadow-raised-1: inset 0 1px 0 highlight, 0 1px 1px, 0 2px 4px -1px, 0 10px 24px -14px; /* Standard card stack */
--skeu-shadow-control: inset 0 1px 0 white/38, inset 0 -2px 0 dark/32, 0 1px 2px, 0 6px 14px -6px orange/55; /* Primary control stack */
--skeu-focus-rim: 0 0 0 2px #fff, 0 0 0 4px --skeu-accent-deep + inset; /* Two-tone focus rim (≥3:1) */
--skeu-transition-fast / -normal: 150ms / 260ms; /* Press timing / lift timing */
}This same content is available to any AI agent or dev tool at:
Live implementation: app/globals.css · 2026-09
A 3D character in an orange quiff and a black hoodie — our way of making every GINI touchpoint feel warm, friendly, and unmistakably Iraqi.
Four traits guide every sentence we write — from ads to customer service replies.
We speak in plain language — close to our customers, true to the local culture.
We make promises we keep, and are honest about what we do and don't know.
Short sentences, clear ideas. Every word earns its place.
We see the opportunity before the obstacle, and build tools that unlock the next step.
We empower partners to grow digitally — with integrated management, payments, and delivery tools.
The leading platform delivering an unparalleled shopping experience.
Why: State what we do for merchants and consumers alike, don't claim leadership without proof.
We couldn't complete the payment. Try another card or contact us.
An error occurred while processing your request. Please try again later.
Why: Explain what happened, then offer the next step. Never leave the customer in limbo.
Paste the paragraph below into your article or release as-is — or pull any of the quick facts directly.
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.
If you don't find what you're looking for, email info@gini.iq.
Email info@gini.iq and we'll send custom imagery or a quote-approved statement within 24 hours.