Diamond Stone: the public website's look

Date: 2026-11-11. Revision 2 (sections 13 to 19: the portal, screen sizes, inputs, pictures, what the app manages). Every page is drawn in docs/ui-shell-mockup.html; the argument for the look is in docs/website-design.html.

The first drafts of the public site were drawn with the staff app's parts and read as an app. This document replaces their look. What the site contains does not change: pages, journeys, products in search, the library, the catalogue and landing pages stay as planned in docs/WEBSITE.md, docs/LANDING.md, docs/EDITORIAL.md and docs/CATALOGUE.md. How it looks, feels and is kept current is set out here.

docs/DESIGN.md continues to govern the staff app. As of revision 2 (section 13) the client portal takes the look set out here, together with the public site. Both share the brand with the app (docs/BRAND.md) and nothing else.

Research was done on 11 November 2026. Its main limit: about 25 premium sites were read for their words, navigation and order of sections. Their typefaces, colours and spacing could not be seen by the method used. So the structure below rests on what was observed and on usability research; the visual style is a design judgement, checked against that research, and is to be tested with real buyers.

1. Why the first drafts read as an app

The cause was a good rule applied in the wrong place: "one shell everywhere". The shell (Halo, Omnibar, glass, cards) is for people doing work. A visitor is not doing work; they are deciding whether to trust a company with a building.

2. What premium sites do, and which to resemble

Observed on the home pages of Antolini, Salvatori, Margraf, Henraux, Neolith, Mutina, Stone Source, Polycor, Artistic Tile, ABC Stone, Poliform, Molteni, Minotti, Gaggenau, Vipp and others.

Three kinds of site were visible:

So: a hybrid. The first screen and the pace of a premium architectural brand; the catalogue, filters, specifications, samples and named contact of a good distributor. Diamond Stone is a trader selling to professionals who must specify and quote.

3. The look, in six rules

1. The photograph leads. Full width, tall, one at a time. Whole slabs, not cropped swatches. Nothing sits on a slab except, on the opening, a few words.
2. Space is the frame. Wide margins, long gaps between parts.
3. Type does the work of boxes. Large, light headings; small labels; hairlines. Order comes from size and space.
4. Square and flat. No rounded corners, shadows, glass or gradients.
5. One quiet action. A slim filled bar with the page's one action at the right and the word "WhatsApp" at the left (section 21). Other links are underlined words.
6. Unhurried and still. Photographs fade in; words rise a short way; pages cross-fade. Nothing bounces or moves by itself. Values and a live sheet: docs/SITE-MOTION.md, docs/site-motion.html.

Values

Rajdhani is kept, as the owner decided. Set light and large it carries an editorial page better than it does at the app's medium weight. If, with real photographs in place, it still reads as technical rather than refined, a second typeface for headings is the first thing to try; that would be a new decision.

4. The parts, replacing the app's

Not used anywhere on the public site: the Halo, the Omnibar, glass, cards, chips, toggles, sheets, steppers, status colours, icons in circles.

The slim action bar is the one thing kept from the idea of an always-present action. None of the premium sites read showed one, and the evidence for sticky bars is sellers' claims. It stays because a visitor on a long page should never have to hunt for the next step. It is among the first things to test.

5. The pages

Drawn: home (four screens), stones, a stone (two screens), samples, a journal article, history, the menu, contact; home on a wide screen; home in Arabic.

At a desk. Architects specify at a desk, and premium sites are built for both. The plan so far said "phone only" for everything. For the public site this document proposes: designed for the phone first, with a real layout for wide screens (two or three figures across, text held to a readable width, all links in the header). The staff app stays phone only; as of revision 2 the portal also has tablet and desk layouts (section 14). A decision for the owner.

6. Why each choice

No research was found comparing "app-like" with "editorial" design. The case for the change is the owner's reaction, the observed sites, and the finding on clutter.

7. The look without the harm

Premium sites often trade clarity for style. Each convention is kept in spirit and fixed in practice.

8. Photographs

The look depends on them more than on anything else. The stand-in images in the sheet are drawn by the page; the site is not ready until real photographs replace them.

A shoot day at the yard each season, with a written shot list, keeps the photographs consistent. Slab photography guidance came from one vendor's guide; no industry body's guidance was found.

9. How the team keeps it current

The look is fixed in code. Nobody can change a colour, a size or a layout from the staff app. What the team changes is content, in records, and the page follows.

By rhythm

