For developers·v1.1.0·2026-09

Build the GINI wayin minutes, not weeks

Everything a developer or an AI agent needs to adopt the GINI brand, in one place: a live library of 112 components with copy-ready code, a public MCP server any AI assistant can read, and files you import in one line — the same classes and tokens that run this site.

Connect the MCP server Browse the components Brand guide

No authentication
Zero dependencies
RTL ready · WCAG AA

Three lines are enoughgini.iq/developer

MCP server for any AI assistantterminal

claude mcp add --transport http gini-brand https://gini.iq/mcp

Components in any HTML pageindex.html

<link rel="stylesheet" href="https://gini.iq/brand.css">
<link rel="stylesheet" href="https://gini.iq/skeu.css">

Palette and typeface in CSSglobals.css

@import url("https://gini.iq/brand.css");

Works withClaude CodeClaude.ai / Claude DesktopCursorVS Code (Copilot)ChatGPTOpenAI Codex CLIGemini CLIWindsurf

live components: 112
MCP tools: 17
drop-in files: 07
dependencies: 0

01/7

Start here

Three paths, one source of truth

Pick what fits your project: an AI assistant that reads the brand over MCP, two stylesheets for any HTML page, or instruction files for coding agents. All three are fed from the same data and move together.

01
AI assistant
Add the server to Claude, ChatGPT, Cursor or VS Code, then ask it about any colour, logo or component.
terminal
```
claude mcp add --transport http gini-brand https://gini.iq/mcp
```
All clients
02
HTML page or framework
Two stylesheets with zero dependencies: the palette and typeface in brand.css, every material in skeu.css.
index.html
```
<link rel="stylesheet" href="https://gini.iq/brand.css">
<link rel="stylesheet" href="https://gini.iq/skeu.css">
```
Components
03
Coding agent
A rules file in the project root makes Cursor, Claude Code or Codex respect the brand on every edit.
terminal
```
curl https://gini.iq/AGENTS.md > AGENTS.md
```
Project files

02/7

MCP & AI

A public MCP server — the GINI brand inside any AI assistant

No keys, no sign-up: add gini.iq/mcp to your client and the assistant reads colours, logos, components and voice straight from the source — 17 tools, 6 resources and 3 ready prompts.

No authentication17 tools6 resources3 prompts

Server URL

https://gini.iq/mcp

Streamable HTTP, stateless, open CORS — paste it into any MCP-capable client, or pick your client below.

MCP Inspector

Pick your client9

terminalbash

claude mcp add --transport http gini-brand https://gini.iq/mcp

Opengini.iq/mcp

Tools

Every tool reads from the same source of truth that renders this page.

get_brand_overviewName, positioning, facts and every canonical endpoint
get_paletteColours in HEX/RGB/HSL/CMYK/Pantone with their roles
check_contrastWCAG contrast ratio and rating for any two colours
get_typographyTypeface, weights and the type scale
get_logosThe right logo files for any surface, with rules and measurements
get_product_marksProduct marks and lock-up rules with the GINI mark
get_design_systemMaterials, lighting, elevation, radii, motion and tokens
list_componentsSearchable index of the copy-ready components
get_componentThe full HTML of one component
get_layout_systemSpacing scale, grid and breakpoints
get_iconographyIcon library and its rules
get_imagery_guidelinesPhotography and illustration principles
get_mascotsOfficial mascot poses with direct URLs
get_voiceVoice traits and writing examples
get_press_kitBoilerplate, facts, trademark and FAQ
get_brand_promptThe complete system prompt for models
get_stylesheetbrand.css, Tailwind, skeu.css or W3C tokens

Resources

gini://brand/manifestThe full brand manifest (JSON)
gini://brand/guideThe brand book (Markdown)
gini://brand/promptThe system prompt
gini://brand/cssCSS variables
gini://component/{id}One component with its code
gini://logo/{id}One logo file (SVG)

Prompts

gini_brand_systemLoad the whole GINI identity into the conversation
design_gini_screenDesign a screen or page with GINI components
write_gini_copyWrite copy in the GINI voice

Try it once connected

“What is GINI's official orange and the safe text contrast on it?”
“Give me a GINI-style product card in plain HTML”
“Design a landing page for Fawz with GINI components, Arabic first”
“Which logo file do I use on a black background?”

The server is read-only, needs no keys, and is licensed for editorial and approved-partner use. For commercial co-branding email info@gini.iq.

03/7

Project files

7 files

Import the brand in one line

shadcn-compatible CSS variables, a Tailwind v4 block, W3C-format tokens and ready system instructions for Claude, Cursor and coding agents. Every file is a stable URL, read directly and updated without you touching your project.

Stylesheetsbrand.css for colours and typeface, skeu.css for materials — together or on their own.
Tailwind & tokensA @theme block for a Tailwind v4 project, and a W3C token file for Style Dictionary and Figma pipelines.
Agent instructionsbrand-prompt.md, cursorrules and AGENTS.md — any coding agent respects the brand on its own.
Stable URLsEvery file is served from gini.iq with open CORS; link to it directly or vendor it into the repo.

Pick a file7

brand.csscss

