--- title: GINI Brand Guide brand: GINI locale: en-US version: 1.7 updated: 2026-09 primary_color: #F05D25 font_family: Rubik canonical: https://gini.iq/en/brand json_manifest: https://gini.iq/en/brand.json --- # GINI Brand Guide > **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. This page is the authoritative source for everything about representing GINI visually and verbally. For programmatic use, the JSON manifest lives at: `https://gini.iq/en/brand.json`. ## About - **Legal name:** GINI - **Localised name:** GINI (جنّي) - **Headquarters:** Baghdad, Iraq - **Founded:** 2023 - **Industry:** E-commerce & platform services - **Website:** https://gini.iq - **Press:** info@gini.iq ## Identity ### Principles #### Mission — We build Iraq's digital commerce infrastructure. 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. #### Vision — To empower every merchant to grow digitally. 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. #### Positioning — Iraq's market automation and digital commerce company. 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. #### Promise — Empower merchants. Simplify commerce. Advanced digital tools for merchants of every size, strategic partnerships in payments and delivery, and an ecosystem that creates growth opportunities for all. ### What we are - Digital commerce infrastructure - Enablers for merchants of all sizes - An integrated payments and delivery ecosystem - Partners in business growth ### What we are not - Just an online store - Disconnected, siloed solutions - A consumer-only platform - A copy of foreign models ## Visual system ### Colour palette | ID | Name | HEX | RGB | CMYK | Pantone | Role | |---|---|---|---|---|---|---| | `gini-orange` | GINI Orange | `#F05D25` | `rgb(240, 93, 37)` | `0, 70, 95, 0` | PANTONE 1655 C | Primary brand colour — logo, buttons, interactive elements. | | `gini-ember` | Ember | `#D94E1A` | `rgb(217, 78, 26)` | `0, 76, 99, 10` | PANTONE 1665 C | Darker shade for hover states and type on light fills. | | `gini-ink` | Night Ink | `#1A1A1A` | `rgb(26, 26, 26)` | `0, 0, 0, 90` | — | Primary text and headlines on light surfaces. | | `gini-cream` | Warm Cream | `#FBF6F0` | `rgb(251, 246, 240)` | `0, 2, 4, 2` | — | Primary surface across the site and marketing material. | | `gini-sand` | Quiet Sand | `#EFE6DB` | `rgb(239, 230, 219)` | `0, 4, 8, 6` | — | Secondary surfaces for cards and section dividers. | ### Accessibility | Foreground | Background | Ratio | WCAG | Use | |---|---|---|---|---| | `#1A1A1A` | `#FBF6F0` | 16.2 : 1 | AAA | Default pairing for long-form body copy. | | `#1A1A1A` | `#EFE6DB` | 14.1 : 1 | AAA | Copy set on sand-toned cards. | | `#FFFFFF` | `#F05D25` | 3.3 : 1 | AA-large | Large headings and buttons only (18px+). Avoid body copy. | | `#D94E1A` | `#FBF6F0` | 3.9 : 1 | AA-large | Ember for headings and display numbers (18px+) on cream. For body-size text use the text-safe orange #B8410F (5.1 : 1). | | `#FFFFFF` | `#1A1A1A` | 17.4 : 1 | AAA | Dark mode for product pages and video thumbnails. | | `#FBF6F0` | `#1A1A1A` | 16.2 : 1 | AAA | Warm accent on dark surfaces. | ## Typography ### Font family - **Primary:** Rubik (Sans-serif) - **Weights:** 400, 500, 700, 800 - **Specimen:** https://fonts.google.com/specimen/Rubik - **Fallback:** `Rubik, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans Arabic", "Noto Sans", sans-serif` ### Type scale | Token | Size | Weight | Line-height | Usage | |---|---|---|---|---| | **Display** | 32–48 / 1.15 | 800 | 115% | Hero titles on marketing pages and campaigns. | | **Heading** | 36–48 / 1.15 | 700 | 115% | Section titles within pages. | | **Subheading** | 20–24 / 1.25 | 600 | 125% | Card titles and mid-level components. | | **Body** | 16–18 / 1.6 | 400 | 160% | Paragraphs and general reading copy. | | **Caption** | 12–14 / 1.4 | 600 | tracked 0.18em | Section labels and small eyebrow tags. | ## Logo - **Download (SVG):** https://gini.iq/logo.svg ### Variants - **Primary wordmark** — Default use on light surfaces — marketing and print material. - background: `light`, mode: `color`, SVG: https://gini.iq/brand/gini-logo-black.svg - **On cream surface** — The default surface across the website and official collateral. - background: `cream`, mode: `color`, SVG: https://gini.iq/brand/gini-logo-black.svg - **On brand fill** — 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. - background: `brand`, mode: `mono`, SVG: https://gini.iq/brand/gini-wordmark-mono-white.svg - **On dark surface** — Video thumbnails and dark-mode collateral. - background: `dark`, mode: `white`, SVG: https://gini.iq/brand/gini-logo-white.svg - **One-colour — on pure white** — For one-colour print, or whenever surrounding colours might clash with GINI Orange. - background: `pure-white`, mode: `mono`, SVG: https://gini.iq/brand/gini-wordmark-mono-black.svg - **One-colour — on pure black** — Pure black surfaces — or any loud colour that would fight the brand orange. - background: `pure-black`, mode: `mono`, SVG: https://gini.iq/brand/gini-wordmark-mono-white.svg - **Monogram** — The condensed GINI mark — watermarks, avatars, and square icons on light surfaces. - background: `cream`, mode: `monogram`, SVG: https://gini.iq/brand/gini-monogram-black.svg - **Monogram on brand fill** — 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. - background: `brand`, mode: `mono`, SVG: https://gini.iq/brand/gini-monogram-mono-white.svg - **Monogram — one-colour on pure white** — Single-ink G on pure white — and any surface where the orange accent would clash. - background: `pure-white`, mode: `mono`, SVG: https://gini.iq/brand/gini-monogram-mono-black.svg - **Monogram — one-colour on pure black** — Single-ink G on pure black — and any saturated colour that would fight the brand orange. - background: `pure-black`, mode: `mono`, SVG: https://gini.iq/brand/gini-monogram-mono-white.svg ### Anatomy - **Clear space (= 1× G)** — Maintain a clear space equal to the G-height on every side. - **Min. digital size (24 px)** — Smallest on-screen width where the wordmark stays legible. - **Min. print size (16 mm)** — Any printed medium: cards, envelopes, signage. - **Aspect ratio (≈ 3.1 : 1)** — Don't alter the ratio — no stretching or squashing. ### Do - Keep a clear space around the mark equal to the height of the G at minimum. - Don't render the logo narrower than 24px on screen or 16mm in print. - Only use the original orange or the white knocked-out version. - On any orange surface — or any tint of it — use only the white version of the logo. - Verify background contrast before exporting — check the accessibility table. ### Don't - Don't rotate or change the orientation of the logo. - Never place the black or full-colour logo on an orange surface. - Don't replace the colours with anything outside the official palette. - Don't stretch or squash the logo — preserve its native proportions. - Don't add strokes, shadows, or any effects around the logo. ## Design system — modern skeuomorphism (v1.0.0) > 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". ### Principles - **Real-world physical logic** — 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. - **One light source** — 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. - **Restraint over spectacle** — Only four material families, only eight elevation levels, grain that is felt rather than noticed. Depth hierarchy matters more than the quantity of shadows. - **A clear depth hierarchy** — Base → recessed functional areas → raised content surfaces → physical controls → floating overlays. Users understand it without thinking. - **Clarity always wins** — 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. - **Accessibility is non-negotiable** — 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 model 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. - Every shadow is offset downward (positive y); horizontal offsets are negligible. - Shadow ink is warm (rgb 37 22 10), never neutral black — it harmonises with the cream base. - The lit top edge is mandatory on every raised surface; the bottom edge is slightly darker to reveal thickness. - Gradients are allowed only when they describe curvature, light or material — never decorative gradients. ### Materials | Material | Class | Used for | Recipe | |---|---|---|---| | Matte polymer | `body / .skeu-well` | Page base, recessed trays and wells, input fields | 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. | | Raised ceramic | `.skeu-panel / .skeu-panel-2 / .skeu-rail / .skeu-dialog` | Cards, panels, the navigation rail, dialogs, secondary buttons | Vertical gradient from white to warm white, a 1px edge border, an inner top highlight, and contact + ambient shadows according to the elevation level. | | Anodized orange | `.skeu-btn-primary / .skeu-tile / .skeu-tab-active / .skeu-chip-solid` | The primary button, icon tiles, the active tab, solid badges, the ON switch | 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. | | Graphite | `.skeu-dark / .skeu-btn-dark` | The footer, code windows, dark CTA blocks and the controls on them | 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 ladder | Level | Token | Class | Used for | |---|---|---|---| | Recessed | `--skeu-shadow-recessed` | `.skeu-well` | Functional content trays, progress tracks, the soft selected tab | | Well | `--skeu-shadow-well` | `.skeu-input / .skeu-well-soft` | Inputs, checkboxes and switches, row lists | | Flush | `--skeu-shadow-flush` | `.skeu-btn-ghost / .skeu-list-item` | Menu rows and ghost buttons at rest — they rise on interaction | | Raised 1 | `--skeu-shadow-raised-1` | `.skeu-panel` | Standard cards, large chips, alerts | | Raised 2 | `--skeu-shadow-raised-2` | `.skeu-panel-2 / .skeu-rail` | Hero panels, major containers, the header rail, any card on hover | | Floating | `--skeu-shadow-floating` | `.skeu-floating` | Dropdowns, floating pills, popovers | | Overlay | `--skeu-shadow-overlay` | `.skeu-dialog` | Dialogs above a lightly dimmed backdrop | | Pressed | `--skeu-shadow-pressed` | `:active / .skeu-tab-active` | The instant any control is pressed, and the selected tab | ### Radii - `--skeu-radius-xs` = 6px — Tiny chips and tags - `--skeu-radius-sm` = 10px — Standard buttons, inputs, small controls - `--skeu-radius-md` = 14px — Tiles and tabs - `--skeu-radius-lg` = 20px — Cards and panels - `--skeu-radius-xl` = 26px — Dialogs and the navigation rail ### Motion - **Button press — 80ms** — Drops 1px as the outer shadow turns into an inset; returns within 150ms. - **Card hover — 260ms** — Rises 2px from Raised-1 to Raised-2 on cubic-bezier(0.22, 1, 0.36, 1). - **Tab selection** — The new tab sinks 1px with a deeper fill; the previous one springs back. - **Switch** — The thumb slides 20px mechanically over 260ms while the track illuminates. - **Dropdown — 180ms** — Appears with a small lift and fade (animate-skeu-pop). - **Dialog — 260ms** — Rises from the base with a controlled 0.97 → 1 scale (animate-skeu-dialog). - **Reduced motion** — All motion is disabled under prefers-reduced-motion; states remain readable through shape and colour. ### Component catalog **Surfaces** - `skeu-panel` — Raised panel: The standard card - `skeu-panel-2` — Raised panel 2: Major containers and heroes - `skeu-panel-interactive` — Interactive panel: A clickable card that rises and seats - `skeu-panel-selected` — Selected panel: A locked/selected card pressed in with an accent rim - `skeu-floating` — Floating surface: Dropdowns and pills - `skeu-dialog + skeu-backdrop` — Dialog: The overlay and its backdrop - `skeu-rail` — Navigation rail: The header and sticky toolbars - `skeu-well / -soft / -accent` — Recessed well: Functional trays and highlighted rows - `skeu-dark` — Graphite surface: Footer and code windows **Controls** - `skeu-btn-primary` — Primary button: The main action — anodized orange - `skeu-btn-secondary` — Secondary button: Matte ceramic button - `skeu-btn-tint` — Tinted button: A secondary action with accent identity - `skeu-btn-ghost` — Ghost button: Flush until hovered, then rises - `skeu-btn-destructive` — Destructive button: Machined red - `skeu-input` — Input: A recessed well with an illuminated focus rim - `skeu-check / skeu-radio` — Checkbox / radio: An engraved well that lights when set - `skeu-toggle` — Switch: Recessed track and physical thumb - `skeu-tab / skeu-tab-active` — Segmented tab: A raised key; the active one seated in a deeper fill **Small elements** - `skeu-tile / -soft / -ceramic` — Icon tile: Anodized / tinted well / white ceramic - `skeu-chip / -solid / -neutral / -success` — Chip / badge: Embossed pills with a hairline edge - `skeu-meter` — Instrument readout: Stats and KPIs - `skeu-table / skeu-row` — Table / row: Raised header, recessed body, tactile rows - `skeu-alert-*` — Alert: Elevated system objects with a semantic edge - `skeu-skeleton` — Skeleton: Recessed blocks with a light sweep - `skeu-track / skeu-fill` — Progress track: Recessed track and anodized fill - `skeu-divider` — Engraved divider: A dark line over a light line ### Component library (64) 64 copy-ready components built only from the `skeu-*` classes served at `https://gini.iq/skeu.css` plus Tailwind layout utilities. Install: ```html ``` or `@import url("https://gini.iq/skeu.css");` — pair with `https://gini.iq/brand.css` for the palette. 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. #### Actions **Primary button — three sizes** — `skeu-btn`, `skeu-btn-primary` The anodized button at 32 / 40 / 44px. Size is layout only — the material is the same. ```html ``` **Button family** — `skeu-btn-secondary`, `skeu-btn-tint`, `skeu-btn-ghost`, `skeu-btn-destructive`, `skeu-btn-dark` Ceramic secondary, tinted, ghost, destructive, and dark for graphite surfaces. ```html
``` **Icon button** — `skeu-btn`, `skeu-btn-secondary`, `skeu-btn-primary` A 40px square with only an icon — never without aria-label. ```html ``` **Button with leading icon** — `skeu-btn`, `skeu-btn-primary` Icon at the start edge, label after it — flips automatically in RTL. ```html ``` **Loading button** — `skeu-btn`, `skeu-btn-primary` A spinner inside the control with aria-busy and pointer disabled. ```html ``` **Disabled button** — `skeu-btn` 55% opacity, desaturated, no motion — the disabled attribute is enough. ```html ``` **Button group / split button** — `skeu-btn-secondary`, `skeu-btn-primary` Adjoining keys sharing one radius; the split button separates the main action from its menu. ```html
``` **Floating action button** — `skeu-btn`, `skeu-btn-primary`, `shadow-floating` A raised round button for the screen's main action — lives at the floating level. ```html ``` #### Forms **Text field with label, help and error** — `skeu-input`, `is-invalid` The field is a recessed well; the error state adds is-invalid and a message linked via aria-describedby. ```html

