{
"name": "Handoff",
"slug": "handoff",
"blocks": ["Pages", "Lists", "Sign-in: users", "Actions: pay"],
"persona": "freelancers",
"keywords": [
"client portal",
"app",
"login",
"member sign-in",
"clients",
"files",
"agency",
"designer",
"project updates",
"client files",
"feedback",
"studio",
"members area"
],
"description": "An app template: each client of a freelancer or small studio signs in, reads the project updates assigned to them with a status and a link to the files, and sends new briefs with an attachment. A public page, the member pages under /app and a privacy notice with blanks.",
"audience": [
"freelance designers and developers",
"small studios and agencies"
],
"category": "Client portal",
"job": "member-app",
"categoryId": "client-portal",
"alsoFits": [
"agency client hub",
"project portal",
"files for clients",
"photographer client area"
],
"direction": "Klein blue poster and a cork crit wall: pinned prints, kraft tags and a red dot on approved rounds",
"mood": [
"light",
"calm",
"classic"
],
"fonts": [
"Instrument Serif",
"Instrument Sans"
],
"memberApp": {
"path": "/app",
"setup": {
"signup": "invite",
"profile_fields": [
{
"name": "name",
"type": "text",
"label": "First name"
}
],
"display_field": "name"
},
"lists": [
{
"list": "projects",
"label": "Projects",
"by": "owner",
"fields": [
{
"name": "project",
"type": "text",
"label": "Project",
"required": true
},
{
"name": "phase",
"type": "choice",
"label": "Phase",
"required": true,
"options": [
"Discovery",
"Design",
"Production",
"Launch",
"Care"
]
},
{
"name": "launch",
"type": "date",
"label": "Launch date"
},
{
"name": "next_call",
"type": "date",
"label": "Next call"
},
{
"name": "lead",
"type": "text",
"label": "Your lead at the studio"
},
{
"name": "memo",
"type": "long_text",
"label": "Where it stands"
}
]
},
{
"list": "updates",
"label": "Project updates",
"by": "owner",
"fields": [
{
"name": "date",
"type": "date",
"label": "Date",
"required": true
},
{
"name": "project",
"type": "text",
"label": "Project",
"required": true
},
{
"name": "title",
"type": "text",
"label": "Update",
"required": true
},
{
"name": "stage",
"type": "choice",
"label": "Status",
"required": true,
"options": [
"On track",
"Waiting on you",
"Ready to review",
"Done"
]
},
{
"name": "memo",
"type": "long_text",
"label": "Note"
},
{
"name": "files_link",
"type": "text",
"label": "Link to the files"
}
]
},
{
"list": "reviews",
"label": "Decisions",
"by": "member",
"status_options": [
"Received",
"Changes in progress",
"Done"
],
"reply": true,
"fields": [
{
"name": "title",
"type": "text",
"label": "What you're deciding on",
"required": true
},
{
"name": "round_date",
"type": "text",
"label": "Round posted"
},
{
"name": "decision",
"type": "choice",
"label": "Your decision",
"required": true,
"options": [
"Approve",
"Approve with small changes",
"Ask for a new round",
"Accept the quote",
"Ask about the quote"
]
},
{
"name": "layout",
"type": "choice",
"label": "Which layout",
"options": [
"Layout A",
"Layout B",
"Only one layout"
]
},
{
"name": "notes",
"type": "long_text",
"label": "Your notes"
},
{
"name": "attachment",
"type": "photo",
"label": "A marked-up screenshot or PDF"
}
]
},
{
"list": "briefs",
"label": "Briefs",
"by": "member",
"status_options": [
"Received",
"Quoted",
"Scheduled",
"Done"
],
"reply": true,
"fields": [
{
"name": "title",
"type": "text",
"label": "What do you need?",
"required": true
},
{
"name": "project",
"type": "text",
"label": "Project"
},
{
"name": "due",
"type": "date",
"label": "Needed by"
},
{
"name": "details",
"type": "long_text",
"label": "Details",
"required": true
},
{
"name": "attachment",
"type": "photo",
"label": "Attachment (a PDF or a photo)"
}
]
},
{
"list": "care",
"label": "Care plan log",
"by": "owner",
"fields": [
{
"name": "date",
"type": "date",
"label": "Date",
"required": true
},
{
"name": "task",
"type": "text",
"label": "What we changed",
"required": true
},
{
"name": "hours",
"type": "number",
"label": "Hours",
"required": true
}
]
}
],
"plans": [
{
"plan": "care",
"name": "Care plan",
"paid": true,
"price": {
"amount": 24000,
"currency": "gbp",
"interval": "month"
}
}
],
"demo": {
"member": {
"name": "Nell Hartigan",
"email": "nell.hartigan@example.com",
"profile": {
"name": "Nell"
}
},
"plans": [
"care"
],
"rows": {
"projects": [
{
"phase": "Design",
"launch": "+6w:thu",
"next_call": "+1w:tue",
"lead": "Hana Okoro",
"memo": "Homepage round 2 is with you. Once you pick a layout, Tobi starts building the shop pages with the product photos you sent.",
"_added": "-28d",
"project": "Larkspur Tea Co. website refresh"
},
{
"project": "Gift box packaging",
"phase": "Production",
"launch": "+3w:fri",
"lead": "Hana Okoro",
"memo": "Label proofs are at the printer; the matt sample arrives next week. The A5 flyer quote is waiting for your answer.",
"_added": "-35d"
}
],
"updates": [
{
"date": "-2d",
"project": "Larkspur Tea Co. website refresh",
"title": "Homepage designs, round 2",
"stage": "Ready to review",
"memo": "Two layouts for the homepage, both with the tea finder near the top. A keeps the big seasonal photo; B leads with the three blends. Tell us which one, or what to change, by Friday next week.",
"files_link": "https://files.marwoodkell.example.com/larkspur/homepage-round-2",
"_added": "-2d"
},
{
"date": "-5d",
"project": "Larkspur Tea Co. website refresh",
"title": "Product photos for the shop pages",
"stage": "On track",
"memo": "Thank you, we have your autumn range. Hana is checking your photos, and the shop pages stay on track.",
"files_link": "https://files.marwoodkell.example.com/larkspur/photo-guide",
"_added": "-5d"
},
{
"date": "-12d",
"project": "Gift box packaging",
"title": "Label proofs at the printer",
"stage": "On track",
"memo": "Proofs for the three blends are with the printer. We asked for a matt sample and will post a photo here when it arrives.",
"_added": "-12d"
},
{
"date": "-14d",
"project": "Larkspur Tea Co. website refresh",
"title": "Shop page wireframes",
"stage": "Done",
"memo": "Signed off with your change: the gift-box filter now sits above the blends.",
"files_link": "https://files.marwoodkell.example.com/larkspur/wireframes",
"_added": "-14d"
},
{
"date": "-20d",
"project": "Larkspur Tea Co. website refresh",
"title": "Logo files",
"stage": "Done",
"memo": "Final SVG and PNG set in all colourways, with a one-page guide on spacing and minimum size.",
"files_link": "https://files.marwoodkell.example.com/larkspur/logo-files",
"_added": "-20d"
},
{
"date": "-24d",
"project": "Larkspur Tea Co. website refresh",
"title": "Colours and type agreed",
"stage": "Done",
"memo": "Moss green, cream and a deep plum for the tin lids. Headings in a soft serif, body text in a plain sans.",
"_added": "-24d"
},
{
"date": "-28d",
"project": "Larkspur Tea Co. website refresh",
"title": "Kick-off notes",
"stage": "Done",
"memo": "Who the shop is for, the three blends to lead with, and the launch date we are aiming for.",
"files_link": "https://files.marwoodkell.example.com/larkspur/kickoff",
"_added": "-28d"
}
],
"reviews": [
{
"title": "Shop page wireframes",
"decision": "Approve with small changes",
"notes": "Love it. Can the gift-box filter go above the blends? Most people shopping in November are buying presents.",
"_added": "-15d",
"_status": "Done",
"_reply": "Done: the filter now sits above the blends. Wireframes signed off, thank you.",
"layout": "Only one layout"
},
{
"title": "Homepage designs, round 1",
"decision": "Ask for a new round",
"notes": "The carousel feels busy on my phone. Keep the tea finder, drop the slider, and can we see one version that leads with the blends?",
"_added": "-9d",
"_status": "Done",
"_reply": "Thanks Nell. Round 2 drops the carousel and Layout B leads with the blends. It is in your updates now."
},
{
"title": "Logo files",
"decision": "Approve",
"_added": "-19d",
"_status": "Done",
"_reply": "Wonderful. The final files are in your updates.",
"layout": "Only one layout"
},
{
"title": "A5 flyer for the Christmas market",
"decision": "Ask about the quote",
"notes": "Could the print run include 500 copies? Happy to pay the difference.",
"_added": "-12d",
"_status": "Done",
"_reply": "Yes: 500 copies are included in the £380. Accept whenever you are ready."
}
],
"briefs": [
{
"title": "Christmas gift box landing page",
"project": "Larkspur Tea Co. website refresh",
"due": "+30d",
"details": "One page for the three gift boxes, with a short story for each blend and a button to the shop. Copy and photos are in the PDF.",
"_added": "-2d",
"_status": "Received"
},
{
"title": "A5 flyer for the Christmas market",
"project": "Gift box packaging",
"due": "+45d",
"details": "Double sided: the gift boxes on one side, the tea room on the other. Same look as the box labels.",
"_added": "-16d",
"_status": "Quoted",
"_reply": "£380 for design and a print-ready file, with two rounds of changes. Accept the quote to book the work, and Hana will confirm the start date here."
},
{
"title": "New Sunday hours on the contact page",
"project": "Larkspur Tea Co. website refresh",
"due": "-4d",
"details": "The tea room now closes at 16:00 on Sundays. Please update the contact page and the footer.",
"_added": "-8d",
"_status": "Done",
"_reply": "Done. The footer and the contact page both show the new Sunday hours."
},
{
"title": "Product photos for the shop pages",
"project": "Larkspur Tea Co. website refresh",
"details": "Files for: Product photos for the shop pages. Here they are.",
"_added": "-3d",
"_status": "Received"
}
],
"care": [
{
"date": "2026-10-23",
"task": "New Sunday hours on the contact page and footer",
"hours": 0.5,
"_added": "-1d"
},
{
"date": "2026-10-22",
"task": "Autumn gift box photos swapped in on the shop page",
"hours": 1.5,
"_added": "-3d"
}
]
}
}
},
"files": [
"index.html",
"app/index.html",
"app/updates.html",
"app/review.html",
"app/requests.html",
"app/care.html",
"app/account.html",
"privacy.html",
"styles.css",
"app.js",
"kit.css",
"kit.js",
"kit-icons.svg",
"site.webmanifest",
"favicon.svg",
"art/board.svg",
"art/icons.svg",
"og.png",
"apple-touch-icon.png",
"icon-192.png",
"icon-512.png",
"icon-512-maskable.png",
"sample/files.html",
"art/layout-a.svg",
"art/layout-b.svg",
"art/packaging.svg",
"art/poster.svg",
"art/kickoff.svg",
"art/swatch.svg",
"art/label-sheet.svg",
"art/wireframe.svg"
],
"pages": [
{
"path": "index.html",
"label": "Home",
"purpose": "The public page: a Klein blue poster with a cork strip of pinned work and a red dot, the client area at real scale on cork, how a project runs in five phases as kraft tags, prices with the Care plan, and the studio with sign-in"
},
{
"path": "app/index.html",
"label": "Home",
"purpose": "Signed out: a welcome and sign-in. Signed in: the round waiting for review as a large pinned print with Review this round, what else needs the client (product photos, a quote), the project card with its phase as kraft tags, the next call and launch, the latest updates as pinned prints, the client's requests as envelopes and the Care time card"
},
{
"path": "app/updates.html",
"label": "Updates",
"purpose": "Every update the studio assigned to this client as pinned prints on the cork wall, newest first, with its stage tag, a link to the files and a red dot on approved rounds, plus what each tag means"
},
{
"path": "app/review.html",
"label": "Review",
"purpose": "The round ready for review, large on the wall, the decision form as a crit card where the red dot lands on Approve, and past decisions with their status and the studio reply"
},
{
"path": "app/requests.html",
"label": "Requests",
"purpose": "The new request form as a brief sheet (what, project, date, details, attachment) and the client's requests as kraft envelopes with a Received, Quoted, Scheduled, Done row and the studio reply"
},
{
"path": "app/care.html",
"label": "Care plan",
"purpose": "The paid Care plan (£240 a month, 4 hours of small changes): this month's hours punched on a time card, the change log, what is covered, questions, and the join button"
},
{
"path": "app/account.html",
"label": "Account",
"purpose": "The account parts (sign-in and devices, profile, billing, leaving) as pinned cards, the studio team and how to reach them"
},
{
"path": "sample/files.html",
"label": "Sample shared folder",
"purpose": "Sample only: stands in for the shared folder each update links to on a real site (the sample rows link to example.com, and app.js sends those here): homepage round 2 in two layouts and the photo guide. Delete it when the real links are in."
},
{
"path": "privacy.html",
"label": "Privacy",
"purpose": "The privacy notice, with blanks the Site Owner fills in"
}
],
"facts": [
"studio name",
"contact email",
"who posts the updates",
"reply time for briefs",
"privacy contact and address"
],
"interview": [
"What is your studio or business called, and who in it posts the updates?",
"Who are your clients, and what kind of projects do you run for them?",
"Which email address should clients write to?",
"Where do you keep the files you share (a shared folder link per update works best)?",
"How quickly do you reply to a new brief?",
"What address and privacy contact should the privacy notice show?"
],
"customise": {
"strings": [
"Marwood Kell Studio in the header, footer and titles; replace every data-pl-fill fact with the owner's own, and the names Hana and Tobi on index.html and the app pages",
"Fill in every highlighted blank on privacy.html with the Site Owner before members use the site (not legal advice: https://pagelemon.com/agents/member-app-legal)",
"Make the updates list with save_app_list exactly as memberApp.lists says (by owner: the owner adds each update in the Dashboard and assigns it to one client; files_link holds an https link to a shared folder); change fields there and on app/index.html together",
"Make the briefs list with save_app_list exactly as memberApp.lists says; change fields there, in the form on app/requests.html and in the briefs rows on app/index.html together",
"Status options are the updates list's choice options; if you rename them, change the names in app.js too so the kraft tags keep their colours",
"Client work only: never add health or medical projects or fields, and never ask clients for card, bank or ID numbers"
],
"colours": "Edit the tokens at the top of styles.css: White Wall, Klein blue (the poster field and every primary button), cork, kraft (tags and envelopes) and Pin Red (only pins and the red dot). The dark scheme follows the device: a blue-black wall with darker cork, while prints stay white.",
"fonts": "Google Fonts: Instrument Serif (display: headlines, project and round names in italics, big numbers) and Instrument Sans (text and labels), one in every page head and --ho-serif / --ho-sans in styles.css. If the owner prefers no font service, download both (OFL) into a fonts/ folder and switch to @font-face.",
"sections": "Member pages live under /app and use the data-pl-view markup. setup_app with memberApp.setup, then save_app_list for each list in memberApp.lists (projects, updates, care are owner rows assigned to one client; reviews and briefs are the client’s own rows with a status and a reply), and save_plan for the Care plan. app/index.html: the project card, what needs the client (rounds to review, things waiting on them, quotes to accept), the latest updates and requests. app/updates.html: every update. app/review.html: the decision form for a round or a quote (the buttons pass ?title= and ?kind=); approving a round asks which layout (Layout A, Layout B or only one), saved in the layout field. Files a client sends for an update are briefs rows whose details start \"Files for: \"; they show under Files you sent on Updates, not under Your requests, and settle the update's Waiting on you card. app/requests.html: new requests and their quotes. app/care.html: the Care plan, this calendar month’s hours from the care list and the join button. app/account.html: the account block. Owner path in the Dashboard (Apps, Entries): open a new review or request, set its status, write the reply (for a quote, the price); log Care work as care rows (date, task, hours); post updates and set the project phase. app.js maps stages and phases, builds the row links and names the round on the review form.",
"images": "The studio's own work is shown as drawn prints of the sample client Larkspur Tea Co.: art/board.svg (identity sheet, 1600 by 1000, also the signed-out welcome), art/layout-a.svg and art/layout-b.svg (homepage round 2, 1200 by 900, also on every round waiting for review and on sample/files.html), art/packaging.svg and art/poster.svg (portrait). Replace them with the studio's own work at the same shape; keep the review prints generic or show the latest round. art/icons.svg holds the icons the kit lacks. art/label-sheet.svg and art/wireframe.svg are the drawn proof and wireframe prints for the Label proofs and Shop page wireframes updates. favicon.svg is the pinned-print mark; the PNG icons and manifest are made from it."
},
"schemaVersion": 2
}