/* 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);
}

Opengini.iq/brand.css

04/7

Component library

112 components · v1.1.0

Ready-made components — copy, paste, ship

112 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.

Install in 10 seconds

One line pulls in every skeu-* class and token. Pair it with brand.css for the palette and typeface.

<link> tag

<link rel="stylesheet" href="https://gini.iq/skeu.css">

@import in CSS

@import url("https://gini.iq/skeu.css");

With the palette

<link rel="stylesheet" href="https://gini.iq/brand.css">
<link rel="stylesheet" href="https://gini.iq/skeu.css">

112 componentsZero dependenciesRTL readyHTML · React · Vue · Svelte

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

The anodized button at 32 / 40 / 44px. Size is layout only — the material is the same.

skeu-btn
skeu-btn-primary

Button family

Ceramic secondary, tinted, ghost, destructive, and dark for graphite surfaces.

skeu-btn-secondary
skeu-btn-tint
skeu-btn-ghost
skeu-btn-destructive
skeu-btn-dark

Icon button

A 40px square with only an icon — never without aria-label.

skeu-btn
skeu-btn-secondary
skeu-btn-primary

Button with leading icon

Icon at the start edge, label after it — flips automatically in RTL.

skeu-btn
skeu-btn-primary

Loading button

A spinner inside the control with aria-busy and pointer disabled.

skeu-btn
skeu-btn-primary

Disabled button

55% opacity, desaturated, no motion — the disabled attribute is enough.

skeu-btn

Button group / split button

Adjoining keys sharing one radius; the split button separates the main action from its menu.

skeu-btn-secondary
skeu-btn-primary

Floating action button

A raised round button for the screen's main action — lives at the floating level.

skeu-btn
skeu-btn-primary
shadow-floating

Forms

Text field with label, help and error

The field is a recessed well; the error state adds is-invalid and a message linked via aria-describedby.

skeu-input
is-invalid

Full name

As printed on your ID.

Enter a valid email address.

Input with leading icon

The icon is pinned to the start edge with logical properties (start-3 / ps-9).

skeu-input

Search field

A pill-shaped input with a search icon and a keyboard shortcut hint on the end edge.

skeu-input
skeu-chip-neutral

Select

A native select inside a recessed well with a hand-drawn chevron on the end edge.

skeu-input

Governorate

Textarea

The same well with free height and a character counter below.

skeu-input

Delivery notes0 / 200

Checkbox list

Soft recessed rows; each row is a full label so the touch target is ≥ 44px.

skeu-check
skeu-well-soft

Order updates Promotions Weekly digest

Radio group

Options as cards; the chosen card is pressed in with an accent rim (skeu-panel-selected).

skeu-check
skeu-radio
skeu-panel
skeu-panel-selected

Delivery speedSame day Baghdad only · before 2 pm5,000 IQDStandard 2–3 days3,000 IQD

Switch row

A mechanical role=switch with aria-checked; the thumb slides 20px.

skeu-toggle
skeu-panel

Push notificationsOrder status on your phone

Marketing emailsOffers and new merchants

Segmented control

Raised keys inside a well; the active key is seated in a deeper fill (skeu-tab-active).

skeu-well
skeu-tab
skeu-tab-active

Slider

A native range with accent-color inside a well, with a value readout in a meter.

skeu-well
skeu-meter

Budget320K

File drop zone

A recessed well with an inner dashed border and an icon tile; the real input is visually hidden.

skeu-well
skeu-tile-soft
skeu-btn-secondary

Drop product photos herePNG or JPG · up to 5 MBBrowse files

OTP / code row

Six recessed one-character cells, always LTR for digits.

skeu-input

Date input

A native input[type=date] in the same well — you get the browser picker for free.

skeu-input

Pickup dateTime

Two-column form layout

A raised panel, one column on phones and two from sm, with the actions in a bottom row.

skeu-panel
skeu-input
skeu-btn-primary
skeu-btn-ghost

Inline validation summary

A raised error alert above the form listing the failing fields with jump links.

skeu-alert
skeu-alert-error

Please fix 2 fields before continuing

Email — not a valid address
Phone — required

Navigation

Tabs — underline and segmented

Underline for pages (a lit line under the active tab), segmented for filters.

skeu-divider
skeu-tab
skeu-tab-soft-active

Pagination

36px square keys; the current page is seated, previous/next are icon buttons.

skeu-tab
skeu-tab-active
skeu-btn-secondary

Stepper / progress steps

Done steps are green tiles, the current one anodized, upcoming ones recessed wells — the connector is a progress track.

skeu-chip-success
skeu-tile
skeu-tile-soft
skeu-track
skeu-fill

Cart
2Address
3Payment

Bottom mobile tab bar

A rail fixed to the bottom with four destinations; the active one is an anodized tile.

skeu-rail
skeu-tile
skeu-tile-soft

Back button

A ghost button whose arrow mirrors in RTL through -scale-x-100 under [dir=rtl].

skeu-btn
skeu-btn-ghost

Back to orders

Data display

KPI tile

An instrument readout (skeu-meter): small label, big tabular number, helper line.

skeu-meter

Orders today

1,284

Updated 2 min ago

Stat row with delta chip

Three readouts in a grid, each with a green or neutral delta chip.

skeu-meter
skeu-chip-success
skeu-chip-neutral

Revenue

48.2M+12%

Orders

3,410+4%

Returns

1.8%±0

Product card

An interactive panel: image in a ceramic tile, badge, IQD price, add-to-cart.

skeu-panel
skeu-panel-interactive
skeu-tile-ceramic
skeu-chip-solid
skeu-btn-primary

-20%

Wireless headphones ANC

89,000 IQD~~112,000~~

Pricing card

A raised-2 panel with a “Most popular” chip, big price, feature list and a primary button.

skeu-panel-2
skeu-chip-solid
skeu-btn-primary

Feature card

An anodized icon tile, title, short body — the basic unit of any features grid.

skeu-panel
skeu-tile

Same-day delivery

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

Testimonial card

Quote, stars, and the speaker row with a ceramic avatar.

skeu-panel
skeu-tile-ceramic

“Ordered at noon, it was at my door by seven. Never using another app.”

SASara A.Basra · verified buyer

User card + avatar group

A two-letter avatar, name and role, and a stacked avatar group with white rings.

skeu-panel
skeu-tile
skeu-tile-ceramic
skeu-chip-neutral

AHAli HassanMerchant · KarradaAdmin

MKRSZA+6

Table with header, rows and actions

skeu-table: a raised sticky header, recessed body, rows that light up on hover with an accent edge.

skeu-table
skeu-chip-success
skeu-chip
skeu-btn-ghost

Order	Customer	Status	Total
#48213	Sara A.	Delivered	89,000
#48212	Omar K.	Shipping	142,500

Description list

Key/value pairs in a soft well with engraved dividers — for order details and invoices.

skeu-well-soft

Order: #48213
Placed: 12 Sep 2026, 14:02
Payment: Qi Card •• 4821
Total: 89,000 IQD

Timeline

A column of nodes: done (green), current (anodized), upcoming (well).

skeu-chip-success
skeu-tile
skeu-tile-soft
skeu-divider

Order confirmed
14:02
Being packed
Now · Merchant: TechZone
Out for delivery

Badges and chips

Four materials: tinted, solid, neutral, success — plus a counter chip and a dismissible chip.

skeu-chip
skeu-chip-solid
skeu-chip-neutral
skeu-chip-success

NewFeaturedDraftVerified99+Basra

Progress bar + circular progress

A recessed track with an anodized fill; the ring is an SVG in the same colour with a readout in the middle.

skeu-track
skeu-fill

Uploading68%

68%

Meter / gauge

A semicircle inside an instrument readout — for satisfaction, capacity or quotas.

skeu-meter

72%

Fleet capacity

Empty state

A recessed well with a dashed inner border, a tinted icon tile, short copy and one action.

skeu-well
skeu-tile-soft
skeu-btn-primary

Your cart is empty

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

Start shopping

Skeleton set

Recessed blocks with a light sweep, in the same geometry as the card they stand in for.

skeu-panel
skeu-skeleton

List rows with chevrons

A panel of tappable rows with icon, title, subtitle, and a chevron that mirrors in RTL.

skeu-panel
skeu-list-item
skeu-tile-soft

Payment methodsQi Card, ZainCash, cash
Addresses2 saved

Feedback & overlays

The four semantic alerts

A raised system object with a coloured start edge — success, error, warning, info.

skeu-alert
skeu-alert-success
skeu-alert-error
skeu-alert-warning
skeu-alert-info

Saved. Your address is now the default.

Payment failed. The card was declined — try another method.

Low stock. Only 3 left at this price.

Heads up. Deliveries pause during Friday prayer.

Toast

A short floating notice with icon, action and dismiss; enters with animate-skeu-pop.

Live

skeu-floating
skeu-chip-success
animate-skeu-pop

Added to cartWireless headphones ANC

Modal dialog (live)

A dimmed backdrop + overlay panel with animate-skeu-dialog; Escape closes and focus is trapped inside.

Live

skeu-backdrop
skeu-dialog
animate-skeu-dialog
skeu-btn-primary
skeu-btn-secondary

Confirm dialog (live)

The same dialog with a warning tile and a red destructive button — for irreversible actions.

Live

skeu-backdrop
skeu-dialog
animate-skeu-dialog
skeu-btn-destructive

Bottom sheet (live)

A dialog pinned to the bottom of the screen with a drag handle — for phones.

Live

skeu-backdrop
skeu-dialog
animate-skeu-dialog

Commerce

Order status pills

The four standard GINI states: preparing, out for delivery, delivered, cancelled.

skeu-chip
skeu-chip-solid
skeu-chip-success
skeu-chip-neutral

PreparingOut for deliveryDeliveredCancelled

Cart line item

Thumbnail, name, variant, quantity stepper, line price and a ghost remove button.

skeu-panel
skeu-tile-ceramic
skeu-btn-secondary
skeu-btn-ghost

Wireless headphones ANC

Black · 1 year warranty

178,000 IQD

Price + discount

The current price is bold, the old one struck through, and the discount lives in a success chip.

skeu-chip-success

89,000 IQD~~112,000~~Save 23,000

Or 3 × 29,667 IQD with installments

Quantity stepper

Two ceramic keys around a readout well; the minimum disables the decrease key.

skeu-btn-secondary
skeu-input

Delivery timeline

Three horizontal stops with a progress track between them — the mobile form of the timeline.

skeu-panel
skeu-chip-success
skeu-tile
skeu-tile-soft
skeu-track
skeu-fill

Order #48213Arrives today

ConfirmedOn the wayDelivered

Merchant header card

Logo in a ceramic tile, name, verified chip, rating, and a follow button.

skeu-panel-2
skeu-tile-ceramic
skeu-chip-success
skeu-btn-primary

TechZone

Verified

4.8· 1.2K orders · Karrada

Payment method row

Payment options as radio cards: Qi Card, ZainCash, cash on delivery.

skeu-panel
skeu-panel-selected
skeu-check
skeu-radio
skeu-tile-ceramic

QiQi Card •••• 4821DefaultZainZainCashCash on delivery

Coupon / loyalty points chip

A coupon field with an apply button, and an anodized loyalty chip with a tabular balance.

skeu-input
skeu-btn-tint
skeu-chip-solid
skeu-chip

2,480 ptsWELCOME10 · -10%

Marketing & pages

Split hero — copy + mascot

A pulse chip, a headline with an accent word, a lead, two buttons, and the official mascot on the other side.

skeu-chip
skeu-btn-primary
skeu-btn-secondary

Iraq's digital commerce infrastructure

Empowering partners to grow digitally

Payments, delivery and business tools in one ecosystem — for merchants of every size.

Numbered section header

A monospaced counter, an eyebrow chip, a large title and a lead at a comfortable reading width.

skeu-chip

02 / 06Products

Everything a merchant needs, in one place

Storefront, payments, delivery and loyalty — connected, so growth is one decision away.

Feature grid — three tiles

Three raised cards with an anodized icon tile, a title and a short body — collapses 1 / 2 / 3 columns.

skeu-panel
skeu-tile

Secure e-payments

Qi Card, ZainCash and cash on delivery — settled to your account automatically.

Reliable delivery

Nationwide couriers with live tracking for you and your customer.

Loyalty built in

Points on every order bring customers back without a second app.

Stats band

Four instrument readouts inside a recessed well — for headline numbers on the home page or in reports.

skeu-well
skeu-meter

Customers: 1.2M+
Businesses: 2,500+
Orders: 3.4M
Provinces: 18

How it works — three steps

Numbered steps with anodized tiles and a connecting rule between them; stacks on phones.

skeu-tile
skeu-divider

1
Create your store
Register in minutes and list your products with photos and prices.
2
Receive orders
Customers pay online or on delivery; you confirm from the merchant app.
3
We deliver, you grow
A courier picks up the parcel and your settlement lands automatically.

Graphite CTA band

A graphite surface with an orange glow, a strong title, and a primary button with a secondary link — closes the page.

skeu-dark
skeu-btn-primary
skeu-btn-dark

Ready to sell across Iraq?

Join 2,500+ merchants already growing with GINI. No setup fee.

FAQ accordion

Native details/summary rows inside one panel; no JavaScript and keyboard-accessible by default.

skeu-panel
skeu-list-item
skeu-tile-soft

Is there a subscription fee?

No. GINI charges a small commission per completed order and nothing else.

When do I get paid?

Settlements are transferred weekly to your Qi Card or bank account.

Do you deliver outside Baghdad?

Yes — every province, through our delivery partners.

Logo cloud

A recessed well holding partner logos on raised tiles, greyscale until hovered.

skeu-well
skeu-panel

Trusted by

App download badges

Two graphite buttons for the App Store and Google Play with an icon and two lines of text — always shown together.

skeu-btn
skeu-btn-dark

Download on theApp Store Get it onGoogle Play

Contact card

Phone, email and hours as rows with soft icon tiles, plus a tinted WhatsApp button.

skeu-panel
skeu-tile-soft
skeu-btn-tint

Talk to us

Hotline7721
Emailinfo@gini.iq
HoursSat–Thu · 9:00–18:00

Layout & structure

App shell — top bar, side rail, content

The full merchant-dashboard frame: a frosted top rail with search and notifications, a side rail of sections that becomes a horizontal strip on phones, and a content area carrying a raised card with readouts.

skeu-well
skeu-rail
skeu-panel
skeu-well-accent
skeu-list-item
skeu-meter
skeu-input
skeu-chip-solid
skeu-chip-neutral
skeu-tile-ceramic
skeu-btn-primary
skeu-btn-secondary
skeu-btn-ghost
skeu-alert
skeu-alert-info

GINI.Merchant

Good morning, Ali

TechZone · Karrada · Saturday, 26 Sep

Today at a glance

View report

Sales: 1,240,000 IQD
Orders: 18
Awaiting dispatch: 3

Settlement on Sunday. 2,180,000 IQD will be transferred to your Qi Card.

Split pane — list + detail

A list column with selectable rows and a search field beside a detail panel with a header, a summary and action buttons; the chosen row is an accent well, and the panes stack on phones.

skeu-panel
skeu-well-accent
skeu-list-item
skeu-tile
skeu-tile-ceramic
skeu-input
skeu-well-soft
skeu-chip
skeu-chip-neutral
skeu-btn-primary
skeu-btn-secondary
skeu-btn-ghost

Order #48213 · Ali Hassan

Karrada, Baghdad · Qi Card •••• 4821

Preparing

Wireless headphones ANC × 1: 178,000
Clear phone case × 2: 84,000
Delivery · Baghdad: 5,000
Total: 267,000 IQD

Settings layout — side tabs + active panel

A vertical tab list of raised keys inside a well, the active key seated in orange, beside the settings panel with fields, toggles and save buttons; the tabs become a horizontal strip on phones.

skeu-panel
skeu-well
skeu-tab
skeu-tab-active
skeu-input
skeu-well-soft
skeu-toggle
skeu-divider
skeu-btn-primary
skeu-btn-secondary

Store profile

What customers see on your GINI storefront.

Store nameSupport phoneBranch address

Accepting ordersPause to hide the store temporarily

Cash on deliveryOffer it beside Qi Card and ZainCash

Sticky bottom action bar

A frosted rail that sticks to the bottom of the scroll area: the total summary on the start edge, a secondary and a primary button on the end edge; the buttons stretch full-width on phones.

skeu-well
skeu-panel
skeu-rail
skeu-tile-ceramic
skeu-tile-soft
skeu-btn-primary
skeu-btn-secondary

Wireless headphones ANCBlack · × 1178,000
Clear phone caseTransparent · × 284,000
Deliver to Karrada, BaghdadTomorrow, 10:00–14:005,000

Total · 3 items

267,000 IQD

Data visualisation

Weekly bar chart

Seven CSS columns with day labels and hairline y-axis rules; the peak column is anodized with its value on the cap, the rest lightly tinted.

skeu-panel
skeu-fill
skeu-chip-success

Orders this week

Sat 19 – Fri 25 Sep · TechZone

+9%

258

SatSunMonTueWedThuFri

Activity heatmap

A seven-day by six-slot grid; each cell steps from an empty well through three accent tints to the anodized fill for the peak, with a less-to-more legend.

skeu-panel
skeu-fill

Busiest hours

Orders per slot · last 4 weeks

6am9am12pm3pm6pm9pm

Sat

Sun

Mon

Tue

Wed

Thu

Fri

LessMore

Sparkline KPI card

A headline value with a delta chip, then an inline SVG sparkline with a light area wash and an end marker — 30 days of direction at a glance.

skeu-panel
skeu-chip-success

Revenue · last 30 days

+12.4%

48.2MIQD

27 AugPrevious period 42.9M26 Sep

Stacked distribution bar

Horizontal segments stacked in a recessed track with a surface gap between them, plus a four-category legend carrying names and shares.

skeu-panel
skeu-track
skeu-fill

Payment mix

3,410 orders · September

Qi Card46%
ZainCash27%
Cash on delivery19%
Other8%

Comparison rows

Five rows: a label, a horizontal bar proportional to the value, and a tabular figure in an aligned column — a quiet alternative to the bar chart.

skeu-panel
skeu-track
skeu-fill

Orders by province

September · 3,471 total

Baghdad1,284
Basra812
Erbil655
Najaf402
Nineveh318

Bullet chart — value vs target

An instrument readout that measures the month against a target: a measure bar with an anodized fill on a recessed track, a dark target tick across it, a scale beneath, and the gap to target in IQD.

skeu-meter
skeu-track
skeu-fill

Avg. order value

September

64,500IQD

vs target−3,500

Target

040K80K

Target 68,000 IQDLast month 61,200 IQD

Communication

Chat bubbles + composer

A conversation panel: merchant avatar with presence in the header, bubbles seated in a recessed well — incoming on raised ceramic, outgoing on the anodized plate with read ticks — a three-dot typing indicator, and a pill composer with attach and send.

skeu-panel
skeu-well-soft
skeu-tile-ceramic
skeu-chip-solid
skeu-chip-neutral
skeu-input
skeu-btn-primary
skeu-btn-ghost

TechZoneOnline · replies within minutes

Today

Hi Ali! Order #48213 is packed and ready. Delivery today or tomorrow?

14:02

Today please — I'm home after 5 PM.

14:04

Comment thread

A parent comment with avatar, name, a verified-buyer chip and relative time, ghost like and reply actions; the merchant's reply nests one level behind a start rule, and a reply box with a recessed textarea and post button closes the panel.

skeu-panel
skeu-tile
skeu-tile-ceramic
skeu-chip
skeu-chip-success
skeu-btn-ghost
skeu-divider
skeu-input
skeu-btn-primary

Comments (2)

Ali HassanVerified buyer2 days ago

Battery lasts two full days and delivery to Karrada took under three hours. Does the black version come with the same one-year warranty?

TechZoneMerchantYesterday

Yes — every colour ships with the same one-year warranty, registered automatically to your GINI account.

Notification list

A header with the unread count and a mark-all-read button, then four rows with a tiled icon, title, body and time; unread rows are bolder and carry an accent dot at the end, and the tile material signals the kind of notification.

skeu-panel
skeu-tile
skeu-tile-soft
skeu-tile-ceramic
skeu-chip-solid
skeu-btn-ghost
skeu-list-item

Notifications

See all notifications

Activity feed

A vertical timeline of merchant-dashboard events — new order, settlement, low stock, review, new branch — each with an icon tile whose material signals its kind, a relative time at the end, a detail line with chips, and a load-earlier button.

skeu-panel
skeu-chip
skeu-chip-neutral
skeu-chip-success
skeu-tile
skeu-tile-soft
skeu-tile-ceramic
skeu-btn-tint
skeu-btn-secondary

Activity

Live

New order #48214 from Sara A. — 2 items, 142,500 IQD
2 min
Qi CardKarrada branch
Settlement sent — 2,340,000 IQD to Qi Card •••• 4821
1 h
Week 39 · 312 orders
Low stock — Wireless headphones ANC, 3 left
3 h
Zainab A. left a 5-star review
Yesterday
“Fast delivery, exactly as described.”
Omar K. added the Mansour branch
Yesterday
Pickup and delivery · opens 10 AM

Inbox rows

Three inbox rows: sender avatar, name and time on one line, subject, a truncated preview, a neutral attachment chip and an unread dot; unread rows are bolder with an accent time, and each row rises into ceramic on hover.

skeu-panel
skeu-list-item
skeu-tile
skeu-tile-soft
skeu-tile-ceramic
skeu-chip-neutral

Support ticket card

A ticket card: monospaced id, status chip, red-flag priority, title, a definition list for customer, order, category and due time, the last message in a soft well with its sender and time, then the assignee with escalate and reply buttons.

skeu-panel
skeu-chip-solid
skeu-chip-neutral
skeu-well-soft
skeu-tile
skeu-tile-ceramic
skeu-btn-ghost
skeu-btn-secondary
skeu-btn-primary

#TCK-1042In progressHigh priority

Parcel marked delivered but not received

Customer: Ali Hassan · Karrada
Order: #48213
Category: Delivery
Due: in 2 h

Ali Hassan35 min ago

The app says delivered at 16:20 but nobody rang the bell, and the building guard did not receive anything either. Can you check with the courier?

Account & access

Login card

A raised-2 panel with an anodized lock tile and greeting, a phone-or-email field with a leading icon, a password field with a ghost show/hide key, a remember-me row with a recovery link, then a full-width primary sign-in button, an engraved divider and a create-account link whose arrow mirrors in RTL.

skeu-panel-2
skeu-tile
skeu-input
skeu-check
skeu-btn-ghost
skeu-btn-primary
skeu-divider

Sign-up card

A registration form: a name field, a phone field with a +964 prefix pinned to the start edge, a password field with a show key and a four-segment strength meter on a recessed track with a semantically coloured caption, a terms-and-privacy checkbox, then a primary create button and a sign-in link for existing accounts. The snippet ships the static Good state with an empty field; the live twin seeds a demo password to drive the meter.

skeu-panel-2
skeu-input
skeu-btn-ghost
skeu-track
skeu-fill
skeu-check
skeu-btn-primary

Preferences panel

A panel with a header and a list of divided rows for the settings a toggle cannot express: recessed selects with a drawn chevron for language and currency, a radio group of raised keys in a well for the appearance, a navigation row to change the password with a chevron that mirrors in RTL, and a single toggle for two-factor authentication with a Recommended chip; selects are tied to their labels through label/for, the group and the toggle through aria-labelledby.

skeu-panel
skeu-input
skeu-well
skeu-tab
skeu-tab-active
skeu-row
skeu-toggle
skeu-chip

Preferences

Changes are saved automatically.

LanguageUsed across the app and in emails.
CurrencyPrices and settlements are shown in this currency.
AppearanceFollow the device, or pick a look for GINI.
Change passwordLast changed 4 months ago.
Two-factor authenticationRecommendedAsk for a code from the GINI app on new devices.

Active sessions list

A header with a device count and three session rows: the device icon on a tile, device and browser name, a green this-device chip for the current session, location and last-active time with small icons, and a secondary revoke button for the others; a footer button in the error colour signs out of every other device.

skeu-panel
skeu-chip-neutral
skeu-tile-soft
skeu-tile-ceramic
skeu-chip-success
skeu-btn-secondary
skeu-btn-ghost

Active sessions

Devices signed in to your account. Revoke any you don't recognise.

3 devices

iPhone 15 · GINI appThis deviceBaghdad, IraqActive now
Chrome on WindowsBasra, Iraq2 h ago
Safari on MacErbil, Iraq3 days ago

Danger zone

An alert panel with a red error edge on the start side and an error-coloured title beside a warning icon on a ceramic tile; an export-data row with a secondary button, an engraved divider, then a delete-account row with a red destructive button — the buttons wrap under the copy on narrow screens.

skeu-alert
skeu-alert-error
skeu-tile-ceramic
skeu-btn-secondary
skeu-divider
skeu-btn-destructive

Danger zone

These actions affect your whole account. Read carefully before you continue.

Export your dataOrders, addresses and invoices as a ZIP — emailed within 24 hours.

Delete accountPermanently removes your profile, order history and 2,480 loyalty points. This cannot be undone.

Checkout & wallet

Order summary

A raised panel with three compact lines (thumbnail, name, variant and quantity, line price), then subtotal, delivery and a success-coloured discount, an accent divider before the large total, and a full-width place-order button with a security line.

skeu-panel-2
skeu-chip-neutral
skeu-tile-ceramic
skeu-divider
skeu-chip
skeu-divider-accent
skeu-btn-primary

Order summary

4 items

Wireless headphones ANCBlack · Qty 189,000
USB-C fast charger 65WWhite · Qty 248,000
Silicone phone caseClear · Qty 118,000

Subtotal: 155,000 IQD
Delivery · Baghdad, today: 5,000 IQD
Discount WELCOME10: −15,500 IQD

Total144,500 IQD

Secure checkout · Qi Card, ZainCash or cash on delivery

Checkout form — step 2 of 3

A header with a step chip and a three-segment progress track, name and +964 phone fields in a grid that splits into two columns, a pressed-in saved-address card with a default chip and a ghost 'Change' button, three delivery-slot radio cards with one pressed in, and back / continue buttons.

skeu-panel-2
skeu-chip-solid
skeu-track
skeu-fill
skeu-input
skeu-panel
skeu-panel-selected
skeu-tile-soft
skeu-chip-neutral
skeu-btn-ghost
skeu-check
skeu-radio
skeu-chip-success
skeu-btn-primary

Product grid — listing header, loading slot and load more

A listing section that complements the single product card instead of repeating it: a header with the title, result count and a sort select, then a grid — one column on phones, two from sm, three from lg — holding two product cards as-is and a skeleton in the same geometry for the card still loading, and a footer with a 'showing x of y' counter and a ceramic 'Load more' button.

skeu-input
skeu-panel
skeu-panel-interactive
skeu-tile-ceramic
skeu-chip-solid
skeu-chip
skeu-btn-primary
skeu-skeleton
skeu-btn-secondary

Popular in Karrada

128 products · Delivered today across Baghdad

-20%

Wireless headphones ANC

89,000 IQD~~112,000~~

New

Smart watch 46mm

145,000 IQD

Wallet card

A graphite card with an orange glow carrying the balance, a partially masked account number, a verified chip and a quick-action row (Top up, Send, Pay QR), with a 'Pending' well beneath holding two items: an incoming refund with a signed amount and a pending chip, and an auto top-up schedule with a switch.

skeu-panel
skeu-dark
skeu-chip-success
skeu-btn-primary
skeu-btn-dark
skeu-well-soft
skeu-chip-neutral
skeu-tile-soft
skeu-tile
skeu-chip
skeu-toggle

GINI WalletVerified

1,284,500 IQD

Ali Hassan•••• 4821

Pending

Refund · Order #48244Digital Hub · lands in 1–3 business days+32,000Pending
Auto top-up · 500,000 IQDQi Card •••• 4821 · monthly, next 1 Oct

Transaction rows

Tactile rows in one panel: an icon tile per movement type, the merchant, a category chip and date, and a signed amount — green for money in, red for money out — with a month select in the header and the net in the footer.

skeu-panel
skeu-input
skeu-row
skeu-tile-soft
skeu-tile
skeu-chip-neutral

Transactions

TechZoneElectronicsToday, 14:02−144,500IQD
Top-up via Qi CardWalletToday, 09:15+500,000IQD
Karrada Fresh MarketGroceriesYesterday, 19:40−42,500IQD
Refund · Order #48170Refund23 Sep+18,000IQD
Sara A.Transfer22 Sep−25,000IQD

Invoice table

An invoice on the raised-header, recessed-body table: invoice meta (number, issue and payment dates, buyer) with a paid chip, item rows with quantity, unit price and amount, a footer with subtotal, delivery, discount and total, and download / print buttons.

skeu-panel
skeu-tile-ceramic
skeu-chip-success
skeu-table
skeu-btn-secondary

Invoice #INV-2026-0482Paid

TechZone · Karrada, Baghdad · Order #48213

Issued: 26 Sep 2026
Paid on: 26 Sep 2026
Billed to: Ali Hassan

Item	Qty	Unit price	Amount
Wireless headphones ANCBlack · SKU TZ-HP-204	1	89,000	89,000
USB-C fast charger 65WWhite · SKU TZ-CH-065	2	24,000	48,000
Silicone phone caseClear · SKU TZ-CS-118	1	18,000	18,000
Subtotal			155,000
Delivery · Baghdad			5,000
Discount · WELCOME10			−15,500
Total			144,500 IQD

Utilities

Avatar sizes + presence

Three avatar sizes (32 / 40 / 56px) on a round ceramic tile carrying a photo or initials, with a white-ringed presence dot (online / away) on the end corner; beside them three more shapes: a square merchant or entity avatar carrying its logo, an avatar topped by a solid chip counting unread notifications, and a round skeleton placeholder that holds the spot until the photo arrives — the white ring sits on a plain wrapper so the material's shadow cannot swallow it.

skeu-tile-ceramic
skeu-chip-solid
skeu-skeleton

AH32

MerchantSA3UnreadLoading

Keyboard shortcuts

A panel whose header carries a soft keyboard tile, a title, a subtitle explaining that “?” opens the list and a decorative “?” key on the end side, then a definition list with the action on the start side and its keys on the end side; each key is an embossed neutral chip in monospace, key groups are pinned LTR so their order never flips in Arabic, and sequences are joined with “then”.

skeu-panel
skeu-tile-soft
skeu-chip-neutral

Keyboard shortcuts

Press ? anywhere in the merchant dashboard to open this list. Ctrl is ⌘ on Mac.

Search products & orders: CtrlK
Create a new order: N
Go to orders: GthenO
Save changes: CtrlS
Close dialog or clear search: Esc

Code block

A code window on the graphite surface: a top bar with the filename, the language and a dark copy button that announces its state through aria-live, and a body that keeps line numbers in a separate, unselectable column so they never copy with the code; long lines scroll horizontally, the whole block is pinned LTR, and comments are dimmed.

skeu-dark
skeu-btn-dark

checkout.tsTypeScript

1import { GiniClient } from "@gini/sdk"23const gini = new GiniClient({ apiKey: process.env.GINI_API_KEY })45const quote = await gini.checkout.quote({6  merchant: "techzone",7  items: [{ sku: "ANC-200", qty: 2 }],8  currency: "IQD",9})1011console.log(quote.total) // 178000 — IQD, no decimals

Tag input

A recessed input well holding removable tag chips, each with a small ghost remove key, and a transparent field that takes the remaining space and wraps to a new line when full; the whole well lights up on focus through focus-within, and a help line below explains the add and delete keys next to a tag counter.

skeu-input
skeu-chip
skeu-btn-ghost

Product tags

ElectronicsAudioKarrada

Press Enter to add, Backspace to remove the last tag.3 / 10

Star rating

A panel with the rating label on the start side and the average with its count on the end side, then a five-star radio group — filled stars in orange, empty ones drawn as outlines, only the chosen option in the tab order (roving tabindex) — and a caption below announcing the selected grade through aria-live.

skeu-panel
skeu-btn-ghost

Rate your order from TechZone4.8 · 1,284 ratings

Very good · 4 of 5

Copy field

A read-only value in a recessed well, monospace and pinned LTR, with a ceramic copy button seated on its end edge sharing the corners; the second row shows the copied state — a green check on an inner span so the button's own colour rule cannot override it — announced through aria-live, and a help line sits under the key.

skeu-input
skeu-btn-secondary

Publishable API key

Safe to use in the browser. Rotate it any time from the developer settings.

Store link

Machine-readable reference

This same library — names, classes and HTML snippets — is available to any AI agent through the MCP server, brand.json and brand.md, and is embedded in brand-prompt.md, cursorrules and AGENTS.md.

05/7

Materials & tokens

Four materials, eight elevations, five radii

Every skeu-* class is a physical material with a fixed recipe of light, shadow and edge. Know what you are putting on screen before you copy it, and use the same tokens in your own CSS when you need something the library does not have.

Materials

…
Matte polymer
- body
- .skeu-well
Used 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.
Raised ceramic
- .skeu-panel
- .skeu-panel-2
- .skeu-rail
- .skeu-dialog
Used 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.
GINI
Anodized orange
- .skeu-btn-primary
- .skeu-tile
- .skeu-tab-active
- .skeu-chip-solid
Used 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.
$ gini
Graphite
- .skeu-dark
- .skeu-btn-dark
Used 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.

Elevation levels

Level	Token	Classes	Used for
00Recessed	--skeu-shadow-recessed	.skeu-well	Functional content trays, progress tracks, the soft selected tab
01Well	--skeu-shadow-well	.skeu-input / .skeu-well-soft	Inputs, checkboxes and switches, row lists
02Flush	--skeu-shadow-flush	.skeu-btn-ghost / .skeu-list-item	Menu rows and ghost buttons at rest — they rise on interaction
03Raised 1	--skeu-shadow-raised-1	.skeu-panel	Standard cards, large chips, alerts
04Raised 2	--skeu-shadow-raised-2	.skeu-panel-2 / .skeu-rail	Hero panels, major containers, the header rail, any card on hover
05Floating	--skeu-shadow-floating	.skeu-floating	Dropdowns, floating pills, popovers
06Overlay	--skeu-shadow-overlay	.skeu-dialog	Dialogs above a lightly dimmed backdrop
07Pressed	--skeu-shadow-pressed	:active / .skeu-tab-active	The instant any control is pressed, and the selected tab

Radius scale

--skeu-radius-xs6pxTiny chips and tags
--skeu-radius-sm10pxStandard buttons, inputs, small controls
--skeu-radius-md14pxTiles and tabs
--skeu-radius-lg20pxCards and panels
--skeu-radius-xl26pxDialogs and the navigation rail

Core tokens

The exact names in skeu.css and brand.css — copy them as they are.

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

06/7

Machine-readable

Everything is a stable URL

A JSON manifest with a formal schema, a Markdown book, the logo files, the mascot pack and llms.txt — for any browser, agent or build pipeline. No HTML to parse and no session to hold.

Files

Try it from the terminal

curl -s https://gini.iq/en/brand.json | jq '.palette[0]'

grep

curl -s https://gini.iq/skeu.css | grep -c '^\.skeu-'

mcp

curl -s https://gini.iq/mcp -H 'Accept: application/json'

Versions

The version is stamped in the page head, in brand.json and in skeu.css together. The URLs never change; link to them directly and you always get the latest.

Brand version: v1.9
Design-system version: v1.1.0
Last updated: 2026-09

<meta name="brand:version">
brand.json → version
skeu.css → /* v… */