As printed on your ID.

Enter a valid email address.

``` **Input with leading icon** — `skeu-input` The icon is pinned to the start edge with logical properties (start-3 / ps-9). ```html ``` **Search field** — `skeu-input`, `skeu-chip-neutral` A pill-shaped input with a search icon and a keyboard shortcut hint on the end edge. ```html ``` **Select** — `skeu-input` A native select inside a recessed well with a hand-drawn chevron on the end edge. ```html ``` **Textarea** — `skeu-input` The same well with free height and a character counter below. ```html ``` **Checkbox list** — `skeu-check`, `skeu-well-soft` Soft recessed rows; each row is a full label so the touch target is ≥ 44px. ```html
Notifications
``` **Radio group** — `skeu-check`, `skeu-radio`, `skeu-panel`, `skeu-panel-selected` Options as cards; the chosen card is pressed in with an accent rim (skeu-panel-selected). ```html
Delivery speed
``` **Switch row** — `skeu-toggle`, `skeu-panel` A mechanical role=switch with aria-checked; the thumb slides 20px. ```html
Push notificationsOrder status on your phone
Marketing emailsOffers and new merchants
``` **Segmented control** — `skeu-well`, `skeu-tab`, `skeu-tab-active` Raised keys inside a well; the active key is seated in a deeper fill (skeu-tab-active). ```html
``` **Slider** — `skeu-well`, `skeu-meter` A native range with accent-color inside a well, with a value readout in a meter. ```html
320K
``` **File drop zone** — `skeu-well`, `skeu-tile-soft`, `skeu-btn-secondary` A recessed well with an inner dashed border and an icon tile; the real input is visually hidden. ```html ``` **OTP / code row** — `skeu-input` Six recessed one-character cells, always LTR for digits. ```html
``` **Date input** — `skeu-input` A native input[type=date] in the same well — you get the browser picker for free. ```html
``` **Two-column form layout** — `skeu-panel`, `skeu-input`, `skeu-btn-primary`, `skeu-btn-ghost` A raised panel, one column on phones and two from sm, with the actions in a bottom row. ```html

