Five sections, ordered by how often a bookseller needs them during a shift. These boards fix structure and behaviour only. Visual style comes in step 2.
/
What needs doing before the shop closes?
/orders
Books customers have asked for, from request to collection.
/orders/:idThe order trail, customer, book, messages/orders/new/orders/ready/notifyOne message to everyone whose book has arrived/stock
What is on the shelves, and what needs reordering.
/stock/:isbnCopies, location, sales, reorder level/stock/receive/stock/importUpload, match columns, review rows, confirm/suppliers
Who you buy from, and what is on its way.
/suppliers/new/suppliers/:idTerms, contacts, order history/settings
Your shop, your team, and your till.
/settings/shopName, opening hours, collection shelf/settings/teamInvite staff, owner or booksellerAn order opens its title in stock. A supplier opens its open orders, already filtered. The Today headline goes straight to the orders that need action.
Sign in. Customer-facing collection page (read only). Not found. Errors that name the supplier and what to try next.
1. List orders across every status with paging. 2. Stock lookup by ISBN that returns the shelf location.
Four breakpoints chosen around the devices booksellers actually use: a phone at the shelves, an iPad on the counter, a laptop in the back office. Nothing is the desktop shrunk.
Bottom tab bar, five labelled tabs, reachable with a thumb. Page title and one primary action in the header.
An 88 px rail, icon above label. Leaves the width for content on an iPad in portrait at the till.
A 248 px sidebar with labels; its foot shows the shop and who is signed in. Detail opens in a right panel (dashed). On desktop the panel stays open and content is capped at 1280 px.
| Pattern | Phone | Tablet | Laptop and desktop |
|---|---|---|---|
| Page actions | One primary action in the header; the rest in a More menu | Primary and one secondary action in the header | All actions in the header, primary rightmost |
| Stock and order tables | A list grouped by status or section; copies on the right | Four columns; supplier and location move to a second line | Full table with separate In stock and On order columns |
| Filters | Filters button opens a bottom sheet; active filters show as removable chips | Filters button opens a popover; chips below the search | Inline filter bar; every choice visible |
| Detail and edit | Full screen with a back button | Side sheet over the list | Right panel beside the table, which keeps its scroll position |
| Forms | One column, full width, action bar fixed to the bottom | One column, at most 560 px wide | One column, at most 560 px, in the panel or a page |
| Multi-step tasks | Full-screen task; tabs hidden; Exit at top left | A centred 640 px column with a step indicator; navigation hidden behind an Exit link so the task has the screen | |
/One headline action, then the order trail, then what changed. The tablet keeps the same order and gains a little room.
Arrived this morning. The oldest has waited 2 days.
Arrived this morning. The oldest has waited 2 days.
/stockFilters always visible, a full table, and detail in the right panel so the table keeps its scroll position.
9 titles below their reorder level. 31 copies on order.
| Title | Section | Supplier | In stock | On order |
|---|---|---|---|---|
| The Overstory | Fiction | Northbook | 0 | 2 |
| Piranesi | Fiction | Northbook | 1 | 3 |
| Braiding Sweetgrass | Nature | Riverside | 1 | 4 |
| The Wild Silence | Nature | Riverside | 0 | 2 |
| A Little Life | Fiction | Northbook | 2 | 0 |
| Entangled Life | Science | Riverside | 1 | 5 |
/orders/1042/fillA full-screen task with the tabs hidden. Three steps, one decision each, and nothing is sent until the last.
The Overstory, paperback. One copy arrived today from Northbook.
If this is the wrong edition, reorder before you reserve it.
ReorderA. Reyes asked to hear by text.
Warm paper, ruled lists instead of cards, one indigo for actions, and every order drawn as a trail.
Every text colour passes WCAG AA on white (checked by the generator). Status is always carried by words and shape as well as colour.
| Token | Used for | On white | |
|---|---|---|---|
| Ink #1E2230 | Text, totals rule, finished steps | 15.8 : 1 | |
| Muted #565C6E | Secondary text, captions | 6.7 : 1 | |
| Indigo #2F3E8F | Primary actions, links, current step | 9.5 : 1 | |
| Indigo tint #E6E9F5 | Selected row, current nav item | fill only | |
| Paper #F5F4EF | Navigation, sheets behind content | fill only | |
| Rule #D8DAE0 | Row dividers; input borders use Muted | line only | |
| Amber #8A4B00 | Low stock, waiting too long | 6.8 : 1 | |
| Red #A1262B | Errors and destructive actions only | 7.4 : 1 |
Stock levels are never green and red. Low stock is a word ("Low") and an amber tag, never colour alone.
The one signature element. It appears on Today and on every order, full width on laptop and as a compact strip on phone.
| Date | Title | Customer | Status |
|---|---|---|---|
| 8 Oct | The Overstory | A. Reyes | Ready |
| 7 Oct | Braiding Sweetgrass | L. Chen | Ordered |
/The same structure as the wireframe, now with the indigo action colour, serif headings and the order trail.
Arrived this morning from Northbook. The oldest has waited 2 days.
Week starts Monday. Sales include the online shop.
| Date | Title | Customer | Status |
|---|---|---|---|
| 8 Oct | The Overstory | A. Reyes | Ready |
| 8 Oct | Piranesi | M. Okafor | Ready |
| 7 Oct | Braiding Sweetgrass | L. Chen | Ordered |
| 6 Oct | Entangled Life | P. Novak | Ordered |
/stock · /orders/:id/fillLists group by section under serif headings. The final step of a task always restates what will happen before anything is sent.
5 titles. 7 copies on order.
This is what A. Reyes will receive.
If they do not collect by 15 Oct, Bindery reminds you, not them.