GINI (جنّي)
The Iraqi gateway to global brands.
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.
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
Our signature pattern sits behind content to add depth, while keeping text contrast safe.
This 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
64 live components built from the very same classes that run this site. Every card shows the component working, with copy-ready HTML that works in any app — plain HTML, React or Vue — with zero dependencies.
One line pulls in every skeu-* class and token. Pair it with brand.css for the palette and typeface.
<link rel="stylesheet" href="https://gini.iq/skeu.css">@import url("https://gini.iq/skeu.css");<link rel="stylesheet" href="https://gini.iq/brand.css">
<link rel="stylesheet" href="https://gini.iq/skeu.css">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.
The anodized button at 32 / 40 / 44px. Size is layout only — the material is the same.
Ceramic secondary, tinted, ghost, destructive, and dark for graphite surfaces.
A 40px square with only an icon — never without aria-label.
Icon at the start edge, label after it — flips automatically in RTL.
A spinner inside the control with aria-busy and pointer disabled.
55% opacity, desaturated, no motion — the disabled attribute is enough.
Adjoining keys sharing one radius; the split button separates the main action from its menu.
A raised round button for the screen's main action — lives at the floating level.
The field is a recessed well; the error state adds is-invalid and a message linked via aria-describedby.
As printed on your ID.
Enter a valid email address.
The icon is pinned to the start edge with logical properties (start-3 / ps-9).
A pill-shaped input with a search icon and a keyboard shortcut hint on the end edge.
A native select inside a recessed well with a hand-drawn chevron on the end edge.
The same well with free height and a character counter below.
Soft recessed rows; each row is a full label so the touch target is ≥ 44px.
Options as cards; the chosen card is pressed in with an accent rim (skeu-panel-selected).
A mechanical role=switch with aria-checked; the thumb slides 20px.
Raised keys inside a well; the active key is seated in a deeper fill (skeu-tab-active).
A native range with accent-color inside a well, with a value readout in a meter.
A recessed well with an inner dashed border and an icon tile; the real input is visually hidden.
Six recessed one-character cells, always LTR for digits.
A native input[type=date] in the same well — you get the browser picker for free.
A raised panel, one column on phones and two from sm, with the actions in a bottom row.
A raised error alert above the form listing the failing fields with jump links.
An instrument readout (skeu-meter): small label, big tabular number, helper line.
Three readouts in a grid, each with a green or neutral delta chip.
An interactive panel: image in a ceramic tile, badge, IQD price, add-to-cart.
-20%A raised-2 panel with a “Most popular” chip, big price, feature list and a primary button.
An anodized icon tile, title, short body — the basic unit of any features grid.
Order before 2 pm and receive it tonight anywhere in Baghdad.
Quote, stars, and the speaker row with a ceramic avatar.
“Ordered at noon, it was at my door by seven. Never using another app.”
A two-letter avatar, name and role, and a stacked avatar group with white rings.
skeu-table: a raised sticky header, recessed body, rows that light up on hover with an accent edge.
| Order | Customer | Status | Total | |
|---|---|---|---|---|
| #48213 | Sara A. | Delivered | 89,000 | |
| #48212 | Omar K. | Shipping | 142,500 |
Key/value pairs in a soft well with engraved dividers — for order details and invoices.
A column of nodes: done (green), current (anodized), upcoming (well).
Four materials: tinted, solid, neutral, success — plus a counter chip and a dismissible chip.
A recessed track with an anodized fill; the ring is an SVG in the same colour with a readout in the middle.
A semicircle inside an instrument readout — for satisfaction, capacity or quotas.
A recessed well with a dashed inner border, a tinted icon tile, short copy and one action.
Recessed blocks with a light sweep, in the same geometry as the card they stand in for.
A panel of tappable rows with icon, title, subtitle, and a chevron that mirrors in RTL.
A raised system object with a coloured start edge — success, error, warning, info.
A short floating notice with icon, action and dismiss; enters with animate-skeu-pop.
A full-width accent well for in-page announcements, with a link and dismiss.
Free delivery on orders above 50,000 IQD until Friday. Details
A dimmed backdrop + overlay panel with animate-skeu-dialog; Escape closes and focus is trapped inside.
A floating surface with animate-skeu-pop, role=menuitem rows that rise on hover, and a red destructive item.
A small graphite surface above the trigger, linked via aria-describedby.
A floating surface with rich content (title, body, action) tied to a trigger with aria-expanded.
Redeem 1,000 pts for 5,000 IQD off your next order.
The same dialog with a warning tile and a red destructive button — for irreversible actions.
A dialog pinned to the bottom of the screen with a drag handle — for phones.
The four standard GINI states: preparing, out for delivery, delivered, cancelled.
Thumbnail, name, variant, quantity stepper, line price and a ghost remove button.
The current price is bold, the old one struck through, and the discount lives in a success chip.
Or 3 × 29,667 IQD with installments
Two ceramic keys around a readout well; the minimum disables the decrease key.
Three horizontal stops with a progress track between them — the mobile form of the timeline.
Logo in a ceramic tile, name, verified chip, rating, and a follow button.
Payment options as radio cards: Qi Card, ZainCash, cash on delivery.
A coupon field with an apply button, and an anodized loyalty chip with a tabular balance.
This same library — names, classes and HTML snippets — is available to any AI agent through brand.json and brand.md, and is embedded in brand-prompt.md, cursorrules and AGENTS.md.
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 merchants 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.
Every machine-readable artefact on this page is available at a stable URL. Pick a method, copy the line, paste into your project — or hand the URLs to Claude, Cursor, or v0 and they'll follow the brand automatically.
/* globals.css */
@import url("https://gini.iq/brand.css");
/* That's it — every --gini-* token + shadcn alias is now available. */
.btn-primary {
background: var(--gini-orange);
color: var(--gini-cream);
}Every method above is built on these underlying files. Stable URLs that any browser or AI agent can fetch directly.
Every brand value in a single JSON file
/en/brand.jsonViewHuman + LLM readable narrative
/en/brand.mdViewValidate manifest payloads programmatically
/schemas/brand-manifest.jsonViewEight SVG masters: full-colour and one-colour for any surface
/brand/View42 ready-to-use PNG poses of the GINI mascot
/brand/mascots/ViewStandard index every LLM crawls
/llms.txtViewEditorial and approved-partner use only. For commercial co-branding email info@gini.iq.
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.