Shipping address

``` **Inline validation summary** — `skeu-alert`, `skeu-alert-error` A raised error alert above the form listing the failing fields with jump links. ```html ``` #### Navigation **Navbar (rail)** — `skeu-rail`, `skeu-tab`, `skeu-tab-active`, `skeu-btn-primary` A frosted ceramic rail: logo, links, and the primary action on the end edge. ```html ``` **Breadcrumb** — `skeu-chip-neutral`, `skeu-chip` Ceramic chips separated by chevrons; the current page carries aria-current. ```html ``` **Tabs — underline and segmented** — `skeu-divider`, `skeu-tab`, `skeu-tab-soft-active` Underline for pages (a lit line under the active tab), segmented for filters. ```html
``` **Pagination** — `skeu-tab`, `skeu-tab-active`, `skeu-btn-secondary` 36px square keys; the current page is seated, previous/next are icon buttons. ```html ``` **Stepper / progress steps** — `skeu-chip-success`, `skeu-tile`, `skeu-tile-soft`, `skeu-track`, `skeu-fill` Done steps are green tiles, the current one anodized, upcoming ones recessed wells — the connector is a progress track. ```html
  2. 2
  3. 3
``` **Sidebar list** — `skeu-panel`, `skeu-list-item`, `skeu-well-accent` Flush rows that rise on hover (skeu-list-item); the active item is an accent well. ```html ``` **Bottom mobile tab bar** — `skeu-rail`, `skeu-tile`, `skeu-tile-soft` A rail fixed to the bottom with four destinations; the active one is an anodized tile. ```html ``` **Back button** — `skeu-btn`, `skeu-btn-ghost` A ghost button whose arrow mirrors in RTL through -scale-x-100 under [dir=rtl]. ```html Back to orders ``` #### Data display **KPI tile** — `skeu-meter` An instrument readout (skeu-meter): small label, big tabular number, helper line. ```html
Orders today
1,284
Updated 2 min ago
``` **Stat row with delta chip** — `skeu-meter`, `skeu-chip-success`, `skeu-chip-neutral` Three readouts in a grid, each with a green or neutral delta chip. ```html
Revenue
48.2M+12%
Orders
3,410+4%
Returns
1.8%±0
``` **Product card** — `skeu-panel`, `skeu-panel-interactive`, `skeu-tile-ceramic`, `skeu-chip-solid`, `skeu-btn-primary` An interactive panel: image in a ceramic tile, badge, IQD price, add-to-cart. ```html
Wireless headphones -20%

