Sales Presentation Redesign — Roman + Claude track

Goal

Design the buyer-facing offplan.online sales-presentation flow from scratch in the bundle's actual visual language, implementing the IA from Nadezhda's 2026-05-08 feedback + the audit's to-fix list.

Inputs (canonical)

1. os/design-system/bundle/ — design system tokens + brandbook + preview HTMLs
2. os/docs/research/client-feedback-nadezhda-2026-05-08.md — IA direction
3. os/docs/audit/SUMMARY.md — what's broken in the live product, to fix
4. The 32 PNGs in Roman's Dropbox — IA + module reference, NOT visual reference

Inputs (NOT canonical — explicitly skipped)

• os/docs/mockups/sales-app-atelier.html and the rest of docs/mockups/ — Sergei's track, Roman not happy with direction
• docs/rendered/launch-plan-stage-1.html chunks — historical context only

Out of scope

• Admin panel
• Broker auth, Microsoft SSO, CRM backend wiring (CRM = stubbed POST contract)
• Marketing site / landing pages
• i18n / localisation logic (currency + units toggle is in scope as UI; full multi-language is not)
• Mobile (1920×1080 desktop first; mobile a follow-on)

IA & screens (working draft)

01. Welcome / intro reel        (optional, skippable, NOT a forced gate)
02. Exterior / Project Hub      ← 360° spherical with POI hotspots (in/out)
03. Lobby / Communal walkthrough (360° node)
04. Amenities or Location       (per-project — one or both)
05. Floorplate-first Selection  ← filter by type/aspect/beds/budget → layout set
06. Layout detail               ← which floors carry it, view, price band
07. Unit detail                 ← view from window, finishes, save-to-profile heart
08. Buyer Profile capture modal ← name/email/phone, drives session filtering
09. Saved units / offer summary ← end-of-session, generates offer (PDF later)
10. Persistent buyer-profile chip (top-right) — appears across all screens

Visual register (locked)

• Skeleton White for marketing-leaning surfaces (Welcome, Exterior hero, Amenities).
• Warm Stone for product-leaning surfaces (Floorplate selection table, Saved units).
• Helvetica Neue display weight 200/300, Inter body, JetBrains Mono for IDs/prices/timestamps.
• Status: oxidised — --status-available #5C7A4A, --status-reserved #B58440, --status-sold #8A4438. Anonymisable per project (config).
• Atmosphere gradient as backdrop only — never as a button fill.
• House accent: moss #6A7061. Per-project accent override via [data-project="<slug>"].

Working directory layout

os/design-system/sales/
  index.html              ← navigates between all screens
  _shell.css              ← copied from bundle
  _components.css         ← copied from bundle
  colors_and_type.css     ← copied from bundle (canonical tokens)
  assets/                 ← copied from bundle (icons, wordmark, imagery, floorplans)
  01-welcome.html
  02-exterior.html
  03-lobby.html
  04-location.html
  05-floorplate-selection.html
  06-layout-detail.html
  07-unit-detail.html
  08-buyer-profile-modal.html  (or inline on 07)
  09-saved-units.html
  CRM-CONTRACT.md         ← POST event spec for backend wiring later
  README.md               ← which screen is what + design rationale

Working order

First batch (this session if possible):

1. Set up working dir — copy bundle into os/design-system/sales/, create index.html shell
2. Draft 02 Exterior / Project Hub as the anchor screen — sets the visual register, demonstrates the 360°+hotspots+buyer-profile-chip combo
3. Roman reacts → revise

Second batch:

1. 05 Floorplate Selection — the second IA-defining screen
2. 07 Unit Detail — closes the buyer journey

Third batch:

1. The supporting screens — Welcome, Lobby, Location/Amenities, Saved units, Buyer profile modal
2. CRM contract spec
3. README + index navigation

How we work

• One screen at a time. Roman reacts, I revise, then next.
• HTML/CSS in os/design-system/sales/ — opens in any browser.
• Figma frames via MCP once Roman authenticates /mcp figma — until then, HTML-only.
• No /build ceremony per screen — just edit and reload. /handoff at end of each meaningful working session.

Open questions (parked, not blocking)

• Currency / units toggle UX — small chip in chrome? In buyer profile prefs only?
• Anonymisable status visibility — global toggle vs per-project config?
• Per-project vs offplan.online house brand — when does the project accent kick in vs stay neutral?
• 360° asset format — Pannellum or alternative? Bundle doesn't take a position; will pick when wiring 02.
• Welcome screen optionality — Nadezhda hates forced gates; is Welcome opt-in or default-on with skip-easy?