What keeps a small team from falling behind (from published guidance on content upkeep): every page has one named owner and a review date; a page is either current or plainly retired, never left to rot; the manager screen lists what is overdue; and the writing plan is sized to one person (docs/EDITORIAL.md).

Checks added for the look, at publish: no photograph narrower than the largest frame it fills; the opening line is six words or fewer; no text set in capitals longer than a label; nothing in Arabic with letter spacing; no text baked into an image; both languages read by a person.

10. Decisions

1. The public site gets its own look, separate from the app. This document assumes yes.
2. A layout for wide screens, for the public site only (widened to the portal by decision 8, section 19).
3. The slim action bar: kept, or the action placed only within the page.
4. Rajdhani for headings on the site, or a second typeface for headings if real photographs show it is needed.
5. Paper and ink colours as proposed, or the app's cooler greys.
6. Who owns photography, and whether a photographer is hired for the first shoot.

11. To test before building

With five people of each kind of buyer, on their own phones and at a desk: can they say what the company does after five seconds; can they find a stone for a bathroom; can they find what a quote will cost them to get; do they notice the action bar; does the Arabic read as naturally as the English. And with real photographs in place: whether Rajdhani carries the page.

12. Sources

Read directly: the home pages listed in section 2, and those of Al Mouj Muscat and Emaar in Arabic; Nielsen Norman Group on luxury sites, on trust for business buyers, on hidden navigation, on flat and ghost buttons, and on content audits; Stanford's web credibility guidelines; Baymard on product images; web.dev on loading the main image; the W3C's Arabic layout requirements; INSEAD's summary of Jung and Dubois 2023; the press release for Pracejus, Olsen and O'Guinn 2006; GOV.UK's content design guidance; a vendor's guide to photographing slabs. From abstracts or summaries only (unverified): Tuch and others 2012; Henderson, Giese and Cote 2004; Pocheptsova and others 2010; Park, Im and Kim 2020; Reinecke and Gajos 2014; Kruger and others 2004; Fuchs and others 2015; Fogg and others. Not seen: any site's typefaces, colours or spacing; any product page; several sites that refused the request. Not found: research on app-like against editorial design; on spaced capitals or light type and luxury; photography guidance from a stone industry body.

Revision 2: the portal, every screen size, every kind of input, and what the app manages

Added 11 November 2026, after the owner asked for the client portal to take the same look, for the mockup to be the one place for all screens, for more imagery, and for everything on the site to be manageable from the staff app. All pages are now drawn in docs/ui-shell-mockup.html; docs/website-design.html keeps only the argument (why, the rules, the evidence).

13. The client portal takes the same look

Before this revision the portal used the staff app's shell. Now:

What does not change: what the customer can see and do (docs/PORTAL.md), sign-in by phone number, a one-time code, then passkey, the masking of origin and driver, their own currency only.

This changes an earlier rule, "the Halo and Omnibar on every signed-in screen". The Halo and Omnibar remain for staff, drivers and logistics companies. For customers the same information is carried in the site's look. Recorded as a decision (section 18).

Drawn: portal home, an order, a quote, slab approval (since replaced by approving the range and then the layout: section 22), paying, papers, delivery, delivered and rating, reporting a problem, sharing a project, a testimonial, what a trader sees, a dollar quote, accepting terms, the home-screen offer, help; and one order at a desk.

14. Screen sizes

The site and portal are designed for the phone first and reflow at four widths. The staff app stays phone only.

Rules for all sizes: text lines never longer than about 70 characters; photographs are served at the size of the frame they fill, never larger; nothing appears only on hover; the same content at every size (search engines see one page); turning a phone sideways keeps the phone layout with wider margins.

Drawn: phone throughout; a tablet (stones); a desk (home, a stone, a portal order).

15. Every way of using it

16. Fields

Drawn as three frames ("Fields 1, 2, 3"). One style: a small label above, the value on a line, nothing boxed.

States: in use (the line turns teal and thickens); wrong (the line turns red, with one plain sentence beneath saying what is needed); filled by the phone; read-only (no line). After sending: a short note with a teal rule saying who will reply and when; if it could not send, a note with a red rule saying it is kept and will go later. Errors are shown when the person leaves a field, not while typing, and never by colour alone.

17. Pictures: how many, of what

The first drafts used one kind of picture. Each page now carries several kinds, so a long page stays alive without decoration.

In the mockup these are drawn stand-ins. None of this is real until the first shoot.

18. What the staff app manages