07/7

Developer FAQ

What developers ask before the first commit

Short answers on authentication, frameworks, direction, versions and licensing. Not here? Email info@gini.iq.

Do I need an API key or an account to use the MCP server?

No. The server is public, read-only and stateless: it speaks Streamable HTTP at gini.iq/mcp, allows CORS from any origin and asks for no authentication headers. Add it to your client and start asking.

Do the components work with React, Vue or Svelte?

Yes. Every snippet is plain HTML that relies on skeu-* classes only, so it pastes as-is into any framework — in React you swap class for className and nothing else. Static components need no JavaScript; the interactive ones (dialogs, menus, toasts) need the simple show/hide logic you write with your framework's tools.

Is Tailwind required to use the library?

No. Every material lives in skeu.css and works on its own. The snippets use Tailwind utilities for layout only (flex, gap, padding, type sizes); replace them with your own classes or plain CSS and the material, shadows and states stay exactly the same.

How do the components handle Arabic and right-to-left layout?

Every snippet is built with logical properties (ps-, pe-, start, end, text-start) instead of physical left and right, so it mirrors on its own once the page root carries dir="rtl". Numbers, codes and URLs are wrapped in dir="ltr" inside Arabic text, and arrows that indicate direction flip with the locale.

How do I know my copy is current?

