Download and unzip
Inside is one folder called Claude. That folder is your Brain.
Modern AI product, warm-editorial
The v1.2 kit, block by block.
Every token, component and content block on one page, each shown on its own so you can sign off the layout AND each piece separately. Real brand Typekit (Contralto Big + Acumin), the exact marine/clay palette, square edges, one locked ochre accent, tabular-numeral readouts, restrained motion. Refine a block here and every v1.2 page inherits it. Never linked publicly.
Tokens · colour
tokens.cssMarine + clay + stone, plus the ONE locked accent (ochre). The ochre is the same colour baked into every generated image, so page and imagery read as one system. On light grounds, accent TEXT uses the darkened --accent-ink for WCAG AA. Body/secondary text on clay uses --stone-body #586268 (5.59:1); --stone-60 is reserved for white surfaces only (fails AA on clay).
--ink #001722
--ink-80 #0A2F3F
--stone-60 #66747A (white bg only)
--stone-body #586268 (AA body on clay + white)
--stone-30 #B2B9BC
--stone-15 #DDE1E3
--off #F4F2EE
--surface #FFFFFF
--accent #B67A3D
--accent-ink #8A5620
--accent-wash #F0E7DA
--alert #8A2F1A
Tokens · type
contralto-big + acumin-variableDisplay = contralto-big (all-caps, tracked, used sparingly per brand rule): reserved for the landing H1, the CTA-band H2, and the .display flourish. Section H2s set in acumin-variable sentence-case (same as H3), so the page reads modern rather than all-caps top to bottom. Body = acumin-variable. Stat readouts use the mono stack with tabular-nums for the technical-AI signal.
display / h1 · CTA · .displayContralto Big, sparing
section / h2Acumin, sentence-case
bodyAcumin Variable is the workhorse. Calm, readable, Australian English.
stat / mono0123456789 / 1,234 / 20→1
--font-display:'contralto-big',Georgia,serif; /* all-caps, tracked, sparing */
--font-body:'acumin-variable',-apple-system,sans-serif;
.tnum{font-variant-numeric:tabular-nums} /* stat readouts */
<link rel="stylesheet" href="https://use.typekit.net/khy6rof.css">
Buttons
.btn / .btn--ghostOne intent, one download action. The primary conversion buttons lead with the FREE lever verbatim: "Get the free pack" (hero form submit + CTA band), so the strongest conversion token rides the button itself; the compact top nav keeps the shorter "Get the pack" lockup. Ochre underline on light; on ink bands the fill flips to ochre-on-ink for pop and AA. Square, tactile press.
<a class="btn" href="#f">Get the free pack</a>
<a class="btn btn--ghost" href="#">Secondary</a> <!-- on .cta-band the .btn flips to ochre -->
Eyebrow + section label
.eyebrow / .labelRationed: hero eyebrow + at most one label per three sections (Taste eyebrow-restraint). The live landing carries a label on only two of its six sections. Label text uses --accent-ink for AA on clay. No middot separators (Taste 9 divider-spam) - the FREE lever rides an ochre-fill flag, not a dot.
Free for Claude Code
What's inside
<span class="eyebrow"><b class="eyebrow-free">Free</b> for Claude Code</span>
<span class="label">What's inside</span>
Hero (conversion-first split: copy + live form)
.hero / .hero-grid / .hero-formLeft = offer (eyebrow, H1 ≤ 2 lines, lead ≤ 20 words, trust chips). Right = the LIVE capture form, above the fold on desktop AND mobile (form-first stack on mobile). A slim motif strip caps the form card so the page carries a real brand image without decoration owning the fold. This is the single conversion surface, reachable with zero scroll.
Free for Claude Code
Claude that already knows your business.
A free folder of plain-text files that turns Claude into an assistant which remembers how you work.
- Free pack
- Plain-text files
- Claude Pro required
<header class="hero"><div class="hero-grid">
<div class="hero-copy">eyebrow + h1 + lead + hero-trust</div>
<div class="hero-form"><figure class="hero-form-cap">motif</figure><form class="gate">…</form></div>
</div></header>
Mid-page re-CTA
.rectaA single quiet anchor line that jumps a now-convinced reader back to the hero form, placed after the folder-proof beat so a mid-scroll reader can convert without hunting for the bottom band. Same verbatim label, one intent. Not a second theme, just a rule + line + button.
Convinced? The pack is free.
Get the pack<div class="recta"><p class="recta-line">Convinced? The pack is <b>free.</b></p><a class="btn" href="#f">Get the pack</a></div>
Section head
.section-headOne label, one display headline, one support line. Vertical stack (no split-header floater).
The shift
Claude forgets. The Brain remembers.
Every session starts from nothing. The Brain is the memory that closes the gap.
<div class="section-head center"><span class="label">Kicker</span><h2>Headline</h2><p>Support.</p></div>
Problem / solution cards
.chess / .chess-card--withTwo-card contrast. The "with a Brain" card carries the ink border + ochre top rule + ochre final mark, so the eye lands on the solution.
Without a Brain
You explain yourself every session.
Every new chat is a blank slate. The work never quite sounds like you, because it never remembers you.
With a Brain
It reads who you are first, every time.
A folder of plain-text files Claude opens before it does anything. The work comes back sounding like you.
<div class="chess"><div class="chess-card">…</div>
<div class="chess-card chess-card--with">…</div></div>
Layers band + diagram
.layers / layers-diagram.svgThe real explanatory diagram beside a numbered, hairline-separated list. Image and list swap to stacked on mobile.
- 01
Context
Who you are, what you sell, how you write.
- 02
Skills
Repeatable jobs it runs on command.
- 03
Automation
Jobs that run once they have earned your trust.
<div class="layers"><figure class="layers-figure"><img src="assets/layers-diagram.svg"></figure>
<ul class="layers-list"><li><span class="l-no">01</span><div><h3>…</h3><p>…</p></div></li> …</ul></div>
Folder proof block
.proof / brain-folder-view.pngThe honest "this is the actual thing" screenshot: the real unzipped folder, framed like a window, one functional caption below (no overlay pills). Folder structure only, no data.
The real thing
It's a folder. Here it is.
When you unzip the pack you get one folder called Claude, with the three layers laid out as folders you can open and read.
<div class="proof"><div class="proof-copy">…</div>
<figure class="proof-frame"><img src="assets/brain-folder-view.png"><figcaption>…</figcaption></figure></div>
How-it-works step
.how / .how-stepOchre top rule, mono numeral, short body. Three across, stacks on mobile. Sits under the full-width how-it-works motif band.
Open it in Claude
Point Claude Code at the folder, in VS Code or a terminal.
Type /brain-onboard
Your Brain takes over. You talk, it types.
<div class="how"><article class="how-step"><span class="how-no">01</span><h3>…</h3><p>…</p></article> …</div>
Builder (Keith) block
.builder / .builder-photoProduct-first proof: Keith as the credible builder. The photo slot is a DESIGNED placeholder (3:4 portrait) - a soft marine duotone with a head-and-shoulders vignette and an ochre baseline rule, so it reads as "a photo lands here" rather than an empty box, marked clearly until a real headshot is supplied. Swap the .builder-photo figure for an <img>.
From the person who built it
“Most of my team isn't human anymore, and the work is better for it.”
I run a full-service agency in Adelaide. I built this Brain over nine weeks because Claude kept forgetting my business every time I opened it.
Keith Cluse Cluse & Co, Adelaide
<div class="builder">
<figure class="builder-photo"><span class="ph-tag">Photo slot, 3:4</span>…</figure> <!-- swap for <img> -->
<div class="builder-copy">label + blockquote + body + .b-sign</div></div>
What's-inside list + you'll-need panel
.get-list / .needOchre square marker per row, hairline dividers (one, not top-and-bottom on every row). The you'll-need panel carries the Pro-required line.
- The base Brain. A zip of markdown and command files. Nothing to install from us, nothing executable.
- A first session that does the work for you. Type
/brain-onboardand your Brain interviews you.
You'll need
- A Mac or Windows computer.
- A paid Claude subscription. Claude Pro (or higher) is required. The pack is free; the subscription is yours, direct with Anthropic.
<ul class="get-list"><li><b>…</b> …</li></ul>
<div class="need"><h3>You'll need</h3><ul>…</ul></div>
Email-gate form
.gate / .gate-okThe single conversion surface. It carries its OWN headline (.gate-head - "Get the free pack" + what the button does) so it never reads as a generic newsletter box. Name + email + company honeypot. Labels ABOVE inputs, ochre focus ring, ochre top rule. The fine-print leads with the FREE lever. Error text is a live region (role="alert"). On /api/capture success the JS swaps to the success state and, per the client contract, reads j.guide_url to reveal the DOMINANT full-width "Read the guide" button (the fastest download path, fires guide_view); the inbox line demotes beneath it.
You are in. Let us get you set up.
Read the guide
The same link is in your inbox too, from Nigella at Cluse & Co, so you can open it on any device.
<form class="gate" id="f"> .gate-head(h2 + line) + firstname + email + company(honeypot) + submit </form>
<div class="gate-ok" id="ok"> h3 + .ok-actions(<a class="btn ok-read" hidden> primary + inbox line) </div>
<!-- JS: if(j.success){ if(j.guide_url){okRead.href=j.guide_url; okRead.hidden=false;} show ok } -->
Step card (guide)
.step / .checkOchre left rule, mono step number, a "you'll know it worked when" check under a hairline. Number moves inline on mobile.
Sign in to Claude
Body copy for the step, with a link out to an official source. You need Claude Pro (or higher).
You'll know it worked when the terminal shows Claude's welcome message.
<article class="step"><span class="step-no">03</span><h3>Title</h3><p>Body.</p>
<p class="check"><b>You'll know it worked when</b> …</p></article>
Tab toggle (OS / path switch)
.tabs[data-switch]Drives the guide's Mac/Windows and VS Code/Terminal content. Active tab is ink with an ochre underline. Persists per page in sessionStorage.
Shown on Mac.
Shown on Windows.
Shown on the VS Code path.
Shown on the Terminal-only path.
<div class="tabs" data-switch="os"><button data-value="mac">Mac</button>…</div>
<!-- content marked .only-mac / .only-win / .only-vscode / .only-terminal -->
Copy block
.copyblockMono command on ink, ochre Copy affordance. Writes to clipboard and flashes "Copied".
/brain-onboard<div class="copyblock"><code>/brain-onboard</code><button type="button">Copy</button></div>
Callout
.callout / .callout--warnOchre left rule for info; alert-red for the recovery/troubleshooting note.
Info. Something useful to know before the next step.
If something doesn't match: the recovery path goes here.
<div class="callout">…</div> <div class="callout callout--warn">…</div>
FAQ accordion
.faq detailsNative <details>, ochre +/minus marker (minus sign U+2212, never an en-dash). No JS needed.
Does this cost anything?
The pack is free. You need your own Claude subscription, Pro or higher.
Do I need to be technical?
No. The guide assumes a blank computer and checks your progress at every step.
<div class="faq"><details><summary>Q</summary><div class="faq-body">A</div></details></div>
CTA band (ink, full width)
.cta-bandThe deliberate locked ink family (not a random theme flip). Ochre top rule, ochre CTA. Repeats the single download intent.
<div class="cta-band"><div class="wrap-page"><h2>…</h2><p>…</p><a class="btn">Get the pack</a></div></div>
Loom slot (guide)
.loom-slotPlaceholder for the walkthrough video on the guide. Ink ground, ochre top rule + label.
Walkthrough videoLanding here shortly.
<div class="loom-slot"><span class="label">Walkthrough video</span>…</div>