Section 01
Overview — how the platform works
This document tells everyone who works on Knowledgebase.business exactly how to build, update, and deploy tools and pages. Read this before touching any file.
The platform is a set of HTML files hosted on Netlify and connected to a GitHub repository. When you add or change a file in the GitHub repository, Netlify automatically detects the change and redeploys the site within seconds. No manual uploading required after setup.
Memberstack sits in front of the protected tools and controls who can access them. Clients log in with their credentials and land on their dashboard. When a client's subscription ends, their Memberstack account is deactivated and they immediately lose access to all tools.
The golden rule: Never drag and drop files directly to Netlify. Always go through GitHub. Direct uploads bypass version control and can cause the site to lose files that weren't included in the drag.
Section 02
Tools you need
Every team member working on the platform needs these four things set up before they can contribute.
| Tool | What it does | Where to get it |
|---|---|---|
| GitHub Desktop | Manages the repository on your Mac. Shows changes, lets you commit and push without using the command line. | desktop.github.com |
| GitHub account | Stores the repository in the cloud. Must be added as a collaborator on the Knowledge Base repository. | github.com |
| VS Code or any text editor | For editing HTML files. VS Code is preferred — it shows errors and has useful extensions. | code.visualstudio.com |
| Netlify access | To check deploys and manage site settings. Ask Roy for access to the knowledgebase-business site. | app.netlify.com |
Never share the Memberstack admin credentials or the Anthropic API key in Slack, email, or any chat tool. These are sensitive and must be stored only in the password manager.
Section 03
File structure
All files live at the root level of the Knowledge Base repository. There are no subfolders — everything sits flat so Netlify can serve them directly.
index.html
Public
Redirects to login.html — the default homepage
login.html
Public
Client sign-in page — Memberstack handles authentication
dashboard.html
Protected
Client dashboard — tool tiles, usage stats, subscription info
transaction-coding-assistant.html
Protected
AI receipt coding tool — configured per client COA
myob-coa-checker.html
Protected
Chart of accounts audit tool — generic Australian rules
sale-readiness-assessment.html
Protected
Buyer-facing operational assessment document
pre-session-questionnaire.html
Public
Sent to clients before the audit session — no login required
[client]-[tool].html
Template
Client-specific tool versions — e.g. lawfirm-coding-assistant.html
No subfolders. All files go in the root of the repository. If Netlify can't find a file it's almost always because it ended up in a subfolder by mistake.
Section 04
Adding or updating a file
Follow these steps every time you add a new tool, update an existing page, or make any change to the platform.
1
Get the file ready
Build or edit the HTML file. Make sure it uses the correct design system (Section 07) and — if it's a protected tool — includes the Memberstack script (Section 08).
2
Drop it into the Knowledge Base folder
Open Finder and navigate to the Knowledge Base repository folder. Drag the file in. If replacing an existing file, click Replace when prompted.
3
Open GitHub Desktop
You'll see the changed file appear in the Changes tab. Uncheck .DS_Store if it appears — never commit that file.
4
Write a commit message
In the Summary field, write a short description of what changed. Examples: "Add law firm coding assistant", "Update login page colours", "Fix COA checker GST rule". Be specific — this is your change log.
5
Commit to main
Click Commit to main. This saves the change to your local repository.
6
Push origin
Click Push origin at the top of GitHub Desktop. This sends the change to GitHub, which triggers Netlify to auto-deploy. The site updates within 30 seconds.
Section 05
Testing after a deploy
Every deploy should be tested before telling a client it's ready. Takes two minutes.
Netlify shows Published in green on the Deploys page
Go to
knowledgebase-business.netlify.app/login.html — login page loads correctly
The new or updated file is accessible at its URL — e.g.
/transaction-coding-assistant.html
If the file is protected — confirm it redirects to login when accessed without being signed in
If the file uses the Claude API — test one query to confirm the API call succeeds
Colours and fonts match the design system — Forest green, gold, DM Sans, Libre Baskerville
Section 06
Design system — Forest & Gold
Every page and tool on the platform uses this palette and these fonts. No exceptions. Consistency across every touchpoint is what makes the platform feel professional.
Colour palette
Forest (Primary)
#2d5a27
Forest Dark
#1a3d16
Gold (Accent)
#c8a84b
Background
#f0f5ef
Process badge
#d4e8d1
Tool badge
#e8f0fb
Typography
| Font | Use | Import |
|---|---|---|
| Libre Baskerville | Headings, brand name, hero titles | Google Fonts — weights 400, 700, italic |
| DM Sans | Body text, labels, buttons, all UI text | Google Fonts — weights 300, 400, 500, 600 |
| JetBrains Mono | Code, account codes, file names, system values | Google Fonts — weights 400, 500, 700 |
CSS variables to include in every file
CSS — paste into every :root block
:root {
--forest: #2d5a27;
--forest-dk: #1a3d16;
--forest-lt: #4a7c59;
--gold: #c8a84b;
--gold-bg: rgba(200,168,75,0.08);
--bg: #f0f5ef;
--border: #d4e8d1;
--text: #1a3d16;
--text-muted:#6b9a78;
--process-bg:#d4e8d1; /* green badge background */
--tool-bg: #e8f0fb; /* blue badge background */
--tool-color:#1a4a8a; /* blue badge text */
}
Buttons
Primary button
background: #2d5a27; color: #ffffff; border: none;
border-radius: 6px; padding: 10px 22px; font-size: 14px;
Accent button
background: #c8a84b; color: #1a3d16; border: none;
border-radius: 6px; padding: 10px 22px; font-size: 14px; font-weight: 600;
Section 07
Memberstack protection
Any tool that clients should only access when logged in needs the Memberstack script. Public pages — the landing page, the login page, the questionnaire — do not need it.
Paste this block just before the closing </body> tag of every protected HTML file:
Memberstack protection script — paste before </body>
<!-- Memberstack protection -->
<script src="https://static.memberstack.com/scripts/v1/memberstack.js"
data-memberstack-key="pk_781f69891fdb2812d4b0"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var checkInterval = setInterval(function() {
if (window.$memberstackDom) {
clearInterval(checkInterval);
window.$memberstackDom.getCurrentMember().then(function(result) {
if (!result.data) {
window.location.href = "/login.html";
}
});
}
}, 100);
});
</script>
Never add the Memberstack script to
login.html, index.html, or pre-session-questionnaire.html. These pages must be publicly accessible — adding protection to them will lock everyone out.
Section 08
Naming conventions
Consistent file naming keeps the repository readable and prevents broken links.
| Type | Format | Example |
|---|---|---|
| Platform tools | descriptive-name.html (lowercase, hyphens) | transaction-coding-assistant.html |
| Client-specific tools | clientname-toolname.html | lawfirm-coding-assistant.html |
| Process documents | process-name.html | sale-readiness-assessment.html |
| Never use | Spaces, capitals, underscores, version numbers | NOT: Coding Assistant v2.html |
Section 09
Adding a new client
Follow these steps every time a new client comes onto the platform.
1
Switch Memberstack to Live Mode
Go to app.memberstack.com. Toggle from Test Mode to Live Mode. This is required before creating real client accounts.
2
Create the client's Memberstack account
Go to Members → Add Member. Enter their email address. Set a temporary password. Assign them to the correct plan (Starter, Professional, or Premium).
3
Tailor the coding assistant
Follow the tailoring guide to configure a client-specific version of the coding assistant with their chart of accounts. Name it clientname-coding-assistant.html and add it to the repository.
4
Update the dashboard tile links
If the client has a tailored tool, update the dashboard to link to their specific version rather than the generic one. Create a client-specific dashboard if needed.
5
Send credentials
Email the client: their login URL (knowledgebase-business.netlify.app/login.html), their email address, and their temporary password. Ask them to save it securely.
6
Test the login before telling the client
Log in yourself using their credentials. Confirm the dashboard loads, all their tools are accessible, and the coding assistant uses their COA. Then tell the client they're live.
Section 10
Offboarding a client
When a client cancels or their subscription lapses, follow these steps immediately.
1
Deactivate in Memberstack
Go to Members, find the client, click their account, and click Deactivate or Suspend. Their login stops working immediately. Do not delete the account — deactivating preserves their history and allows reinstatement.
2
Keep their files in the repository
Do not delete their tailored tool files from GitHub. They're harmless — no one can access them without a Memberstack login. Keeping them means you can reinstate the client instantly if they return.
3
Note the reason
Record in your CRM or notes why the client left — cancelled, non-payment, completed engagement, referred on. This feeds into the engagement health data over time.
Reinstating a client is one click in Memberstack — reactivate their account and they're back in immediately. No rebuilding required.