Ochre Nocturne

What you are about to see

1. A shopper places an orderThe order, its payment and the stock reservation commit together.
2. Operations ships itEach step is an audited statement; shipping takes the stock off the shelf and writes the ledger.
3. A crew delivers itDispatch gives white-glove orders to a crew and orders the stops; the customer can track the visit, and on-time delivery is measured.
4. The dashboard movesRevenue, the funnel and stock health are queries over the same data.

Try this

Shopper

Fill the bag and check out with the test card, then find the order on your account.

Designer, approved

See trade prices everywhere, with retail beside them.

Operations

Pick, pack and ship the order you just placed; watch the ledger record it.

Marketing

Read the funnel and the best-selling rooms, then open the SQL behind them.

Admin

Change who may do what, switch a feature on for one role, and read the audit log.

How it was made

Five stages, the questions each one answered, and how the work was done. AI made it fast; years of judgement decided what it should be.

1. 01

   Discovery

   Decide what the business is, who uses it, and what success looks like.

   What kind of business proves the most?

   A local home furnishings retailer: real stock, parcel and white-glove delivery, retail shoppers and interior designers, which is the shape of most commerce businesses.

   Who uses it?

   Guests, shoppers and designers in the store; marketing, operations and an admin in the back office. Customers never see the back office.

   What would make a visitor believe it?

   Using it: placing an order and watching it reserve stock, get shipped and move the dashboard, all on one set of data.

   See it: Sign in as any of the six accounts

   The direction

   Asked for a complete, production-grade business rather than a sample, with the products specific to furniture and everything else general.

   What AI produced

   A first map of accounts, screens and data, and a name chosen by a generated process: 30 candidate names scored by five model families, logos for the top five, scored again by five vision models.

   What experience changed

   Mattresses were ruled out, the goods had to be pieces an interior designer would really specify, and the name had to be checked as unused before anything was built on it.

2. 02

   Design

   Make it look like the most current store on the web, and work like the ones people know.

   Cards or a page that holds its content?

   No cards. Content sits on the page with type, space and hairline rules, in an after-dark palette of espresso, cream and brass.

   Where does navigation go?

   Where shoppers expect it: areas across the top, departments down the side, search at the right of the trail so the top bar never wraps.

   How do designers see trade prices?

   By signing in. There is no price toggle; the account decides.

   See it: The store · A product page

   The direction

   Set the bar at the cleanest, most current retail design, then settled the layout one decision at a time.

   What AI produced

   Design directions, navigation layouts and a price toggle on the product page.

   What experience changed

   Cards were rejected for a page that holds the content, the toggle was replaced by account pricing, and search moved so the top bar never wraps.

3. 03

   Build

   Build it as one system on one set of data, in the browser, without wasting the visitor's space.

   Where does the data live in a demo with no server?

   In real Postgres, running in the visitor's browser. Nothing is stored until they sign in or change something, and one button removes it all.

   How do 120 products get photographed and described?

   An image model photographs each piece against one art direction, using its first photograph as the reference for every colourway; three model families draft the copy in one fixed structure, two revise it, and a separate model and a keyword scan check each piece against the product's facts.

   How does an order reach the warehouse?

   Checkout writes the order, reserves stock and records it in the ledger in one statement; operations picks, packs and ships it in the back office.

   See it: Check out with the test card · The orders queue

   The direction

   Required no wasted space on the visitor's device, published prompts never, and every claim in the copy backed by the product's facts.

   What AI produced

   Photographs and copy for the whole catalogue, a seeded database and the store, back office and dashboard on top of it.

   What experience changed

   Colourways that changed a product's shape were regenerated against its first photograph, copy that claimed facts the data did not support was rewritten, and the imagery stayed inside a thirty dollar budget.

4. 04

   Prove

   Show it works with evidence, not adjectives.

   How do we know it cannot oversell?

   A database constraint, and a test that orders more than is on hand and checks that nothing at all was written.

   How do we know the permissions are right?

   A test checks every account against every back-office section, allowed and refused.

   How do we know the tests are any good?

   Every line and branch is run by a test, and each role's journey runs in a browser against the production build.

   See it: The permission matrix · The SQL console

   The direction

   Asked for a fresh review of every part by a reviewer that had not written it, and for every finding to be fixed with a test that failed first.

   What AI produced

   Reviews that found real defects: a bag that looked empty after another tab cleared it, trade prices rounded to whole dollars, flag changes that half-applied.

   What experience changed

   Each finding was graded by what a customer would get, fixed with its test, and the slow tests it exposed were measured and fixed at the cause.

5. 05

   Launch and operate

   Run the business: see how it is doing, change it safely, and keep it fast.

   How does each team see the business?

   A dashboard over eighteen months of orders, with each role's questions first and the SQL behind every chart.

   How do we change it safely?

   Feature flags evaluated per role, an audit log written with every change, and gates that every change must pass before it ships.

   Does it stay fast?

   Start-up is measured on a throttled phone profile; adding the order history was halved when it pushed start-up toward the two-second budget.

   See it: The dashboard · Feature flags

   The direction

   Required every published number to be measured, and slowness treated as a defect.

   What AI produced

   Reports, flags and an audit trail, with measurements of start-up, engine size and test time.

   What experience changed

   When a measurement went the wrong way, the cause was found and fixed rather than the budget raised.

This works for any commerce business

Only the products are furniture. Accounts and roles, pricing by customer, stock that cannot oversell, orders from checkout to delivery, an audit trail and reports that show their SQL are the same in a bakery, a bike shop or a wholesaler.

Measured, not claimed

Start-up on a phone

1.89 to 1.91 s

From the start to a seeded database ready to query, once the engine is downloaded, in a mid-range phone profile with the CPU slowed four times.

Database engine

3.8 MB

Downloaded only on the first sign-in or add to bag; browsing downloads none of it.

Lighthouse performance

99 to 100

On a phone, for this page and the store; accessibility and best practices score 100.

Database on your device

8.4 MB, all of it freed

Nothing is stored until you sign in or change something; one button removes it and shows the space freed.

Imagery

$27.52

Total imagery spend, trials and logos included, inside a thirty dollar budget.

Every measurement, with how it was taken

Every change passes these gates

Types

The build fails on any type error.

Lint at zero warnings

No warning is ever waved through.

No comments, no copies

The code explains itself, and a duplication check fails on any copied block.

Full coverage

Every line and branch is run by a test.

Accessibility

Every page is audited for WCAG 2.2 AA in the light theme and for contrast in the dark theme, with zero violations allowed.

Browser tests

Each role's journey runs against the production build, on desktop and phone.