Diamond Stone Platform: Screens and Cards
Date: 2026-11-11. Revision 3. Status: draft for owner review. Companion to
docs/PLAN.md (what is built) and docs/DESIGN.md (how it looks and behaves).
This document applies one method to every card and every screen: start from the person
and what they need to know, then give each need the most direct visual answer. A live
sketch of the cards is in docs/ui-shell-mockup.html.
1. The method
For every card and screen, before it is drawn:
- Who is looking, and why? One sentence.
- What do they need to know? Their questions, most important first.
- What is the most direct answer to each? A face for "who", a photograph for "what", stage icons for "where is it", a date for "when", a bar for "how much of", stars for a rating, the exact figure for money.
- What do they do next? One main action.
- What can go? Anything that answers no question. Codes and record numbers go last and small.
Rules that apply to all of them
- People think in customers, stones and dates, not record numbers. Lead with those.
- The stone's own photograph is the picture wherever a stone is involved.
- A person or company is always shown with a logo, photo or initials in a circle.
- Words never sit directly on a photograph; the picture is a band, the words sit on a solid surface.
- Colour appears only when something needs attention. A calm card is neutral.
- Every picture has a short word or exact figure beside it.
- One card, one customer circle, one photograph, one caption line of details, one next step.
- The questions are the design method and are never printed on the screen. No question headings, no "label: value" lines. Each answer takes the most visual form that works: picture, then shape (ring, bar, route line, stage dots, stars), then icon with a figure, then a figure with a caption of one or two words. Full rules and the per-screen word budget are in
docs/DESIGN.mdsection 10, "Condensing". - Each card has a full form and a compact form for long lists.
2. Record cards
Each row is one kind of record and how its card answers the person's questions.
| Card | Who (circle) | What (picture) | Where it stands (visual) | Next step | Figure | Small print |
|---|---|---|---|---|---|---|
| Enquiry | Customer, with the channel it came through as a badge | The stone asked about | Time left to reply, in words; the customer's own message as a speech bubble | "Reply", with who it is assigned to | Estimated value, rounded | Enquiry number, source (which lead tool) |
| Quote | Customer | The quoted stone | "Viewed twice", and a bar showing how long it stays valid | "Waiting for customer" or "Follow up" | Total | Quote number and version |
| Order | Customer | The ordered stone | Stage icons: range approved, confirmed, paid, sourced, layout approved, shipping, delivered | The next stage with its date | Total | Order number |
| Shipment | Carrier logo; the driver's photo for road | A route strip: origin, destination, a marker where it is now | "On time" or "Running late", last seen time | Where it is and when it arrives | Weight and number of crates | Shipment number, vehicle or container number |
| Supplier order | Supplier | The stone ordered | Stage icons: ordered, confirmed, inspected, collected | The next stage with its date | Cost; a margin light for the owner | Purchase order number |
| Inspection | Supplier | The layout photograph, or the first photograph of the pieces, with a count of the rest | A row of thumbnails; "Layout approved by customer" or "Waiting" | "Send to customer" or "Approve" | Quantity inspected | Lot number |
| Lot (stock) | None | The lot's photograph, large | A bar: available, held, sold | "Held for …" if held | Quantity available | Lot number, location |
| Stone (catalogue) | None | The stone, full width | Finish swatches; availability chip | "Add to quote" | Price band | Collection, code |
| Sample request | Customer | A row of the sample swatches | Stage icons: requested, packed, sent, received; "Scanned twice" | "Follow up" with a date | Number of samples | Request number |
| Invoice | Customer | None | A bar: paid against total; "Due in 9 days" | "Send reminder" or "Record payment" | Balance due | Invoice number |
| Payment to verify | Customer | The bank slip as a thumbnail | The suggested match and how sure it is | "Verify" | Amount | Bank reference |
| Supplier bill | Supplier | The bill as a thumbnail | Three ticks: order, receipt, bill match | "Approve" | Amount | Bill number |
| Claim | Customer | The damage photo | Days open; who it is waiting on | "Reply to customer" | Quantity affected | Claim number, order |
| Customer | The customer, large | None | Orders this year as small bars; average stars; last contact | "Message" | Owed to us | Type, city |
| Supplier | The supplier, large | Stones they supply as small swatches | On-time record as a bar; last order | "New order" | Owed to them | Type, city |
| Conversation | The person, with a WhatsApp or email badge | None | Their last message as a bubble; unread count; time waiting | "Reply" | None | Linked order or quote |
| Leave request | The employee's photo | None | The dates as a week strip; days left as a bar | "Approve" | Days requested | Type of leave |
| Expense | The employee | The receipt photo | Category icon; what it is linked to | "Approve" | Amount | Date |
| Employee | The employee, large | None | Document expiry as a row of dated chips; leave balance bar | "Message" | None | Role, site |
| Approval | The person asking | The thing being approved, as its own compact card | Why it needs approval, in one line | "Approve" | Amount | Request time |
| Bank line | The bank's logo | None | Suggested match with how sure it is | "Accept match" | Amount | Date, reference |
| Journal entry | Who posted it | None | Debit and credit as two balanced bars | "Reverse" under More | Total | Entry number, source event |
3. Record screens: the answers in order, the rest revealed
A record screen is not a form with tabs. It is laid out in the order the person thinks, and everything else is one tap away.
The order
| # | The person's question | How it is answered |
|---|---|---|
| 1 | What is being asked of me? | A banner with the asker's face and their request in one line. Absent if nothing is asked |
| 2 | Whose is it? | The customer's or supplier's circle and name |
| 3 | What is it? | The stone's photograph and short tags |
| 4 | Is it sound? / Where does it stand? | Two or three small tiles: a light, a bar against a limit, a rating; or the stage icons |
| 5 | How much? | One large exact figure |
| 6 | What happens next? | The next steps as icons, with one plain line |
| 7 | Anything else? | Reveal rows, closed, each showing a one-line summary |
| — | What do I do? | The Omnibar's one named action |
The record number sits small under the title. Tabs are not used: a tab hides its content completely, while a reveal row shows a summary even when closed.
Reveal and drill down
Four levels, the same everywhere. Nothing is more than three taps from the first glance.
| Level | What it is | Shows |
|---|---|---|
| 1. Glance | A Halo ring or a figure tile | Is anything waiting? One icon, one figure |
| 2. Card | A record card in the stream | Who, what, where it stands, what next |
| 3. Record | The record screen | The answers above, in order |
| 4. Reveal | What is behind any part of it | Detail, in place |
Three kinds of reveal:
| Kind | When | Example |
|---|---|---|
| Open in place | The detail belongs to this record | Tap the total to see its lines and tax. Tap "Files" to list them |
| Preview | The detail is another record you only need a look at | Tap the customer's name: a small sheet shows orders this year, how fast they pay, what they owe, with "Open customer" |
| Go to | You need to work on the other record | "Open customer" moves there; Back returns to exactly where you were |
Rules:
- Every figure can be tapped to show what it is made of. A total opens its lines; a balance opens its invoices; a dashboard figure opens the records behind it. Figures that can be tapped are marked the same way everywhere.
- A closed reveal row always shows a summary: "Files · 3", "The material · Lot 0412 · 48.4 m² free".
- Reveals open where they are; the screen does not jump. Opening one does not close another.
- A preview never hides the Omnibar.
- What a role may not see (cost, salaries, bank details) has no reveal at all for that role.
- Screen readers hear each reveal as a labelled button with its summary and whether it is open.
Reveal rows by record
| Record | Reveal rows |
|---|---|
| Enquiry | The conversation; what they looked at on the website; similar past orders |
| Quote | Total (lines and tax); the material; files; what has happened; earlier versions |
| Order | Total and what is paid; the material, the approved range and the layout; documents checklist; shipment; messages; what has happened |
| Shipment | Map and route; milestones with photos; documents; driver and vehicle; costs (not for carriers or customers) |
| Supplier order | Lines; inspection photos; landed cost (owner, finance, purchasing); documents; claims |
| Lot | All photos; measures, gross and net; where it came from; holds; cost (if allowed); movements |
| Invoice | Lines and tax; payments received; the order; reminders sent; the journal entry (finance) |
| Payment | The bank slip; what it settles; the journal entry |
| Claim | Photos; the delivery proof; messages; the supplier or carrier claim; the credit note |
| Customer | Orders; quotes; conversations; what they owe by age; contacts; stones they buy |
| Employee | Documents and expiry dates; leave; pay history (if allowed); requests |
The same idea on lists and dashboards
- A dashboard figure opens the list of records that make it up; a bar in a chart opens that bar's records.
- A list row opens a preview on a long press or a tap on its circle, and the record on a tap.
- Filters are shown as chips that can be removed one at a time, so it is always clear what the list is showing.
4. Screens
Each row: who the screen is for and their question, what they see first, the visual
forms used, and the main action. Every staff app screen also carries the same shell (Halo, content,
bottom controls); see docs/DESIGN.md section 7. The client portal and the public
website do not: they have their own look, and the staff app's cards, chips, ticks and
stage dots are not used there (docs/SITE-DESIGN.md section 13).
Home
| Screen | Their question | Seen first | Visuals | Main action |
|---|---|---|---|---|
| Home, owner | Is the business fine today, and what needs me? | Halo rings for promises at risk and approvals | Cash and receivables tiles with bars; order cards | Open the first ring |
| Home, sales | Who is waiting for me? | Enquiry cards with time left | Quote cards; samples out | Reply |
| Home, operations | What moves today? | Shipment cards with route strips | Supplier orders to chase; inspections due | Open the first shipment |
| Home, finance | What money needs checking? | Payments to verify | Bills due as a bar by week; unmatched bank lines count | Verify |
| Home, admin and HR | Who needs something from me? | Leave requests | Documents expiring as dated chips | Approve |
| Home, every employee | What do I need to do? | Clock-in button with today's time | My leave balance bar; my last payslip | Clock in |
Sell
| Screen | Their question | Seen first | Visuals | Main action |
|---|---|---|---|---|
| Enquiries | Who has asked, and who is waiting longest? | Enquiry cards, most urgent first | Time-left chips; source icons | Reply |
| Customers | Who are our customers and how are they doing? | Customer cards | Small order bars; stars; owed figure | Open |
| Customer record | What is our whole relationship with them? | Their circle, name, a strip of the stones they buy | Timeline with messages, quotes, orders; owed bar | Message |
| Samples | What is out, and who should I follow up? | Sample request cards | Swatch rows; stage icons; scan counts | Follow up |
| Quote builder | What am I offering, and is it sound? | The stone photograph and the running total | Lines as cards; margin light; validity | Send quote |
| Quotes | Which quotes need a push? | Quote cards, expiring first | Validity bars; "viewed" marks | Follow up |
| Orders | Where is every order? | Order cards | Stage icons; next date | Open |
| Order record | Everything about this order | Stone band, customer circle, stage tracker with dates | Lines; documents checklist; messages; money bar | The next stage's action |
Catalogue
| Screen | Their question | Seen first | Visuals | Main action |
|---|---|---|---|---|
| Stones | What do we sell? | A grid of stone photographs | Collection strips; availability chips | Open |
| Stone record | What is this stone and can I offer it? | The photograph, full width, dry and wet | Finish swatches; property scales; lots available | Add to quote |
| Price lists | What do we charge whom? | Stones with price bands | A band bar per customer type | Edit |
| Supplier availability | Who can supply this now? | Suppliers per stone | Quantity bars; "as of" dates | Request quote |
| Stock and lots | What do we hold and where? | Lot cards | Available, held, sold bars; location | Hold |
Buy
| Screen | Their question | Seen first | Visuals | Main action |
|---|---|---|---|---|
| Suppliers | Who do we buy from and how reliable are they? | Supplier cards | On-time bars; stone swatches | Open |
| Supplier quotes | Which offer is best? | The offers side by side | Price bars on one scale; lead time; payment terms | Choose |
| Purchase orders | What is on order and what is late? | Supplier order cards | Stage icons; late chips | Chase |
| Inspections | Is the material within the approved range before it ships? | The layout photograph, or the photo set of the pieces, large | Thumbnails; measured sizes against ordered; in range or refused marks | Send for approval |
| Goods receipt | Did we get what we ordered? | The order beside what arrived | Ordered against received bars; breakage photos | Confirm receipt |
Deliver
| Screen | Their question | Seen first | Visuals | Main action |
|---|---|---|---|---|
| Shipments | Where is everything right now? | A map with all active shipments, list below | Route strips; late chips | Open |
| Shipment record | Where is this load and will it be on time? | The map with the route and last position | Milestone list with times and photos; driver circle with call button; documents checklist | Update status |
| Export documents | Is the paperwork complete? | A checklist per shipment | Ticks and missing marks; "4 of 5" | Add document |
| Delivery proof | Was it received in good order? | The delivery photo and signature | Time, place on a small map, receiver's name | Confirm |
| Claims | What went wrong and who owes what? | Claim cards | Damage photos; days open | Reply |
| Driver job (driver's own view) | Where do I go and what do I do? | The destination with one "Navigate" button | Large stage buttons; photo capture; nothing about prices | Mark next stage |
| Carrier jobs (carrier's view) | Which jobs are mine and what is needed? | Their job cards only | Stage icons; documents wanted | Assign driver |
Money
| Screen | Their question | Seen first | Visuals | Main action |
|---|---|---|---|---|
| Money overview | How are we doing? | Sales against target; cash; owed by age | Bullet bar; trend line; stacked bar; profit by stone | Open |
| Invoices | Who owes us and how late? | Invoice cards, overdue first | Paid bars; due chips | Send reminder |
| Payments in | What has arrived and is it verified? | Payment cards with slip thumbnails | Match suggestions | Verify |
| Bills | What do we owe and when? | Bills by week as a bar | Three-way match ticks | Approve |
| Payments out | What should be paid this week? | A total, then the bills behind it | Bank balance after payment as a bar | Release (two people) |
| Bank matching | Does the bank agree with the books? | One bank line at a time | Suggested matches with confidence | Accept match |
| Journal | What was posted and why? | Entries with their source event | Balanced debit and credit bars | Open |
| Chart of accounts | How are the books organised? | Account groups with balances | Balance bars within each group | Open |
| Fixed assets | What do we own and what is it worth? | Assets with photographs | Value remaining as a bar | Open |
| VAT return | What do we owe the tax authority? | The amount due and the deadline | Sales and purchases VAT as two bars; a checklist of what is included | Prepare return |
| Statements | What do the books say? | Headline figures with last period beside them | Collapsible sections; trend lines | Share PDF |
| Month-end close | What is left before we can close? | A checklist with progress | Ticks; who each item waits on | Close month |
People
| Screen | Their question | Seen first | Visuals | Main action |
|---|---|---|---|---|
| Staff | Who works here? | Employee cards with photographs | Role; expiry chips | Open |
| Employee record | Everything about this person | Their photograph and role | Documents with expiry dates; leave bar; pay history as a trend | Message |
| Attendance | Who is in today? | Faces: in, late, away | A week strip per person | Correct |
| Leave | Who is away and who has asked? | A calendar strip with faces | Leave request cards; balance bars | Approve |
| Payroll run | Is this month's pay right? | The total against last month | One card per employee; changes highlighted; exceptions first | Approve (two people) |
| Expense claims | What have people spent? | Expense cards with receipt photos | Category icons | Approve |
| Document expiry | What runs out soon? | A timeline of expiries by month | Faces with dated chips | Renew |
Reach
| Screen | Their question | Seen first | Visuals | Main action |
|---|---|---|---|---|
| Pages | What does the website say? | Page thumbnails as they look on a phone | Draft or live chips | Edit |
| Lead tools | Which tools bring enquiries? | Each tool with its enquiries this month | Bars on one scale | Open |
| Media | What photographs do we have? | A photo grid | Where each is used | Upload |
| Publish | What changes are waiting to go live? | Before and after, side by side | A list of changes | Publish |
| Channels | Is our information the same everywhere? | Each channel with a tick or a warning | Last updated dates | Update all |
| Lead sources | Where do customers come from? | Sources ranked | Sorted bars; enquiries to orders | Open |
Control
| Screen | Their question | Seen first | Visuals | Main action |
|---|---|---|---|---|
| Approvals | What is waiting for my decision? | Approval cards | The thing itself as a compact card | Approve |
| Dashboard | Are we keeping our promises? | Reply time, quote time, on-time delivery | Bullet bars against targets; trend lines | Open |
| Certificates | Are our certificates current? | Certificates with expiry dates | A timeline; expiring chips | Renew |
| Audit log | Who did what? | A timeline with faces | Before and after values | Filter |
| Users and roles | Who can do what? | Faces grouped by role | Plain-language lists of what each role can do | Invite |
| Settings | How is the company set up? | Company logo and name | Setup progress checklist | Edit |
| Devices | Are everyone's phones coping? | People with phone, browser and quality level | Frame-rate bars | Retest |
Inbox
| Screen | Their question | Seen first | Visuals | Main action |
|---|---|---|---|---|
| Inbox | Who is waiting for an answer? | Conversation cards, longest wait first | Channel badges; unread counts; time waiting | Reply |
| Conversation | What have we said, and what are they asking? | The messages as bubbles, WhatsApp and email together | Linked order or quote as a compact card at the top | Reply |
Signing in
| Screen | Their question | Seen first | Visuals | Main action |
|---|---|---|---|---|
| Welcome | How do I get in? | The logo and one field for a phone number | Country code filled in; nothing else on the screen | Continue |
| Enter the code | Where is my code? | Six boxes and where it was sent | Resend timer as a ring | Confirm |
| Use your fingerprint | Do I have to do this every time? | A fingerprint picture and one sentence | — | Use fingerprint next time |
| Welcome back | Is this me? | Their face and name | Fingerprint picture | Use fingerprint |
| Confirm it is you | What am I about to do? | The action and the amount | Fingerprint picture | Confirm |
| Your devices | Where am I signed in? | Each phone with when it was last used | "This phone" marked | Sign out |
| Locked out | I lost my phone, now what? | Two routes, each with a picture | — | Use recovery code |
Automation, chat and help
| Screen | Their question | Seen first | Visuals | Main action |
|---|---|---|---|---|
| Automations | What is being sent for us? | Each automation with its switch | Sent and answered counts as small bars | Open |
| Automation | What exactly will this send, to whom, when? | The message as the customer sees it | When, who, stops when, as three tiles | Switch on |
| Website chat (visitor) | Is anyone there? | Who will answer and how soon | Their face; the stone being looked at | Send |
| Website chat (staff) | Who is this and what do they want? | Their message, the page they are on | Stones looked at as swatches; still there or gone | Reply |
| Cases | What is open and who has it? | Case cards, oldest first | Days open; who it waits on | Open |
| Case | What went wrong and what are we doing? | The customer's words and photos | Stage icons; the order's card | Reply |
| Help centre | Can I answer this myself? | A search box and six pictured topics | — | Talk to us |
| Notification settings | What will interrupt me? | A list of switches in plain words | Quiet hours as a day strip | Save |
Client portal
| Screen | Their question | Seen first | Visuals | Main action |
|---|---|---|---|---|
| My orders | Where are my orders? | Orders with the stone as the picture | A progress line with its stage in words; next date | Open |
| Quote | What am I being offered? | The stone, the total, how long it is valid | Lines; options side by side | Accept, once the range is approved |
| Order | Where is it and when will it arrive? | The progress line with its stage in words, and dates | Map when it is on the road; documents; my contact's face | Message |
| Range approval | Is this the range I expect? | The lightest, the typical and the most veined piece, large | Enlarging; dated photographs | Approve the range |
| Layout approval | Is this my job as I want it? | Their own job laid out and numbered; for a small order, photographs of the actual pieces | Enlarging; tap a piece to ask for a change | Approve the layout |
| Invoices and statement | What do I owe? | The balance | Paid bars per invoice | Download |
| Documents | Where are my papers? | A list by order | What is ready, in words; download marks | Download all |
| Help | Who do I talk to? | My contact's face and name | WhatsApp and call buttons | Message |
Public website
| Screen | Their question | Seen first | Visuals | Main action |
|---|---|---|---|---|
| Home | Who are these people and can I trust them? | A full-width stone photograph, the heading "Omani marble and limestone" and the line "Tiles, slabs and cut-to-size stone, supplied from Oman." | Proof: projects, certificates, countries served | Request samples |
| Collections | What do you have? | Stone photographs in a grid | Collection names in the site's heading type (docs/SITE-DESIGN.md) |
Open |
| Stone page | Is this the right stone for my project? | The photograph | Property scales; finishes; where it has been used | Request samples |
| Projects | Where has your stone been used? | Project photographs | Stone used, as a swatch | Open |
| Estimator | How much do I need? | Three inputs and a live result | Quantity, tiles, price band | Get my quote |
| Container calculator | How much fits in a container? | The container filling | Weight and space bars | Get my quote |
| Sample request | Can I see it for real? | The chosen swatches | A short form | Send |
| Specifier pack | Can I put this in my submission? | What the pack contains, as a checklist | Datasheet preview | Download |
| Contact | How do I reach you? | A WhatsApp button and a named person | Map pin; hours | Message |
5. How each screen is checked
Before a screen is accepted, someone other than its designer answers:
- Can you say who this screen is for and what they want from it?
- Is the answer to their first question the first thing your eye lands on?
- Is every picture doing a job, with a word or figure beside it?
- Is there one obvious thing to do next?
- Is anything here that nobody asked for?
- Can every figure be tapped to see what it is made of, and is the rest one tap away?
- Is the screen about 40 words or fewer before anything is opened, with no heading or caption that a picture, shape or icon could replace?
Then the 32-point quality bar in docs/DESIGN.md section 15.