The website, redesigned
The first drafts of the public site and the client portal were drawn with the staff app's parts, and read as an app. This sheet sets out the look that replaces it, and why. The pages themselves are in ui-shell-mockup.html. The structure, pages and content planned in WEBSITE.md, LANDING.md, EDITORIAL.md and CATALOGUE.md stay; how they look and feel is new. Companion to SITE-DESIGN.md. Stone images here are drawn by the page as stand-ins; the real site uses photographs.
1. Why the first drafts read as an app
2. Before and after: the same home page
3. The look, in six rules
Colour: stone paper, ink, and almost no teal
Paper #F6F3EE
Ink #1E2024
Night #17191C
Quiet text #5C6067
Teal, for one line or a link
The stone supplies the colour. The brand's teal marks a single line, a link in motion, and the logo. It never fills a button.
4. Where the pages are
Every page of the public website and the client portal is drawn in this look in ui-shell-mockup.html, so there is one place for all screens: the home page top to bottom and in Arabic; stones, a stone, a project, samples, calculator, menu, contact; the store; the journal, history and landing pages; a stone under the name a visitor used; the portal from quote to delivery; every kind of field; a tablet and a desk; and the staff screens that manage it all.
5. Why each choice: what it does to the visitor
6. The look without the harm
Premium sites often trade clarity for style. Each convention below is kept in spirit and fixed in practice.