The version is stamped in three places that move together: the brand:version meta tag in this page's head, the version field in brand.json and the first comment in skeu.css. The brand is at 1.9 and the design system at 1.1.0; changes are logged in the brand guide's changelog. The URLs never change, so linking to them directly means you always get the latest.

What may I use, and what stays protected?

The stylesheets, components and tokens are published for partners and integrations that build on or alongside GINI, and for editorial use. The logo, name, mascot and colours are registered marks: they are not altered and not used to imply an endorsement or partnership that does not exist. For any commercial co-branding, email info@gini.iq.

I found a bug or need a component that isn't here — what do I do?

Email info@gini.iq with a short description and a link to the component or a screenshot. The library grows with what partners actually ask for, and fixes ship to the same URLs without you changing anything in your project.

Need a hand?

The GINI team is a message away

Send your technical question or partner-access request to info@gini.iq and we reply within one business day. For everything about identity — logo, colours, typography, voice — there is the brand guide.

Email the team Open the brand guide

AI assistant

HTML page or framework

Coding agent

Tools

Resources

Prompts

Try it once connected

Install in 10 seconds

Actions

Forms

Shipping address

Navigation

Data display

Wireless headphones ANC

Same-day delivery

Your cart is empty

Feedback & overlays

Commerce

TechZone

Marketing & pages

Empowering partners to grow digitally

Secure e-payments

Reliable delivery

Loyalty built in

Create your store

Receive orders

We deliver, you grow

Ready to sell across Iraq?

Merchant tips, twice a month

Talk to us

Layout & structure

Good morning, Ali

Today at a glance

Store profile

Data visualisation

Communication

Comments (2)

Account & access

Welcome back