/ README.md
README.md
1 # Handoff: Strata⁄Fleet — Brutalist Starship Procurement & Operations Suite 2 3 ## Overview 4 5 Strata⁄Fleet is a futuristic e-commerce + operations platform for trading, 6 commissioning, and operating starships at scale (an "Amazon for starships" with 7 a Coalition-grade naval-yard bureaucratic aesthetic). The proto covers the full 8 hull life-cycle across **16 forms + 16 onboarding artboards** organized into 5 9 phases: 10 11 | Phase | Forms | Pages | 12 |--------------------------------------|-------|----------------------------------------------------------------| 13 | **Onboarding** (enrol & sign on) | 5 | Welcome Mat · Buyer · Broker · Fleet Operator · Yard Inspector | 14 | **Acquisition** (discover & bind) | 6 | Index · Catalog · Dossier · Sale-Room · Dispatch | 15 | **Settlement** (pay & receive) | 3 | Manifest · Remittance · Receipt | 16 | **Commissioning** (certify & induct) | 3 | Punch-List · Service · Induction | 17 | **Operations** (fly & coordinate) | 4 | Commodore Bridge · Debrief · Wireless · Rolodex | 18 | **System** | 1 | Cover Sheet | 19 20 ## About the Design Files 21 22 The files in this bundle are **design references created in HTML/React 23 (Babel-in-browser)** — prototypes showing the intended look and behavior, not 24 production code to copy directly. The task is to **recreate these HTML designs 25 in the target codebase's existing environment** (e.g. Next.js + TypeScript, 26 Remix, Vite + React, etc.) using its established patterns, component libraries, 27 and styling approach — or, if no environment exists yet, to choose the most 28 appropriate modern React framework (recommended: **Next.js 14+ App Router with 29 TypeScript, Tailwind CSS, shadcn/ui**) and implement the designs there. 30 31 Do not simply embed the HTML files or copy `<script type="text/babel">` tags 32 into the target app. Re-implement each page as first-class components in the 33 target framework. 34 35 ## Fidelity 36 37 **High-fidelity.** Final colors, typography, spacing, micro-copy, component 38 structure, and interaction patterns are all intentional. Recreate 39 pixel-perfectly where feasible. 40 41 Known proto-level shortcuts to resolve during implementation: 42 - Ship visuals are procedurally-generated SVG silhouettes (`ShipSilhouette` in 43 `concepts/ship-data.jsx`) — replace with real 3D renders or commissioned 44 illustrations 45 - All data (ships, lots, bids, messages, fleet status) is procedurally faked via 46 a seeded generator — replace with a real API + data model 47 - Layout is fixed 1280px wide — responsive behavior is unspecified and must be 48 designed (see Responsive below) 49 50 ## Core Brand / Voice 51 52 The suite commits to one voice: **naval-yard formality × editorial broadsheet × 53 handwritten sign-off**. Every screen reads like a document a harbormaster could 54 file. Copy conventions: 55 - Forms are numbered (`FORM 47 · YARD WORK ORDER · WO-2396-08812`) 56 - Stardates in `2396.118.0841Z` format 57 - Serial numbers in `MFG-CLS-NNNN-XX` format (e.g. `KRV-IC-2849-AX`) 58 - Currency is `₵` (credits), expressed in thousands/millions (`₵18.65M`, `₵44.80k`) 59 - Sections are Greek-lettered (`§ α`, `§ β`) or §-numbered 60 - Rubber stamps for status (`CLEARED`, `BONDED`, `NOTARIZED`, `FLAGGED`, `IN WORK`) 61 - Handwritten signatures and pilot quotes use Caveat 62 63 ## Design Tokens 64 65 ### Color palette 66 ```css 67 --br-paper: #ece7dc; /* primary background — "letter paper" */ 68 --br-paper2: #e3ddce; /* alt background — "slip" / zebra rows */ 69 --br-ink: #1a1612; /* primary text, borders, "ink" */ 70 --br-ink2: #3a332a; /* secondary text — body copy */ 71 --br-mute: #7a756a; /* tertiary text — metadata, labels */ 72 --br-rust: #c2421a; /* accent — high-priority, buyer-side, alerts */ 73 --br-green: #2d6b3a; /* "forge green" — cleared, ok, passed */ 74 --br-amber: #c78f1a; /* warnings, conditional states */ 75 ``` 76 77 ### Typography 78 | Role | Family | Usage | 79 |---------|--------------------------------------------------|-------------------------------------------| 80 | Display | **Oswald** 900, tracked -1 to -3 | Page titles, masthead, large numerics | 81 | Data | **IBM Plex Mono** 400–500, LS 1.5–2 | Labels, metadata, tables, serials, prices | 82 | Body | **IBM Plex Sans** 400, 13–16px, 1.55 line-height | Prose, narratives, descriptions | 83 | Hand | **Caveat** 500/700, 18–36px | Signatures, pilot logs, quick notes | 84 | Support | **Space Grotesk** | Sparingly — fallback sans | 85 86 Google Fonts import: `IBM+Plex+Mono` + `IBM+Plex+Sans` + 87 `Oswald:wght@300..900` + `Caveat:wght@500;700` + `Space+Grotesk:wght@400..700` 88 89 ### Spacing / structure 90 - Page frame: 1280px wide, white margin around paper 91 - Section gutters: 30–40px horizontal padding 92 - Section heads: 18–22px Oswald 700, preceded by small `§ NN` numbering and followed by a rule 93 - Borders: `1px solid`, `2px solid`, `4px double` — no rounded corners anywhere 94 - Dotted dividers: `1px dotted rgba(26,22,18,0.27)` 95 - No drop shadows on components (only on the artboard-on-grey view) 96 - No rounded corners anywhere except status dots (`border-radius: 50%`) 97 98 ### Iconography 99 **No decorative icons.** The design avoids modern UI iconography in favor of 100 typographic markers: bullets (`·`, `◆`, `●`, `◯`, `▸`, `▼`), Unicode geometric 101 shapes, ASCII diagrams, and rubber-stamp graphics. Navigation chevrons are `▸` 102 and `◂`. 103 104 ## Recurring Components 105 106 Extract these as first-class library components (`packages/ui/brutalist/*`): 107 108 | Component | Purpose | 109 |------------------|-----------------------------------------------------------------------------------------| 110 | `BRPage` | Letter-paper frame, margin, page-number footer | 111 | `BRNav` | Masthead — brand · stardate · cart count · section nav | 112 | `BRFooter` | 5-column register — legal / channels / imprint / colophon | 113 | `BRH` | Section heading with §-number prefix and horizontal rule | 114 | `BRSpec` | Monospaced `key · · · value · unit` row | 115 | `BRChip` | Pill tag — `default` / `ok` (green) / `rust` variants | 116 | `BRStamp` | Angled rubber-stamp box with double border | 117 | `MiniBar` | Small progress bar for fuel/hull/etc. | 118 | `StatusChip` | Colored pill for enum states (`READY` / `DRY-DOCK` / `TRANSIT` / `STANDBY` / `FLAGGED`) | 119 | `ShipSilhouette` | (Placeholder) SVG hull from serial seed — to be replaced | 120 121 All are in `brutalist/br-tokens.jsx`. 122 123 ## Screens / Views 124 125 ### Onboarding suite — Forms 01 · 03 · 05 · 07 · 09 126 127 The front of the funnel. Every account in the Register enters via one of four 128 **"doors"** — Buyer, Broker, Fleet Operator, Yard Inspector — each with its own 129 3-page dossier, its own bond or pledge, and its own signed compact. The Welcome 130 Mat routes visitors; the four role flows share structure but differ in voice: 131 Buyer/Broker flows are formally bureaucratic (Coalition KYC), Fleet 132 Operator/Inspector flows are warmer and trade-manual in tone (Registrar 133 preamble, yardmaster's letter, handwritten Caveat margin notes from working 134 Commodores and old hands). 135 136 **Shared structure across all four role dossiers:** 137 - Three-page stepper (IN HAND / SIGNED / PENDING stamped per step) 138 - Header with Form § number, Oswald 62px title, and a short plain-language preamble 139 - Left column: the declarations themselves (identity, mandate, inventory, instruments) 140 - Right column: ID-plate / standing / margin note / CTA to next page 141 - Final page ends with a double-bordered signed compact, three signatories (Caveat), stardate-stamped 142 143 #### ⓞ Welcome Mat — Form 01 (`brutalist/br-onb-entry.jsx`) 144 Full-bleed Oswald masthead ("THE REGISTER."), four role "doors" as outlined 145 cards, year-of-charter tally, Sign-On window (Form 02), anonymous-browse notice 146 (Form 99 — open/sealed matrix), and a first-session "Clean Ledger" empty state 147 (Form 99.01). 148 - **Purpose:** landing, role routing, auth entry 149 - **Artboards:** `OnbWelcome` · `OnbSignOn` · `OnbAnon` · `OnbEmpty` 150 151 #### ⓘ Buyer — Form 03 (`brutalist/br-onb-buyer.jsx`) 152 Buyer's Dossier (formal bureaucratic voice). 153 - Page 1 — **Identity & Bond:** Coalition ID fields, posted bond particulars, declared purpose of trade, attachments panel. 154 - Page 2 — **Trading Mandate:** classes of hull authorised, annual/single-lot ceilings, pace of trade, forbidden sectors. 155 - Page 3 — **Oath of Trade:** signed compact (Buyer · Registrar · Bursar), BONDED/NOTARIZED stamps. 156 - **Artboards:** `OnbBuyer1` · `OnbBuyer2` · `OnbBuyer3` 157 158 #### ⓙ Broker — Form 05 (`brutalist/br-onb-broker.jsx`) 159 Broker's accreditation (formal bureaucratic voice). 160 - Page 1 — **Accreditation & Bond:** licence grade, guild standing, bond particulars. 161 - Page 2 — **Book & Mandate:** commission bands, classes of trade authorised, clients on the book. 162 - Page 3 — **Oath of Fair Dealing:** signed by broker, guild master, registrar. 163 - **Artboards:** `OnbBroker1` · `OnbBroker2` · `OnbBroker3` 164 165 #### ⓚ Fleet Operator — Form 07 (`brutalist/br-onb-fleet.jsx`) 166 Operator's Charter (**warmer, trade-manual voice**). 167 - Page 1 — **Enrolment:** house, flag, sectors, plus a handwritten Registrar preamble ("Welcome aboard. — VLK-2") and a Commodore margin note. 168 - Page 2 — **Fleet Declaration:** hulls under flag (table with state chips), pilots in the house, declared cargoes. 169 - Page 3 — **Operations Compact:** signed undertakings ("So undertaken, so signed, so flown."), Commodore / Registrar / Bursar signatures. 170 - **Artboards:** `OnbFleet1` · `OnbFleet2` · `OnbFleet3` 171 172 #### ⓛ Yard Inspector — Form 09 (`brutalist/br-onb-inspector.jsx`) 173 Inspector's Apprenticeship (**warmer, apprentice-manual voice**). 174 - Page 1 — **Apprenticeship:** apprentice particulars, master yardmaster's handwritten letter, curriculum served, hulls touched in apprenticeship. 175 - Page 2 — **Instruments & Calibration:** kit table with calibration states, rolling-year calibration record bar chart, sectors/yards under warrant. 176 - Page 3 — **Pledge of Honest Work:** the "I will not sign what I have not seen" pledge, fee schedule, signed by apprentice / yardmaster / guild clerk. 177 - **Artboards:** `OnbInsp1` · `OnbInsp2` · `OnbInsp3` 178 179 ### ⓪ Cover Sheet — Form 00 (`brutalist/br-cover.jsx`) 180 Master index. Supermast Oswald title ("The Register."), four color-coded phase bands indexing all 15 forms with page #, form #, title, purpose, route. Design-system swatch grid, recurring-components register, status grammar, filing-order strip with notary signature + ledger block. 181 - **Purpose:** navigation + brand/system overview 182 - **Real app mapping:** marketing-site homepage or internal sitemap/storybook landing 183 184 ### ① Index — Homepage (`brutalist/br-home.jsx`) 185 Broadsheet masthead with editorial headline ("Fourteen thousand hulls. One unbroken ledger."), desk quick-find lookup, Lot of the Week, class index tiles, market indices, desk dispatches, recent lots, manufacturer register. 186 - **Purpose:** marketing + top-of-funnel discovery 187 - **Data:** featured lots, market indices, recent listings, manufacturer directory, dispatch/news feed 188 189 ### ② Catalog — Search & Listings (`brutalist/br-catalog.jsx`) 190 Faceted search. Left rail: class, forge, drive, price histogram, availability facets. Main: sortable table view with silhouette plates; grid view toggle. Newspaper-style pagination. 191 - **Purpose:** browse/filter/search inventory 192 - **Data:** paginated ship listings with facet counts 193 194 ### ③ Dossier — Product page (`brutalist/br-product.jsx`) 195 Full spec sheet. Hero silhouette, three loadout configs (Standard / Tactical / Courier) that re-price the unit, provenance ledger (timeline of owners/service), comparable-lot cross-sell, add-to-manifest CTA. 196 - **Purpose:** inspect + configure + buy 197 - **Data:** single ship + variants, historical events, similar ships 198 199 ### ④ Sale-Room — Auction (`brutalist/br-auction.jsx`) 200 Live bidding room. Big lot on the block with silhouette + provenance paragraph, live bid ledger (user's bid highlighted in rust), high-bid panel, quick-raise buttons (+100k/+250k/+500k) + proxy-max, up-next lot cards, paddle display. 201 - **Purpose:** real-time bidding 202 - **Data:** current lot, live bid stream, upcoming lots, user paddle 203 - **Real-time:** WebSocket for bid ticker 204 205 ### ⑤ Dispatch — Broker comms (`brutalist/br-broker.jsx`) 206 Encrypted buyer↔broker correspondence. Parties column with status dots, attachments bar, left-rust-bordered buyer messages vs. ink-bordered broker messages with inline attachments + stamps, composer with Q-key banner, deal-state audit trail. 207 - **Purpose:** brokered negotiation 208 - **Data:** thread, messages, attachments, deal stage 209 210 ### ⑥ Manifest — Cart (`brutalist/br-cart.jsx`) 211 Bill of lading. Line items as a formal table (serial · plate · config · unit · line), consignment instructions, rider services (insurance, transit, re-code), reckoning column with total + promo. 212 - **Purpose:** review & modify order 213 214 ### ⑦ Remittance — Checkout (`brutalist/br-pay.jsx`) 215 Form 9A payment. Stepper (Manifest → Remittance → Receipt), consignee particulars, four remittance methods (escrow / credit / bullion / lease), bonded instrument fields, handwritten signatory, receipt summary column, binding §412 warning. 216 - **Purpose:** payment collection 217 - **Integrations:** payment gateway, escrow provider, KYC 218 219 ### ⑧ Receipt — Post-purchase (`brutalist/br-receipt.jsx`) 220 Form 14 delivery confirmation. CLEARED/NOTARIZED rubber stamps, 6-step delivery timeline, owned-hulls panel with new transponder codes, pre-handoff checklist, ASCII route-to-hangar map, ledger entry column with notary signature. 221 - **Purpose:** order confirmation + handoff prep 222 223 ### ⑨ Punch-List — Yard inspector (`brutalist/br-punchlist.jsx`) 224 Form 71, 80-point certification. Summary strip (total/pass/flag/fail), ship diagram with numbered hit-points color-coded by result, hatched defect-photo gallery, 32-row line-item table, re-inspection trigger checklist, dual-signature verdict. 225 - **Purpose:** yard-side QA 226 227 ### ⑩ Service — Yard work order (`brutalist/br-service.jsx`) 228 Form 47. Hull strip + foreman metadata, handwritten pilot complaint, **dark-mode** diagnostic terminal output, parts requisition table, labor log, reckoning column with warranty credits, foreman sign-off. 229 - **Purpose:** maintenance/repair workflow 230 231 ### ⑪ Induction — Pilot onboarding (`brutalist/br-onboard.jsx`) 232 Form 31, 6-step stepper (Identity → Biometrics → License → Drill → Familiarization → Oath). Left-rail pilot card with hatched portrait placeholder and thumbprint block, main form varies per step, right-rail hull assignment + signatories with handwritten sigs. Stamped PROVISIONAL. 233 - **Purpose:** KYC + pilot certification 234 235 ### ⑫ Commodore Bridge — Fleet view (`brutalist/br-fleet.jsx`) 236 Form 22 operations dashboard. KPI strip, full fleet register with silhouettes / fuel / hull bars / status chips, SVG sector disposition map with hulls pinned around Ceres-II, flag-orders queue, pilot roster, quick-order buttons. 237 - **Purpose:** fleet operations overview 238 239 ### ⑬ Debrief — Post-flight AAR (`brutalist/br-debrief.jsx`) 240 Form 58. Mission narrative, SVG flight-track map with waypoints, telemetry sparklines (fuel, velocity, g-load, heat), severity-chipped event log, AAR grid (what worked / didn't / carry forward / recognition). 241 - **Purpose:** post-mission review 242 243 ### ⑭ Wireless — Fleet comms (`brutalist/br-comms.jsx`) 244 Form 33 radio. Channel list with per-channel encryption chips, **dark-mode** transmission log with color-coded channel tags, RX/TX waveform scopes, big rust `KEY UP` button, compose pane, emergency-band cards, on-the-net roster, Q-key status. 245 - **Purpose:** real-time fleet chat 246 - **Real-time:** WebSocket or push channels 247 248 ### ⑮ Rolodex — Contact-book (`brutalist/br-contacts.jsx`) 249 Form 29. A–Z index + filter chips, 10 contact cards with initials avatars / status dots / tag badges / handwritten-feel notes / call·msg·ledger actions, active-relationship column with deal history + recent activity log. 250 - **Purpose:** CRM / relationship management 251 252 ## Interactions & Behavior 253 254 - **Navigation:** top `BRNav` with inline section links; cart count badge updates live; clicking `BRNav` items triggers `onNav(routeKey)` 255 - **Loadout selection (Dossier):** clicking a config card re-prices the unit; persist selection in component state 256 - **Add-to-manifest:** optimistic append to cart; toast or inline "Added" chip 257 - **Bidding (Sale-Room):** quick-raise buttons pre-fill a raise; big rust `RAISE` button commits; bid ledger scrolls with live updates (WebSocket) 258 - **Thread composer (Dispatch/Comms):** Enter to send, Shift+Enter for newline; attachments via drag-drop or button 259 - **Punch-list diagram:** hit-points are clickable — open detail drawer/modal 260 - **Onboarding stepper:** click any step to jump; "AFFIRM & ADVANCE" validates + advances 261 - **Print:** every page has a "PRINT RECEIPT / DOWNLOAD" button that maps to `window.print()` with a print-optimized stylesheet (remove chrome, reveal margins) 262 263 ### Animation / motion 264 The aesthetic is **static and document-like**. Use motion sparingly: 265 - Fade/slide-up on page enter (200ms ease-out) 266 - Status dot pulse for live/urgent items (2s ease-in-out infinite) 267 - Rubber-stamp: slight rotation hardcoded per-instance; no animation 268 - **Don't** add modern-web microinteractions (springs, bounces) — they fight the brand 269 270 ## State Management 271 272 Recommended split: 273 - **Server state (React Query / tRPC / SWR):** ships, lots, listings, orders, fleet, threads, bids 274 - **Client state (Zustand / Jotai):** cart (persist to localStorage), active ship config, current paddle, onboarding draft 275 - **Real-time (Pusher / Ably / WebSocket):** bid stream (Sale-Room), comms transmissions (Wireless), flag orders (Bridge) 276 277 Persistence keys in the proto (useful for parity during migration): 278 - `br-cart` — cart contents 279 280 ## Data Model (starter) 281 282 ```ts 283 type Ship = { 284 serial: string; // "KRV-IC-2849-AX" 285 model: string; // "IC-2849 Axiom" 286 manufacturer: Manufacturer; 287 class: ShipClass; // Interceptor, Courier, Hauler, Yacht, Dreadnought, Cruiser, Industrial 288 year: number; // 2386 289 mass: number; // kilotonnes 290 jump: number; // light-years 291 drive: string; // "K-7 Q-drive" 292 hullPct: number; // 0..1 293 price: number; // credits 294 hardpointTier: 1 | 2 | 3; 295 status: 'LISTED' | 'SOLD' | 'BONDED' | 'AUCTION'; 296 provenance: ProvenanceEvent[]; 297 }; 298 299 type Lot = { ship: Ship; reserve: number; estimate: [number, number]; consignor: string; }; 300 type Bid = { paddle: string; bidder: string; amount: number; timestamp: string; }; 301 type Order = { lineItems: { ship: Ship; config: 'STANDARD'|'TACTICAL'|'COURIER'; price: number }[]; subtotal: number; fees: number; total: number; }; 302 type Pilot = { id: string; name: string; tier: 1|2|3; ratings: string[]; hours: number; }; 303 type Inspection = { hullSerial: string; inspector: string; items: InspectionItem[]; verdict: 'PASS'|'CONDITIONAL'|'FAIL'; }; 304 type Thread = { id: string; subject: string; parties: Party[]; messages: Message[]; dealStage: DealStage; }; 305 ``` 306 307 ## Responsive 308 309 The proto is **desktop-only, 1280px fixed**. Mobile is an open design problem. Recommendations: 310 - **Dossier, Sale-Room, Wireless, Bridge** — keep desktop-first; mobile gets a simplified single-column 311 - **Index, Catalog, Manifest, Receipt** — design mobile-first follow-ups (the broadsheet scales down poorly; consider a "card-stack" mobile treatment) 312 - Break down multi-column forms into vertical steppers on <768px 313 - Tables collapse to card-per-row 314 - `Oswald 152px` titles scale to `clamp(48px, 12vw, 152px)` 315 316 ## Accessibility Gaps to Address 317 318 - Many mono labels are 9–10px with 2–3 letter-spacing — boost to 11px minimum for body 319 - `BR.mute` (#7a756a) on `BR.paper` (#ece7dc) is borderline WCAG AA — restrict to metadata, never primary copy 320 - Rubber stamps rely on color — add text patterns (diagonal stripes for flagged, solid for cleared) 321 - Handwritten signatures need `aria-label` with the typed name 322 - Keyboard: every `div`-as-button in the proto must become a proper `<button>` with focus rings (proto hides them — restore them) 323 - Screen-reader pass needed on all tables, timelines, and the onboarding stepper 324 325 ## Integrations 326 327 | Surface | Integration | 328 |---|---| 329 | Payment (Remittance) | Stripe / Adyen + optional escrow (e.g. Escrow.com API) | 330 | KYC (Induction) | Persona / Onfido for biometrics + license verification | 331 | Real-time (Sale-Room, Wireless) | Pusher / Ably / Pusher Channels / raw WebSocket | 332 | Ship imagery | S3/CDN; later Three.js for interactive 3D in Dossier | 333 | Maps (Bridge, Receipt) | Custom SVG; later canvas/WebGL for sector disposition | 334 | Analytics | PostHog / Mixpanel — track Dossier→Manifest conversion, Sale-Room engagement, Bridge session length | 335 | Search (Catalog) | Typesense / Algolia / Meilisearch | 336 337 ## Files in This Bundle 338 339 ### Screenshots (`screenshots/`) 340 341 A PNG thumbnail per page — use these as visual reference while implementing. Each is the full page scaled to fit ~924px wide; for pixel-exact detail, run the HTML prototypes (below) and inspect live. 342 343 **Pages (filing order):** 344 - `00-cover.png` · `01-home.png` · `02-catalog.png` · `03-dossier.png` 345 - `04-auction.png` · `05-dispatch.png` · `06-manifest.png` · `07-remittance.png` · `08-receipt.png` 346 - `09-punchlist.png` · `10-service.png` · `11-induction.png` 347 - `12-bridge.png` · `13-debrief.png` · `14-wireless.png` · `15-rolodex.png` 348 349 **Ship-detail concept explorations** (pre-decision, kept for reference): 350 - `concept1-tactical.png` — Orbital Tactical HUD 351 - `concept2-brutalist.png` — Brutalist Spec Sheet *(chosen direction → became the full suite)* 352 - `concept3-holowire.png` — Holo Wireframe Turntable 353 - `concept4-reticle.png` — Radar Reticle Dealer 354 - `concept5-terminal.png` — Data-dense Terminal Grid 355 356 ### Design system + shared utilities 357 - `brutalist/br-tokens.jsx` — design tokens, shared primitives (`BRNav`, `BRFooter`, `BRH`, `BRSpec`, `BRChip`, `BRStamp`, `BRPage`, helpers) 358 - `concepts/ship-data.jsx` — procedural ship generator + `ShipSilhouette` SVG component (placeholder; to be replaced) 359 360 ### One page per file (`brutalist/*.jsx`) 361 - `br-cover.jsx` — ⓪ Cover Sheet 362 - `br-home.jsx` — ① Index 363 - `br-catalog.jsx` — ② Catalog 364 - `br-product.jsx` — ③ Dossier 365 - `br-auction.jsx` — ④ Sale-Room 366 - `br-broker.jsx` — ⑤ Dispatch 367 - `br-cart.jsx` — ⑥ Manifest 368 - `br-pay.jsx` — ⑦ Remittance 369 - `br-receipt.jsx` — ⑧ Receipt 370 - `br-punchlist.jsx` — ⑨ Punch-List 371 - `br-service.jsx` — ⑩ Service 372 - `br-onboard.jsx` — ⑪ Induction 373 - `br-fleet.jsx` — ⑫ Commodore Bridge 374 - `br-debrief.jsx` — ⑬ Debrief 375 - `br-comms.jsx` — ⑭ Wireless 376 - `br-contacts.jsx` — ⑮ Rolodex 377 378 ### Onboarding (`brutalist/br-onb-*.jsx`) 379 - `br-onb-entry.jsx` — Welcome Mat, Sign On, Browse Unbonded, Clean Ledger (Forms 01 · 02 · 99) 380 - `br-onb-buyer.jsx` — Buyer's Dossier, 3 pages (Form 03) 381 - `br-onb-broker.jsx` — Broker accreditation, 3 pages (Form 05) 382 - `br-onb-fleet.jsx` — Fleet Operator's Charter, 3 pages (Form 07) 383 - `br-onb-inspector.jsx` — Yard Inspector's Apprenticeship, 3 pages (Form 09) 384 - `br-onb-shared.jsx` — alternate splash/signup/verify/welcome-certificate artboards (reference; not wired into canvas) 385 386 ### Canvas wrappers (reference only) 387 - `Brutalist Funnel.html` — reviews all pages side-by-side on a pan/zoom canvas 388 - `Print Edition.html` — stacked print-friendly layout (Cmd+P → Save PDF) 389 - `brutalist-app.jsx`, `design-canvas.jsx` — not needed in production 390 391 ## Implementation Checklist 392 393 **Phase 1 — Foundations (1–2 sprints)** 394 - [ ] Set up Next.js + TypeScript + Tailwind + shadcn/ui (or chosen framework) 395 - [ ] Import Google Fonts (Oswald / IBM Plex Sans / IBM Plex Mono / Caveat) 396 - [ ] Define Tailwind theme with the token palette above 397 - [ ] Build `@strata/ui` component library: `BRPage`, `BRNav`, `BRFooter`, `BRH`, `BRSpec`, `BRChip`, `BRStamp`, `MiniBar`, `StatusChip` 398 - [ ] Set up Storybook with all primitives documented 399 - [ ] Define database schema (Ship, Lot, Order, Pilot, Thread, Inspection, Bid, Account/Role) 400 401 **Phase 1.5 — Onboarding & Auth (2 sprints)** 402 - [ ] Welcome Mat + role router (Form 01) 403 - [ ] Sign On + session (Form 02) 404 - [ ] Buyer dossier (Form 03) — KYC + bond posting 405 - [ ] Broker accreditation (Form 05) — licence + guild check + bond 406 - [ ] Fleet Operator charter (Form 07) — house enrolment, fleet declaration 407 - [ ] Yard Inspector apprenticeship (Form 09) — credential + pledge + instrument calibration record 408 - [ ] Anonymous browse mode (Form 99) — gating rules on bid/cart/dossier-sealed-pages 409 410 **Phase 2 — Browse→Buy MVP (3–4 sprints)** 411 - [ ] Index (Home) 412 - [ ] Catalog with facets + pagination 413 - [ ] Dossier with config selection 414 - [ ] Manifest (Cart) 415 - [ ] Remittance (checkout) with real payment 416 - [ ] Receipt 417 418 **Phase 3 — Operations (2–3 sprints)** 419 - [ ] Commodore Bridge 420 - [ ] Debrief 421 - [ ] Wireless (real-time) 422 423 **Phase 4 — Brokerage & Compliance (2–3 sprints)** 424 - [ ] Sale-Room (real-time auction) 425 - [ ] Dispatch (broker threads) 426 - [ ] Induction (KYC/pilot onboarding) 427 - [ ] Punch-List (inspector tool) 428 - [ ] Service (maintenance tickets) 429 - [ ] Rolodex (CRM) 430 431 ## Design Opportunities Post-Handoff 432 433 - **3D hull viewer** in Dossier (Three.js) — replace SVG silhouette 434 - **Real ship imagery** — commission renders per hull class 435 - **Motion system** — page transitions that feel like turning pages in a bound ledger 436 - **Dark mode** — the Service and Wireless pages already hint at it; extend across the suite as "Night Bridge" theme 437 - **Print templates** — every form has a natural "official document" print version; ship a PDF export per form 438 - **Mobile design exploration** — most urgent open design question 439 - **Interactive sector map** — the SVG in Bridge/Receipt is begging to be a live canvas 440 - **Voice** — the editorial copy needs an owner; consider a style guide + per-surface copy doc 441 442 ## Validation Required Before Build 443 444 - User testing: does "naval-yard broadsheet" read as *trustworthy/premium* or *confusing retro-LARP*? (5-second test) 445 - Performance: 1280px fixed + heavy SVG may be slow on mobile; budget for perf from day 1 446 - Legal: §412, bonded escrow, Coalition notary are flavor — replace with real jurisdiction/compliance copy before launch 447 - Competitive check: confirm "brutalist bureaucratic" isn't already owned by a real competitor 448 449 ## Contact / Open Questions 450 451 Bring these to the user before breaking ground: 452 1. Target market (B2C commercial? B2B fleet operators? Government procurement? All three?) 453 2. Fidelity of simulation — is the ship "real" (modeled physics) or narrative-only? 454 3. Monetization — listing fees, % of sale, subscription tiers, premium broker services? 455 4. Branding — is "Strata⁄Fleet" the final brand or a working title? 456 5. Real-time scale — how many concurrent bidders, comms users, bridge dashboards? 457 458 --- 459 460 *Generated from the Strata⁄Fleet proto. 16 HTML/React design references accompany this document.*