Everything on the site and portal that is content or a setting is changed in the staff app. Nothing needs a developer except the look itself.

19. Decisions added

7. The portal takes the site's look, and the customer's Halo becomes a line of words. This revision assumes yes, since the owner asked for it; it replaces "the Halo on every signed-in screen" for customers only.
8. Tablet and desk layouts for both the site and the portal.
9. A first photography shoot before any page is built with real content: the look cannot be judged on stand-ins.

20. Checks added from other sites' faults (11 November 2026)

At publish and each quarter (docs/COMPETITORS.md section 7): no placeholder words or unfilled template parts; no word from the wrong language; the year and all counts come from records, never typed; a journal whose newest piece is over six months old is not listed on the home page; every figure shown has a record behind it; language is signalled correctly to search engines; nothing a buyer needs sits behind a login.

21. WhatsApp, contact and chat (added 11 November 2026)

The owner asked for a floating WhatsApp button and link, and a chat on the website. Drawn in the mockup under "Website and portal: Ask, WhatsApp and chat". The chat's workings (one inbox, the reply promise, no pretending) are in docs/MODULES.md section 10; this section is how it is offered and looks.

What premium sites do

Forty-one sites were opened on a phone on 11 November 2026 (home page, first load, cookie banners not accepted, so anything that appears only after consent or on a product page is under-counted).

Two things follow. In the Gulf, WhatsApp is expected. And no luxury house shows a floating bubble; they put contact behind one labelled entry that opens a short list of ways.

What the research says

The design

The word "WhatsApp", fixed in the action bar of every page. It does what a floating button does (it is always on screen and under the thumb) without sitting on top of the page or stacking on the bar. One tap opens WhatsApp with the message ready.

An earlier draft put the word "Ask" there, opening a list of ways first. It was changed after working through how people will read it:

"Ask" was tidier for us: one door to four rooms. "WhatsApp" is clearer for them. A person should know what a control does before touching it, and should not have to learn our wording.

Two places the evidence differs from the request

1. A floating WhatsApp bubble. Not drawn as a bubble. The word "WhatsApp" fixed in the bar is the same thing in effect: always on screen, one tap. It is what the best Gulf sites do (Emaar keeps WhatsApp in its fixed header). A separate green bubble would sit on top of the bar and cover the page on a phone.
2. Live chat on the website. To most people in the Gulf, "chat" with a business already means WhatsApp. A chat on the page is a weaker copy of it: it is lost when the page closes and it promises an answer in seconds. So it is kept as the second way, for someone without WhatsApp to hand (often at a desk, or abroad): under Contact, offered only while someone is on duty, stepping aside honestly when nobody is free. Whether to switch it on at launch is a decision.

Costs to know

Messages a customer sends are never charged. From 1 October 2026, as Meta's pricing page is reported to say (to be re-read before budgeting), replies inside the 24-hour window are free up to 1,000 a month per number and charged beyond that. docs/MARKETING.md said such replies were simply free; that is corrected.

Measured

Taps on WhatsApp, per visit; Contact opened, and which way was chosen, by page and language; conversations actually started; time to first reply, in and out of hours; questions unanswered after one working hour; enquiries that reach a quote.

Decisions

1. "WhatsApp" on the bar. Now the recommendation, for the reasons above. To be settled by showing five buyers both bars and asking one question: "what happens if you tap this?"
2. Chat here at launch, or WhatsApp only until the team can staff it.
3. The hours and the reply promise shown to visitors.

22. Matching (added 11 November 2026)

Two new kinds of picture: the range (three pieces, lightest to most veined, with those words beneath) and the layout (a job laid out, seen from above, optionally numbered). The layout is the home page's second picture. Both follow the picture rules of section 17: dry, daylight, dated, from a named lot. Pages drawn: the home part, a stone's range, "How we match", the range set of samples, and five portal pages. Plan: docs/MATCHING.md.

23. Voice: how the site must not read (added 12 November 2026)

The owner looked at a screen headed "A registered Omani company, with named people" and said it felt machine-written. He was right, and the fault ran through the site: headings that explained or argued, clipped pairs of reassuring sentences, and "this, not that". A real company labels things and states facts. 115 places were rewritten.

Questions people really type stay as questions in the Journal ("Is Omani marble suitable for bathrooms?"). Notes about the design never appear on a screen; they belong in the caption beneath it.

This is added to the forbidden-patterns test in docs/TESTING.md (W1): a public heading longer than six words, or containing ", not ", ", so you" or "Here is why", fails.