Three fixed colours, a traced lockup, and no photography — that is the whole inheritance. The lockup is vector outlines, not live fonts (provenance in assets/brand/README.md); official artwork from the brand designer supersedes it. The logo contains both scripts, so it never mirrors and never swaps per locale.

Fixed palette — never edited, only extended

--brand-navy FIXED

#22426B · exact flat sample

--brand-copper FIXED

#C89878 · normalised swatch

--brand-near-white FIXED

#FBFFFF · normalised swatch

Deployment rule: navy is chrome and voice (bands, buttons, ink); copper is warmth in small, deliberate doses (accents, sale, the arc); near-white is the page itself. On light surfaces the resold bags supply the loud colour — the brand recedes, exactly like the physical shelf wall.

Lockup usage

• Reversed lockup on navy or a photo scrim only — the wordmark is near-white and dies on light ground.
• On light surfaces use the primary (navy tile) version, or type the name; never recolour the mark.
• Minimum width 72px; clear space = the monogram's handle height.
• Header height uses the monogram-and-wordmark lockup as supplied; no horizontal variant exists yet — request one from the brand designer.

Every ramp is derived from the two brand hues — navy carries structure and text, copper carries warmth, and the sand ramp is copper at low chroma so the imagery surface never fights the bags. Semantic states are tuned to sit beside navy + copper: terracotta error, olive-green success. Sold-out is neutral, never red (the page stays live and linkable); sale is brand copper, never red. Ratios below are computed live from the actual token values.

No typeface exists in the brand, and typography never changes seasonally (S1) — so it carries the brand alone. Committed here: Zain for display and IBM Plex Sans Arabic for text and UI. Both are Arabic-first designs with genuinely drawn Arabic — not Latin faces with bolted-on Arabic — both free webfonts, five files total (~240 KB subset), inside the performance budget.