Wireless headphones ANC

89,000 IQD112,000
``` **Pricing card** — `skeu-panel-2`, `skeu-chip-solid`, `skeu-btn-primary` A raised-2 panel with a “Most popular” chip, big price, feature list and a primary button. ```html
Most popular
GINI Plus
15,000IQD / month
``` **Feature card** — `skeu-panel`, `skeu-tile` An anodized icon tile, title, short body — the basic unit of any features grid. ```html

Same-day delivery

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

``` **Testimonial card** — `skeu-panel`, `skeu-tile-ceramic` Quote, stars, and the speaker row with a ceramic avatar. ```html
“Ordered at noon, it was at my door by seven. Never using another app.”
SA Sara A.Basra · verified buyer
``` **User card + avatar group** — `skeu-panel`, `skeu-tile`, `skeu-tile-ceramic`, `skeu-chip-neutral` A two-letter avatar, name and role, and a stacked avatar group with white rings. ```html
AH Ali HassanMerchant · Karrada Admin
MK RS ZA +6
``` **Table with header, rows and actions** — `skeu-table`, `skeu-chip-success`, `skeu-chip`, `skeu-btn-ghost` skeu-table: a raised sticky header, recessed body, rows that light up on hover with an accent edge. ```html
OrderCustomerStatusTotal
#48213Sara A.Delivered89,000
#48212Omar K.Shipping142,500
``` **Description list** — `skeu-well-soft` Key/value pairs in a soft well with engraved dividers — for order details and invoices. ```html
Order
#48213
Placed
12 Sep 2026, 14:02
Payment
Qi Card •• 4821
Total
89,000 IQD
``` **Timeline** — `skeu-chip-success`, `skeu-tile`, `skeu-tile-soft`, `skeu-divider` A column of nodes: done (green), current (anodized), upcoming (well). ```html
  1. Order confirmed
    14:02
  2. Being packed
    Now · Merchant: TechZone
  3. Out for delivery
