Playbook · Method & Colophon
This is how I do strategy. The site is the worked example.
How I read a brief, how I build a pitch argument, where I look for evidence. And every design and build decision behind this site.
Why this page exists
The method behind the essays, and the design and build decisions behind the site it ships on, documented the way I would hand it to a client.
For the argument itself, start with the model. This one is about how the work gets made.
How I read a brief
On every brief, I work these out before I write any of the answer.
- The questionFind the one under the brief
- A brief asks for a channel plan by a date. Underneath it sits a business problem: demand is thinning, a competitor got cheaper, the board wants growth the current mix cannot give. Answer the brief and you are a supplier. Answer the problem and you are a strategist.
- The audienceBefore the channel, every time
- Start with who buys and what they already believe, then look at what they are doing instead of buying. Those answers decide the strategy.
- The numberName what has to move
- A strategy has to move a number a finance director recognises, revenue or margin. I name it in the first meeting and write it on the plan, so everyone is arguing about the same target.
- The categoryRead it before adding to it
- I read what the category already claims and what it costs to say the same thing, then look for the ground nobody has claimed. Positioning is a bet, and the category sets the odds.
The argument, not the deck
A pitch is one argument told by several voices. The insight names the problem, the strategy answers it, the plan prices it, the numbers close it. I write that chain before anyone opens a slide, and every page that fails to serve it gets cut, however good it looks.
- The insight names the problem.
- The strategy answers it.
- The plan prices it.
- The numbers close it.
A pitch is a conversation you have prepared for, and the deck is there to support it.
Everyone presenting should be able to say, in one sentence, what the client should do and why. If the sentences differ, the pitch is not ready.
Where I look for evidence
I plan from the dashboards the activation team runs, because brand health shows up there first. Branded and generic search, split apart, show whether a brand is creating demand or only collecting it. Share of search moves before revenue does. When cost per acquisition climbs and the account has not changed, the cause usually sits outside the account.
Every number on this site is public: government statistics, company filings, published research. That is a constraint, not a preference. The accounts I have run belong to the clients who paid for them, and their numbers are not mine to publish, so nothing here is drawn from one. What you can check instead is the reasoning: each figure carries its source and says whether it is measured, estimated, illustrative or official, and the models say plainly where the assumption sits. If you want the account evidence, ask me in a room under an NDA. It exists. It is not going on a website.
Benchmarks describe the average, so I lead with the client's own data and pull in industry numbers where it runs out. Audience research counts as evidence too, because what buyers believe about a category is checkable.
The essays run this method in public: why your CAC keeps rising, what a 70/30 split costs, and why attribution flatters the last click.
Where the model comes from
I came to brand strategy from the build side.
I studied Digital Design and Electronic & Computer Engineering at Brunel, a joint degree. I founded and ran Clover Boutique, a DTC homeware brand, through Covid. It sold 5,000 units in its first six months, and I did its positioning, its store, its creative and its paid acquisition myself.
Then performance media, at Mindshare (GroupM), then Brainlabs, now WeDiscover. That is where I learned what a media auction rewards, and why the number on Monday wins every argument in the room.
The Brand Trilemma comes from watching the same finite budget argued over in every one of those jobs.
- Brunel: Digital Design and Electronic & Computer Engineering, a joint degree.
- Clover Boutique: DTC homeware, 5,000 units in its first six months. Positioning, store, creative and paid acquisition, solo.
- Mindshare (GroupM), then Brainlabs, now WeDiscover: performance media.
- The Brand Trilemma: the same finite budget, argued over in every one of those jobs.
The model
The mark and the idea are the same object, an equilateral triangle with Equity at the top. Drag the point and the mark redraws to match the allocation.
A balanced split. Rare, and usually a sign of a big budget or a very deliberate hand.
Drag the point, tap inside the triangle, or pick a preset. Arrow keys nudge it.
The full construction, the reduction ladder and the reasoning →
Colour
The four inks and the tokens around them. Click any swatch to copy its hex. Chips re-map with the theme; hex values shown are the light theme's.
Flip the theme and watch every value re-map
Type
Charter carries every voice where it is resident, which covers macOS and iOS, with Georgia catching the rest. The specimens are live: what you see is your own system's rendering.
DisplayCharter600 / 700
Brands starve the corner that compounds.
Headings and the mark. Weight 700 for page titles, 600 for section heads and figure claims.
BodyCharter400 / 400 italic / 600
Performance captures demand that already exists. It cannot make the demand that is not there yet.
Reading text at 17px on a 1.55 line height; essay pages step to 17.5px on 1.6. Emphasis is weight 600, and links take the accent ink.
LabelsCharter400 / 400 italic
Brand & comms strategy · 3 Aug 2026
Sentence case in the body serif, and the caps-and-mono label layer is gone. The ladder runs .8rem for chart axes, .85rem for captions and chips, .9rem for bylines: mono micro-sizes read as dust in Charter. Eyebrows take the italic.
Diegetic monoui-monospace400
--accent:var(--iris);
The one deliberate mono, and it is diegetic: it appears only inside artefacts that depict monospaced surfaces, the drawn dashboard and the code samples. No site label is set in it.
The brand decisions
- DirectionLithograph inks
- Four flat printer's inks on plaster, a serif carrying every voice, light by default, density over air: the sentence that opens the stylesheet.
- The markAn argument with its conclusion removed
- Three plotted points with the top one left empty, like a therefore sign with its conclusion removed. It is not the triangle from the interactive tool. The full construction is on the logo page.
- AccentsCorner ink by subject, iris otherwise
- An essay that plots its subject on the triangle carries that corner's ink as its page accent, the whole page: madder for an activation subject, verdigris for identity. Mechanism essays stay iris. And the trilemma's own exhibits never inherit the page's corner, because the model's semantics outrank the page's.
- Light and darkLight by ruling
- Dark exists only through the toggle, one stored key written when you click it. The OS dark preference is ignored. Every colour is a token, so the swap is total, with no flash of the wrong theme, and a corner essay keeps its corner ink in dark.
Test the light/dark decision yourself
The build decisions
- Astro, staticZero JS framework
- No React and no client-side framework. Hand-written CSS on design tokens, static HTML that ships as-is. Under 15KB of JavaScript per page.
- FontsNone served
- The serif stack is system-resident, so the site serves no font files at all and makes no third-party request. When the licensed face is bought it lands in --display and --body, a one-line swap.
- RhythmBy role, not one value
- Sections declare their job. The model section, the writing list and the who block each set their own vertical padding.
- MotionOne curve, two durations
- Transitions run on cubic-bezier(.2,.7,.3,1): .35s for the theme swap, .15s for hovers and reveals. The stylesheet calls the intent settling ink.
- FiguresClaim above, source below
- The claim goes above the graphic, set in the heading face. Underneath: the basis (measured, estimated or illustrative, or official for company-reported figures), then the source and the site line. Every figure stays complete with JavaScript off and at 360px wide.
- InteractivityModel-as-tool
- The Brand Trilemma is a tool you operate, and every interaction is there to serve the argument. If moving a control changes no claim, I cut it.
- The codeAI-assisted, decision-led by me
- I wrote the code here with an AI assistant; it speeds the typing. Every token, layout, interaction and trade-off is mine, and I fix what it gets wrong.
- Privacy by designCookieless, no banner
- Cookieless analytics that store nothing on your device, one functional storage key, both disclosed. Nothing non-essential is stored, so there is no cookie banner. GDPR/PECR is built into the architecture from the start.
- HostingOwn the stack
- Built and served first on my own hardware over a private network, then published to the edge from the identical build. I set up the DNS and the hosting myself.