Canonical values live in tokens/*.css in this project. Geometry is rounded because the brand is — the monogram, their own spec-sheet cards, the pill tables. Depth comes from borders first; shadows are navy-tinted and rare.

Product grids run 2 / 3 / 4 columns (IA §5.2) and never more. Above laptop the content column caps at 1200px and centres; the navy bands run full-bleed so a 27-inch screen reads as a framed page, not a stretched phone. Reading surfaces (PDP text, checkout, order page) cap at 680px.

One component set, logical CSS properties throughout (margin-inline-start, inset-inline-end…), dir on the root — never a mirrored second stylesheet (ADR-0001). Every demo in this document is the same markup rendered under both directions; use the toggle in the masthead to prove it.

Prices always show three decimals (integer baisa underneath) and are always VAT-inclusive — Oman VAT Law Art. 37, a legal requirement, so the VAT line is a caption, never arithmetic at checkout. The shop supplied the official rial symbol; it renders as an inline SVG that inherits text colour, with the three text tokens (ر.ع / ريال / OR) kept as swappable fallbacks — flip the currencyToken tweak to re-render every price in this document.

The price component

6.500{{curTxt}}

{{t.vat}}

6.500{{curTxt}} 2.600 {{t.per100}}

card size · per-100g makes the flat 6.500 shelf price comparable across weights

{{t.sale}} 12.900{{curTxt}} 15.000

sale price is copper-700, the struck price stays neutral — never red

The token, in each form

6.500

official symbol · default

6.500 ر.ع

their captions

6.500 ريال

their price cards

OR 6.500

their shelf stickers

Symbol weights (supplied SVG)

bold ≤17px text · medium at display sizes · height 0.62em, optically baseline-centred

Rules

• Always three decimals: 6.500, never 6.5 — money is integer baisa underneath.
• Numeric run is always <bdi dir="ltr">; Western digits both locales.
• Token placement: after the amount in Arabic (their cards), before it in English (their stickers). One token per surface, set globally.
• Prices are VAT-inclusive everywhere; the {{t.vat}} caption appears on PDP and at the order total, not on every card.
• Price is text, never an image (the competitor ships a 3840px PNG as its currency glyph).
• Which token ships is IA5 — client's call; the symbol is this system's recommendation.

Pills for anything tappable, 48px default height, 44px minimum target. Primary actions are navy; copper fills are reserved for promotion (sale, gifting) and always carry ink text — white-on-brand-copper fails AA and is banned. These render in the selected locale; flip the masthead toggle to check both directions.

One content model, reused on home rows, category grids, collections and search (research §4·15): image · roaster · name · tasting triplet · price with per-100g · add affordance. Fields that aren't filled simply don't render — an honest short card beats a padded one. Roast level has no slot anywhere (dropped: on zero of four bags, absent from their own selling). The photo sits on the sand surface so heterogeneous roaster bags hang together like the physical shelf; no photography exists yet — the watermark tile below IS the placeholder spec.

The four states — baseline-locked, phone card width

{{t.rWindmill}}

{{t.prodSidama}}

{{t.notesSidama.0}} · {{t.notesSidama.1}} · {{t.notesSidama.2}}

6.500{{curTxt}}

2.600 {{t.per100}}

{{t.newBadge}}

{{t.rBlackKnight}}

{{t.prodAdham}}

6.500{{curTxt}}

2.600 {{t.per100}}

{{t.soldOut}}

{{t.rOstool}}

{{t.prodYemen}}

6.500{{curTxt}}

{{t.sale}}

{{t.rOwn}}

{{t.prodBundle}}

12.900{{curTxt}}15.000

full · sparse-but-honest (no notes ⇒ no notes row; in English, أدهم keeps its Arabic name — a missing English value renders the Arabic, never a blank) · sold out (photo untouched, neutral badge, disabled add — page stays live) · sale (copper, struck price neutral). Cards never carousel their images. All four add buttons sit on one line and all four prices on another: the action row is pinned to the card floor, the slack lands above it.

Imagery — 1:1, sand ground, 1 vs 3 shots

1 image — no dots, no strip

3 images — thumb strip, PDP only

Standard: 3 shots per product (front · back label · in context), AI-assisted per D7, always cut out onto sand-50. The card always shows shot 1; galleries exist only on the product page. Placeholder = sand tile + 12% watermark — never a grey box, never a broken-image glyph.

Image spec — the photographer's sheet

Every product asset is square and shot on one ground. Three delivered sizes cover every slot in the system — the largest card image is 203px, so 640 already carries 3× density.

AssetExportRenders at

{{s.what}} {{s.px}} {{s.slot}}

Ground

#F7F2EC

sand-50 · --surface-image

Flat and baked into the file — no alpha, no gradient, no vignette, no studio sweep. Corners are CSS (10 on cards, 14 on PDP), never painted in. Product fills ~80% of the frame with ~10% air all round; a contact shadow is allowed at 8% navy, nothing softer or wider.

File + exceptions

• WebP primary, JPEG fallback, q≈85 · ≤40KB at 640, ≤160KB at 1440.
• Bands (seasonal, about) are the one non-square case: 16:9, 1920 wide, on navy #22426B, full-bleed.
• Placeholder ships at all three sizes: sand tile + monogram at 12%.
• Sold-out photo is untouched — the badge carries the state, never a grey wash.

Honest short spec — renders only what is filled

{{t.prodCamboda}}

{{t.specSource}}{{t.brazil}}

{{t.specRoaster}}{{t.rKhibra}}

{{t.specProcess}}{{t.anaerobic}}

{{t.specVarietal}}{{t.arara}}

{{t.specAlt}}{{t.alt1000}}

{{t.prodAdham}}

{{t.specRoaster}}{{t.rBlackKnight}}

{{t.specWeight}}{{t.g250}}

two filled fields ⇒ two rows. No empty rows, no dashes, no invented values.

The finder is held back from v1 (project-lead call, 2026-08-23), so the phone bar carries exactly three things: logo · cart · menu — and search lives at the top of the menu panel. The panel is full-screen, one level at a time with a way back — never an accordion — and enters from the writing-direction edge. No account icon exists anywhere (no accounts in v1). The demo is live: open the menu, push into البوكسات, switch language from inside the panel.

2

{{t.home}}{{t.crumbSep}}{{t.catCoffee}}

{{t.catCoffee}}

{{t.crops12}}

{{t.menu}}

{{t.catCoffee}}

{{t.catBoxes}}

{{t.catQuick}}

{{t.catDrink}}

{{t.pgBranches}}

{{t.pgStory}}

{{t.pgCart}}

{{t.pgDelivery}}

{{t.pgContact}}

{{t.langSwitch}}

{{t.back}}

{{t.catBoxes}}

{{t.boxSeason}}

{{t.boxReady}}

live · sticky bar 60px · panel enters from the {{t.crumbSep}} writing edge · one level at a time, back on top

Tablet / laptop bar — dropdowns open on tap, never hover

{{t.catCoffee}} {{t.catBoxes}} {{t.catQuick}} {{t.catDrink}}

{{t.langSwitch}} 2

{{t.boxSeason}}

{{t.boxReady}}

{{t.catBoxes}} ←

tap {{t.catBoxes}} to open — a menu that behaves differently by device is a menu with two bugs. The last dropdown row links to the parent category page itself.

The short-header reality — deliberate at three items

{{t.catCoffee}} {{t.catBoxes}} {{t.catQuick}}

{{t.langSwitch}}

Empty categories hide themselves (S3) and gear ships hidden (B14), so launch may look exactly like this. Items sit inline-start beside the logo — no stretched centring, no filler links, and the actions cluster keeps the end balanced. Roasters never appear here (they are a filter), and there is no account icon.

The facet set is exactly what the evidence supports (catalogue-model §3): brew method · roaster · origin · process · tasting tags. No roast level, no price slider at a flat 6.500, no sort menu invented. Phone: a bottom sheet — the grid behind dims but never reshuffles. Tablet: the same groups as a panel beside the grid. Laptop: permanently visible rail. Live: open the sheet in the phone frame.

Phone-first parts now; full page compositions land with the page specs (as agreed). Checkout is guest-only, phone-as-identity, and always ends in a hosted-redirect to the gateway — so the CTA says where you're going, and an unpaid return lands back in the cart with the error notice from §08. Live: pick a delivery method — the summary re-totals; pickup reveals the branch choice.

Cart line + summary

{{t.prodSidama}}

{{t.rWindmill}} · {{t.g250}}

{{qty}}

{{t.remove}}

6.500{{curTxt}}

{{t.subtotal}}13.000{{curTxt}}

{{t.delivery}}{{t.free}}{{delPriceNum}}{{curTxt}}

{{t.total}}{{totalPrice}}{{curTxt}}

{{t.vat}}

{{t.payCta}}

{{t.payNote}}

Delivery-method selector — live, prices from the wilayat table

{{t.methodTitle}}

{{t.mPickup}}{{t.promisePickup}} {{t.free}}

{{t.branchNizwa}} {{t.branchMuscat}}

{{t.mCourier}}{{t.promiseShip}} 1.000 {{t.mHome}}{{t.promiseShip}} 2.000

The promise line under each method is business-edited bilingual copy, displayed verbatim. A method switched off for the customer's wilayat simply doesn't render (S3) — if none remain, the empty state offers branch pickup + WhatsApp. Prices are the business's wilayat table, never constants.

Order page — one page, two moods (no lookup form; reached by emailed/WhatsApp link)

{{t.moodA}} {{t.moodB}}

{{t.orderThanks}}

{{t.orderLater}}

{{t.orderNo}} #1042

{{t.stPlaced}}

{{t.stPrep}}

{{t.stReady}}

{{t.stDelivered}}

{{t.stPlaced}}

{{t.stPrep}}

{{t.stReady}}

{{t.stDelivered}}

exception statuses, shown only when applied: {{t.stReturned}} {{t.stRefunded}}

Statuses only — never a carrier tracking link (couriers keep numbers internal). The rail runs in the writing direction; "ready to collect" swaps to "shipped" for courier/home orders.

Every state from IA §6, none of them a dead end: each offers the categories, search, or WhatsApp. Type-led, no sad illustrations, no invented mascots. All wording below is placeholder — the client owns the voice (finder-related states are gone with the finder; its slot returns when it ships).

category empty · link still held

{{t.eCat}}

{{t.eCatBody}}

{{t.catCoffee}} {{t.catQuick}}

normally unreachable — an empty category removes itself from the menu (S3)

search empty

{{t.eSearch}}

{{t.eSearchBody}}

{{t.catCoffee}} {{t.catBoxes}}

cart empty

{{t.eCart}}

{{t.eCartBody}}

{{t.catCoffee}}

404

404

{{t.e404}}

{{t.e404Body}}

{{t.catCoffee}} {{t.search}}

the brand's own monogram, gently tipped — our Amazon-dogs moment. The real mark, never a drawn mascot; upright everywhere else, it only tips here

sold out — PDP buy area

{{t.prodYemen}}

{{t.rOstool}}

{{t.eSoldTitle}} {{t.soldOut}} {{t.askWa}}

page stays live + linkable, dropped from sitemap same-day; notify-me deliberately deferred until a WhatsApp provider exists

Four fixed columns (IA §5.4). The structure is ours; the business edits phone numbers and links as values — there are no free-text widgets to fill with "IPA". Numbers are LTR runs. Payment marks render as monochrome text chips until the gateway is chosen (D5 open).

S1: seasonal looks are pre-designed variants the business activates and schedules, never assembles — each carries a date window and reverts itself (the realistic failure is Ramadan decorations still live in July). Typography never changes; layout never changes; each theme is a small token layer plus at most one structural motif, and real seasonal content does the rest. Four variants ship designed-and-approved: Ramadan and Eid as a night/day pair, National Day deliberately restrained, New Year as midnight. Greeting lines below are placeholders — the client owns the wording.

{{b.label}}

{{seasEyebrow}}

{{seasTitle}}

{{seasLine}}

{{t.shopNow}}

This theme: {{seasDiff}}

Shared discipline, every theme: fonts, spacing, layout and components untouched · at most one motif, used once, always hairline-subtle · every text/background pair stays AA (the tuned tints exist for exactly this: copper-300 on deep navy 5.6:1, flag-red CTA with white 6.8:1) · themed placeholder tiles here stand in for real seasonal photography, which does most of the work · date window set at activation, auto-reverts. What a theme may never do: swap fonts, scatter decoration, add a countdown widget, or recolour product cards — the shop floor stays calm while the hero dresses up.