``` **Badges and chips** — `skeu-chip`, `skeu-chip-solid`, `skeu-chip-neutral`, `skeu-chip-success` Four materials: tinted, solid, neutral, success — plus a counter chip and a dismissible chip. ```html New Featured Draft Verified 99+ Basra ``` **Progress bar + circular progress** — `skeu-track`, `skeu-fill` A recessed track with an anodized fill; the ring is an SVG in the same colour with a readout in the middle. ```html
Uploading68%
68%
``` **Meter / gauge** — `skeu-meter` A semicircle inside an instrument readout — for satisfaction, capacity or quotas. ```html
72%
Fleet capacity
``` **Empty state** — `skeu-well`, `skeu-tile-soft`, `skeu-btn-primary` A recessed well with a dashed inner border, a tinted icon tile, short copy and one action. ```html

Your cart is empty

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

Start shopping
``` **Skeleton set** — `skeu-panel`, `skeu-skeleton` Recessed blocks with a light sweep, in the same geometry as the card they stand in for. ```html
``` **List rows with chevrons** — `skeu-panel`, `skeu-list-item`, `skeu-tile-soft` A panel of tappable rows with icon, title, subtitle, and a chevron that mirrors in RTL. ```html ``` #### Feedback & overlays **The four semantic alerts** — `skeu-alert`, `skeu-alert-success`, `skeu-alert-error`, `skeu-alert-warning`, `skeu-alert-info` A raised system object with a coloured start edge — success, error, warning, info. ```html
Saved. Your address is now the default.
Low stock. Only 3 left at this price.
Heads up. Deliveries pause during Friday prayer.
``` **Toast** — `skeu-floating`, `skeu-chip-success`, `animate-skeu-pop` A short floating notice with icon, action and dismiss; enters with animate-skeu-pop. ```html
Added to cartWireless headphones ANC
``` **Inline banner** — `skeu-well-accent` A full-width accent well for in-page announcements, with a link and dismiss. ```html

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

