Screens
Each screen has a full spec in the repo under docs/design/screens/ — purpose, layout, content, states, interactions, micro-animations. This page is just an index; the specs themselves live there so they stay in sync with what’s actually built. See the Screen Map for the visual flow diagram.
| # | Screen | File | Role | Design | What it’s for |
|---|---|---|---|---|---|
| 00 | Login | screens/00-login.md |
Both | Open ↗ | Two separate role logins — shipowner or insurer, no password |
| 01 | Shipowner Dashboard | screens/01-shipowner-dashboard.md |
Shipowner | Open ↗ | Incident list, entry point to report one, sees status updates |
| 02 | Create Incident | screens/02-create-incident.md |
Shipowner | Open ↗ | Report form with a real (in-memory) evidence file upload |
| 03 | Insurer Inbox | screens/03-insurer-inbox.md |
Insurer | Open ↗ | Incoming incidents needing review |
| 04 | Incident Workspace | screens/04-incident-workspace.md |
Both | Open ↗ | The demo’s hero screen — a shared, tabbed workspace: evidence, AI-generated assessment with law citations, claim pack / approval, clarifications |
| 05 | Instructions | screens/05-instructions.md |
Shipowner | Open ↗ | A fifth tab inside the Incident Workspace, appearing once the insurer approves — closes the demo loop |
Screens 04 and 05 are not separate top-level pages — they’re tabs inside one shared incident workspace, per a restructuring done after a walkthrough of the client’s live meridian.viamo.no demo. See docs/design/product-context.md (“What we adopted from the live viamo.no demo”) for why.
About the “Design” links
Section titled “About the “Design” links”Those open the real, self-contained Claude Design canvas for that screen — not a hand-made copy. Each one is a static HTML file (~2.5MB, everything inlined — no CDN calls, no backend, verified by inspecting its network requests) copied byte-for-byte from docs/design/<name>/meridian-<name>.html in the repo into this site’s public/designs/ at build time, by scripts/copy-design-canvases.mjs. Nothing here is hand-authored: that script is the only committed artifact, public/designs/ itself is gitignored, and every build re-copies fresh from the repo — so this page can’t drift from the source the way a manually pasted screenshot or markup copy could.
Two things worth knowing before you click:
- First paint: the canvas viewer sometimes opens zoomed to a spot where the artboard isn’t in view. Click Fit/Fill (top-left of the toolbar) once if the page looks blank.
- Currency: these reflect whatever was last saved in Claude Design (Login, Create Incident, Shipowner Dashboard) or last regenerated from source (Insurer Inbox, Incident Workspace, Instructions — their
.dc.htmlsources are plain static HTML with no template bindings, so they’re safe to hand-edit directly and their compiled snapshots get regenerated to match; seedocs/design/README.md, “A note on stale canvases”). All six are current as of their last source edit. The Screen Map canvas is the one exception left — its source (canvas/Main.dc.html) was hand-edited without a matching regeneration, so its compiled snapshot is stale; that’s why it’s served from the separately hand-maintained Screen Map page instead of this copy mechanism. When in doubt, the.mdspec is the source of truth, not the canvas.