Loading, please wait
Identity manual
Every hotel and lodge we run in Makkah is assembled from the same short list of parts: one wordmark, one four-pointed mark, six colours, three typefaces, two motion budgets, two languages. This page is that list: drawn by the code that ships it, not copied out of it.
Plate 01
The wordmark is artwork, not typography. It is the company name drawn once, Arabic above, Latin below, and it is never re-set in a font, however close the match looks.
wordmark.svg · 402.87 × 176.66 · two paths, one colour
Keep a clear margin on all four sides, measured in units of the wordmark's own height. Nothing enters it: no rule, no photograph, no second logo. Because the unit is the mark itself, the rule holds at any size.
Never below 96 px wide on screen. Under that the Arabic joins close up, and a name you cannot read is not a name.
96 px: the floor
Plate 02
Two drawings, doing different work. The arches are the company's symbol: supplied, and never redrawn. The four-pointed star is the ornament drawn alongside it, the smallest unit of the geometry Makkah has been decorated with for centuries, and the only ornament this company owns.
Three nested arches, open at the foot: the arcade that surrounds the Haram, reduced until only the profile is left. It is the company's only figurative mark, and the only place gold is the subject rather than the trim. It ships as one file at #A98459 and is repainted from the palette wherever it lands, which is why the browser tab, the arrival curtain and this plate are all fetching the same drawing.
Never redrawn, never filled solid, never given a second colour. Below 16 px the three arches close into a blot, so below that use nothing rather than a smaller one.
Eight vertices on two circles, four on the axes at r, four on the diagonals at about a third of r, joined alternately. No curve, no gradient, no second colour. It is stamped in the surrounding text colour, so wherever it lands it is already the right colour.
Each of the eleven properties carries one integer seed. The same seed always draws the same lattice, so a property keeps its own texture across every deploy and nobody stores an image. Move the seed and watch the textures separate. Three of the four motifs below are drawn that way. The fourth is the drawing the company supplied, and the seed does nothing to it.
Random numbers are banned in pattern code. A texture drawn from an unseeded random would give a property a different identity on every render, and a different one again on the client.
The fourth motif is the only lattice on this site that nobody generated, and it is the thing all of that geometry is answering to. Two things about the file decide how it is used. It is a crop of a field rather than a tile, so its edges do not meet and it cannot be repeated: it is laid once and laid large. And its ink is already thinned to a wash, so it goes down as it is, never re-tinted and never stacked to darken it. The arrival curtain is the only place on the site that uses it.
Plate 03
Maroon and cream are the brand; everything else serves them. White is the ground, maroon is the only thing you press, gold is the only ornament. The rest is a step on one of three ramps, and no screen in this company is ever dark.
Contrast measured in your browser, against the colours this page is painted in.
Maroon
-
Cream
-
Gold
-
Cocoa
-
Paper
-
Ink
-
The palette above is measured live, in the browser. This one is not: it is the operator's printed production manual, quoted. A press lays down ink and a screen mixes light, so the two specifications are different on purpose and neither is derived from the other. Order signage, cards and door hangers from this table, never from a colour sampled off a monitor.
| Ink | Hex | CMYK |
|---|---|---|
| Cocoa | #4E332A | C50 M70 Y72 K55 |
| Near-black | #1C1714 | C68 M68 Y70 K84 |
| Champagne | #BFA06A | |
| Stone | #C9BCA6 | |
| Cream | #E9DECB | |
| Paper | #FAF7F0 |
On a dark ground the mark is champagne, #BFA06A. The manual names no second option.
Granite : Surfaces, borders, dividers
Gold : The accent, and only the accent
Ink : Text hierarchy
Status colour is never decoration. Green means a booking is confirmed. It does not mean pleasant.
Confirmed
--color-success
Needs attention
--color-warning
Cancelled
--color-danger
For information
--color-info
Plate 04
Fustat sets the headings. IBM Plex Sans Arabic sets everything a guest reads or types. Montserrat carries the Latin. All eleven properties share the same three: we vary accent and pattern, never the typeface.
راحة تليق بضيفنا
FustatArabic display
Variable · 200–800 · one file
اختر مدة الإقامة المناسبة
IBM Plex Sans ArabicInterface and body
Five weights · 300–700
A place for every stay.
MontserratLatin companion
Variable · 100–900 · not preloaded
Every step is a clamp() between a 320 px phone and a 4K display. The pixel sizes below are what your viewport is rendering at this moment: resize the window and they move.
measured at - px wide
Text may be split by word. Never by letter: that breaks the joining forms and turns a word into loose glyphs. This binds every animation, every truncation, and anything that measures text.
By word
عبدالعزيزالغامدي
By letter
Western digits by default, in both languages, so a guest can check an amount against a bank statement without translating it first.
Western: the default
1,284
Arabic-Indic, on request only
١,٢٨٤
Plate 05
Two budgets. Marketing gets the expressive one. Checkout gets the functional one, because a beat spent on ornament there is a beat spent on somebody deciding not to book.
Expressive
Brand and property pages
Functional
Booking, checkout, staff screens
Wrapping a subtree in the functional budget collapses every expressive duration inside it. No component checks which budget it is in, and that is the whole reason it holds.
Under reduced motion the page keeps the layout the server already sent. Nothing is hidden waiting for an animation that will never arrive.
Plate 06
Every shared control, rendered here by the same code the booking flow and the staff panel import. Nothing on this plate is a picture of a component: press them.
One primary action per view. Secondary and outline carry the alternatives, ghost carries the escape, and danger is reserved for cancelling a booking.
No native select, no native date input. Every replacement lives in src/reusables and animates on open and on close.
Optional
Please check this field.
Saved
This is what decides the right option for you, so we ask it first.
The table demonstrates the component with the properties themselves. A manual invents no guests.
| Property | District | Rooms | Status |
|---|---|---|---|
| Al Naseem Lodge 2 | Al Naseem | 90 rooms | Confirmed |
| Qeerwan Al Maabda Hotel | Al Maabda | 148 rooms | Confirmed |
| Qeerwan Al Mashaer Hotel | Al Zahra | 104 rooms | Saved |
No matching bookings
Change the search or clear the filters.
Two things fill a wait, and they are not interchangeable. The curtain covers a whole surface before anything has painted, so it is drawn by CSS out of markup the server already sent, with no player to boot and no script to start it. The second is the page's own shape, standing in inside a document that has already arrived while the rest of it streams.
RouteCurtain. The mark as a CSS mask over the girih ground, and the same component the curtain itself renders.
StaffPageSkeleton and PublicPageSkeleton. The proportions of what is coming, so that nothing moves when it lands.
Plate 07
The parts, assembled. Everything below is the same component a guest touches on the way to a booking: the same file, not a drawing of it.
1 SAR = 100 halalas, and no float goes near a price. A total that does not equal the sum of its own lines is not a rounding quirk; it is an invoice under a tax authority's QR code.
| Stay | Stored | Shown |
|---|---|---|
| Room charge | 14348 | SAR 143.48 |
| VAT at 15% | 2152 | SAR 21.52 |
| Total charged | 16500 | SAR 165.00 |
The first night is billable. The checkout morning is not. That is what lets one guest leave on the morning another arrives without the two stays colliding, and why an inclusive comparison here either loses a sellable night or sells the same room twice.
Billable nights: 3
Hijri means islamic-umalqura, never the generic islamic calendar. The two disagree by a day often enough to matter to somebody planning a journey around a date.
Gregorian
19 October 2026
islamic-umalqura
8 Jumada I 1448 AH
Plate 08
One sentence carries the whole company, a short list of phrases are ours to reuse, and the pairs below settle what a line says and what it never says. This is the half of an identity that is written every day and drawn almost never.
In Makkah, every stay has the place that suits it.
Not a slogan to decorate a poster. It is the promise the whole portfolio is arranged around: eleven places, three lengths of stay, and one of them right for the guest in front of you. Every other line we write is another way of saying it.
Plain Saudi Arabic, spoken clearly and without decoration. These phrases already run across the site and the booking flow. Reuse them rather than reach for a synonym: a guest who reads the same words twice has learned something, and a guest who reads two words for one thing stops to check whether they mean the same.
Distance to the Haram
Say: The real distance, in minutes, and how it is covered.
Do not say: Beside the Haram, when it is a bus ride away.
Price
Say: The owner's own price, with what it includes and what it does not.
Do not say: Cheapest in Makkah.
What a place offers
Say: Name the thing: air conditioning, free Wi-Fi, reception at any hour.
Do not say: Luxurious. Exceptional. World class.
Guests
Say: Describe the room and the building.
Do not say: Name, photograph or quote a guest who has not been asked.
Long stays
Say: Monthly and per-term contracts, and what changes at each length.
Do not say: A year at a time, when a term is on offer.
Booking
Say: Book directly, on this site or on WhatsApp.
Do not say: Last room. Hurry. When it is neither.
Seasons
Say: Say that Ramadan and Hajj are priced differently, before being asked.
Do not say: One price, all year round.
Pilgrims and visitors
Say: Talk about the stay: the room, the distance, the transport.
Do not say: Make the pilgrimage itself the reason to book with us.
Families
Say: What a family needs to know: how many the room sleeps, reception, security.
Do not say: Assume who is booking, or who is paying.
Taken from the company's own content strategy and from the copy already running on this site. It holds for the site, the booking flow and a WhatsApp reply alike: the rule does not change with the channel.
Plate 09
The artwork as it ships. These are the exact files the site loads, not exports made for this page.
Set in Fustat, IBM Plex Sans Arabic and Montserrat. Colour measured live. Lattice drawn in the browser from a seed. Owned, managed and operated by one company.
Back to the portfolio