``` **Modal dialog (live)** — `skeu-backdrop`, `skeu-dialog`, `animate-skeu-dialog`, `skeu-btn-primary`, `skeu-btn-secondary` A dimmed backdrop + overlay panel with animate-skeu-dialog; Escape closes and focus is trapped inside. ```html
``` **Dropdown menu (live)** — `skeu-floating`, `skeu-list-item`, `animate-skeu-pop`, `skeu-divider` A floating surface with animate-skeu-pop, role=menuitem rows that rise on hover, and a red destructive item. ```html
``` **Tooltip** — `skeu-dark` A small graphite surface above the trigger, linked via aria-describedby. ```html Delivery fees explained ``` **Popover** — `skeu-floating`, `animate-skeu-pop`, `skeu-btn-tint` A floating surface with rich content (title, body, action) tied to a trigger with aria-expanded. ```html
Balance
2,480 pts

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

``` **Confirm dialog (live)** — `skeu-backdrop`, `skeu-dialog`, `animate-skeu-dialog`, `skeu-btn-destructive` The same dialog with a warning tile and a red destructive button — for irreversible actions. ```html

Cancel this order?

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

``` **Bottom sheet (live)** — `skeu-backdrop`, `skeu-dialog`, `animate-skeu-dialog` A dialog pinned to the bottom of the screen with a drag handle — for phones. ```html
``` #### Commerce **Order status pills** — `skeu-chip`, `skeu-chip-solid`, `skeu-chip-success`, `skeu-chip-neutral` The four standard GINI states: preparing, out for delivery, delivered, cancelled. ```html Preparing · قيد التجهيز Out for delivery · جاري التوصيل Delivered · تم التسليم Cancelled · ملغى ``` **Cart line item** — `skeu-panel`, `skeu-tile-ceramic`, `skeu-btn-secondary`, `skeu-btn-ghost` Thumbnail, name, variant, quantity stepper, line price and a ghost remove button. ```html
Wireless headphones ANC
Black · 1 year warranty
2
178,000 IQD
``` **Price + discount** — `skeu-chip-success` The current price is bold, the old one struck through, and the discount lives in a success chip. ```html
89,000 IQD 112,000 Save 23,000

Or 3 × 29,667 IQD with installments

``` **Quantity stepper** — `skeu-btn-secondary`, `skeu-input` Two ceramic keys around a readout well; the minimum disables the decrease key. ```html
``` **Delivery timeline** — `skeu-panel`, `skeu-chip-success`, `skeu-tile`, `skeu-tile-soft`, `skeu-track`, `skeu-fill` Three horizontal stops with a progress track between them — the mobile form of the timeline. ```html
Order #48213Arrives today
ConfirmedOn the wayDelivered
``` **Merchant header card** — `skeu-panel-2`, `skeu-tile-ceramic`, `skeu-chip-success`, `skeu-btn-primary` Logo in a ceramic tile, name, verified chip, rating, and a follow button. ```html
TZ

TechZone

Verified
4.8· 1.2K orders · Karrada
``` **Payment method row** — `skeu-panel`, `skeu-panel-selected`, `skeu-check`, `skeu-radio`, `skeu-tile-ceramic` Payment options as radio cards: Qi Card, ZainCash, cash on delivery. ```html
Payment method
``` **Coupon / loyalty points chip** — `skeu-input`, `skeu-btn-tint`, `skeu-chip-solid`, `skeu-chip` A coupon field with an apply button, and an anodized loyalty chip with a tabular balance. ```html
2,480 pts WELCOME10 · -10%
``` Live specimens: https://gini.iq/en/brand#components ### State rules | 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 | ### Methodology 1 — Audit: Inventory every route, component and repeated pattern before touching a page; understand the product as one system. 2 — Foundation: Tokens, materials, lighting model, shadows, borders, radii, motion — all centralised in globals.css. 3 — Primitives: Upgrade buttons, inputs, tabs, switches, chips and dialogs before any page. 4 — Global shell: The header as a rail, the base background, the graphite footer, the containers. 5 — Page by page: Migrate every route including loading, empty and error states, deleting no content and changing no logic. 6 — Responsive review: Check 1366px and 390px in Arabic and English: no horizontal overflow, comfortable touch targets, simplified shadows on mobile. 7 — Polish: A full consistency audit and a sweep of legacy fragments until everything reads as one team, one system. ### Do - Start with the material class (skeu-panel, skeu-btn-primary…) then add Tailwind utilities for layout only. - Let content (product imagery, numbers, copy) be the hero; surfaces support it. - Use logical properties (start/end) and check both the Arabic and English versions. - Give every state (hover, pressed, focus, disabled) a clear physical expression. - Respect the elevation level that matches the element's role — don't raise everything. ### Don't - No neumorphism: grey blobs with a light shadow top-left and a dark shadow bottom-right. - No leather, wood or heavy image textures — materials are refined and restrained. - No decorative gradients without a physical reason, and no ad-hoc shadows outside the tokens. - Don't make everything a pill — each object type has its radius. - No text shadows, and never trade contrast for softness. - No Tailwind rtl:/ltr: variants — each locale has its own root; use logical utilities (ps-/pe-/text-start) instead. ### Core tokens | Token | Value | Meaning | |---|---|---| | `--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 | Live implementation in `app/globals.css`, full variables at `https://gini.iq/brand.css`, live specimens at https://gini.iq/en/brand#design-system. ## Voice & tone - **Warm** — We speak in plain language — close to our customers, true to the local culture. - **Confident** — We make promises we keep, and are honest about what we do and don't know. - **Sharp** — Short sentences, clear ideas. Every word earns its place. - **Optimistic** — We see the opportunity before the obstacle, and build tools that unlock the next step. ### Writing examples **Say:** We empower merchants to grow digitally — with integrated management, payments, and delivery tools. **Don't say:** ~~The leading platform delivering an unparalleled shopping experience.~~ > **Why:** State what we do for merchants and consumers alike, don't claim leadership without proof. **Say:** We couldn't complete the payment. Try another card or contact us. **Don't say:** ~~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. ## Press ### Boilerplate > 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. ### Fact sheet - **Legal name:** GINI - **Founded:** 2023 - **Headquarters:** Baghdad, Iraq - **Industry:** Market automation & digital commerce - **Website:** gini.iq - **Press contact:** info@gini.iq **Contact:** `info@gini.iq` ## FAQ ### Can I use the GINI logo in an article or video about the company? Yes. Editorial use (press, blogs, news) is permitted without prior approval, provided the logo is used as shown here — original proportions and colours. ### I'd like to do a co-branded piece with GINI — what's the next step? Email info@gini.iq with project details and a timeline. We usually respond within 24 hours with additional guidelines and co-branding assets. ### Can I recolour the logo to match my own identity? No. Only the official colours (GINI Orange or the white version) are permitted. Any recolouring is considered brand misuse. ### Do you have high-resolution press photos? Yes. Email info@gini.iq and we'll send a curated pack including product shots, team imagery, and HQ photography. ### Are 'GINI' and the GINI wordmark registered trademarks? Yes, both are trademarks owned by GINI. Avoid using either for similar product or company names that could create confusion. ## Usage terms GINI brand assets on this page are available for editorial use (press, news, reviews) and approved partnerships. Do not alter the logo, its colours, or its proportions. **Permitted:** - `editorial-use` - `news-coverage` - `product-reviews` - `partner-marketing` - `conference-presentations` **Restricted:** - `logo-modification` - `colour-substitution` - `stretching-or-distortion` - `outlines-shadows-effects` - `merchandise-without-permission` - `confusingly-similar-marks` For exceptions or formal partnerships, contact `info@gini.iq`. ## For developers and AI agents Everything a new project needs to adopt the GINI identity in a single import: - **CSS** — `https://gini.iq/brand.css` (drop-in variables) - **Component classes** — `https://gini.iq/skeu.css` (every skeu-* class + token — the component library) - **Tailwind v4** — `https://gini.iq/brand.tailwind.css` (@theme block) - **W3C Design Tokens** — `https://gini.iq/brand.tokens.json` (for Style Dictionary, Figma, etc.) - **AI system prompt** — `https://gini.iq/en/brand-prompt.md` - **`.cursorrules`** — `https://gini.iq/cursorrules` - **`AGENTS.md`** — `https://gini.iq/AGENTS.md` - **JSON Schema** — `https://gini.iq/schemas/brand-manifest.json` ## Version **1.7** — 2026-09 ### Changelog - **v1.7** (2026-09) — Design system (modern skeuomorphism): materials, lighting, elevation ladder, motion, component catalog and methodology — with live specimens. - **v1.6** (2026-04) — One-colour monogram (G-mark, no orange accent). - **v1.5** (2026-04) — One-colour wordmark — black and white. - **v1.4** (2026-04) — Official logo files and trademark section. - **v1.3** (2026-04) — Refinements to logo cards, pattern surfaces, and the hero. - **v1.2** (2026-04) — Expanded guide: foundation, anatomy, accessibility, FAQ. - **v1.1** (2026-03) — Dark-surface logo variant and Pantone values. - **v1.0** (2026-02) — First public release.