Brand system · version 1.0 · 6 Oct 2026
Provenance is the brand.
This is the working brand book for mikee.pro. It exists so that every future asset — a proposal, a slide, a social card, an invoice — can be made without asking what the practice looks and sounds like.
01 · Strategy
What it is. A human-operated marketing operations practice. One named operator builds the measurement, automation and reporting layer under a company's marketing and then runs it — it is not software you license and leave to itself.
Who it is for. Businesses that spend real money on marketing and cannot fully explain what it produced. Multi-location, lead-generation and B2B service firms see the fastest return, because the same question has to be answered per market.
What it is against. Dashboard theatre, blended averages, attribution sold as precision when it is a guess, and suppliers paid a percentage of the media spend they are meant to be questioning.
The one idea. Provenance. Every figure names its source, its window and its freshness, and records that fail to reconcile are counted and published rather than smoothed away.
For companies whose marketing numbers do not agree with each other, mikee.pro is the human-operated marketing system they can be held to — one named operator sets the measurement up and runs it, and every published figure carries its own evidence.
Marketing you can check.
Human-operated marketing systems.
If a number cannot name its source and its window, it does not go in front of a decision.
02 · Logo
The mark is the engineering datum symbol: a reading, and the reference it is measured against. It is the whole brand argument in one figure. Three measures hang from a datum rail in an earlier draft; that draft was cut because it read as a pennant rather than an instrument.
Use it like this
- Minimum mark size 14px. It was drawn to hold at 16px and still reads at 12px.
- Clear space around the lockup equal to the mark's height on all sides.
- Horizontal lockup in headers and signature blocks; stacked when the space is square.
- On dark surfaces use the paper variant. Never recolour the mark arbitrarily.
- Keep the wordmark's own ink and the .pro grey relationship.
Do not
- No gradients, dropshadows, outlines or bevels on the mark.
- Do not stretch, rotate, or re-draw any part of it.
- Do not set the wordmark in another typeface or add tracking.
- Do not place the pine mark on a mid-tone green or on a busy photograph.
- Do not use the mark as a bullet, a background pattern, or a frame.
03 · Colour
Cool green-grey paper against a deep slate ink, with deep pine as the single accent and a second dark green for whole sections. It is inherited from the practice's earlier identity and extended, not replaced. Status colours are functional only: they always mean a state.
All text colours were measured, not eyeballed. --muted-2 was darkened from #7B8A8D to #5F6E72 because the quieter value measured 3.23:1 on paper — below AA for 11px text — and that grey carries the provenance lines the brand is built on. Every contrast pair on the site now meets WCAG AA: normal text at 4.5:1, large text at 3:1. Inversion rules matter too: on pine-deep the eyebrow takes --on-ink-muted (pine on pine-deep is only 1.74:1), and a solid button inverts to paper rather than staying pine.
04 · Type
Three faces, three jobs, all self-hosted. No external font service is loaded, because the site's content security policy permits no third-party origins.
Archivo Print Condensed 800
uppercase, tracking −0.015em
Marketing you can check.
Used with restraint: page titles and the single most important statement on a screen. Never for body text, never below 28px. Its narrow width is what allows a headline to be large without shouting.
Archivo 400–800
variable weight
The workhorse. Headings, paragraphs, buttons, tables — everything a reader reads. Weights in use: 400 body, 500 labels, 600 emphasis and card titles, 700 wordmark.
Line height 1.62 for body, 1.15 for headings. Measure capped at 68 characters.
IBM Plex Mono 400–600
uppercase for labels
SOURCE Collins OS health surface · WINDOW 16–23 Sep 2026 · CHECKED 23 Sep 2026
The instrument face. Carries every number, unit, timestamp, source line and section label. If a figure appears anywhere in this brand, its provenance is set in this face. Tabular figures are always on for columns of numbers.
05 · Voice
How it sounds. Plain, specific, numeric. Sentences that could be checked. Sentence case. Active voice. Numbers in figures. No exclamation marks, no emoji, no adjectives standing in for evidence.
What it refuses. “Passionate about,” “data-driven,” “world-class,” “ninja,” “unlock,” “supercharge.” Superlatives that cannot be sourced. Anything that would survive being pasted onto a competitor's site unchanged.
The test for any sentence. Could a reader ask “says who?” and get an answer? If not, rewrite it or attach the source.
Name the operator. The model is a human running the system, so copy names the human: “Mikee Shattuck”, “one operator”, “run by a person”. Never “our team”, “our platform”, “our solutions”. A system is always described with whoever operates it attached.
Say the uncomfortable thing. The site reports one system as broken because it is. A supplier who only reports green trains people to ignore the report — that principle is a voice rule as much as an operating one.
Instead of
- “We're passionate about data-driven marketing.”
- “We supercharge your growth engine.”
- “Our platform automates your marketing.”
Write
- “One operator sets the system up and runs it. Nothing is left unattended.”
- “Budget is set by office, from tracked ad position and billed revenue.”
- “Cost per hire is published as a range, because the CRM holds no click IDs.”
06 · Motion and graphic language
Motion has exactly three jobs: orientation, process, feedback. Where did this come from (a block rises 14px and resolves). How far through a sequence are we (a step's accent bar grows and its ordinal comes up to full strength as that step is reached). Did my input register (a rule under a service row, a hover state, a button label that changes to “Sending…”). Nothing loops. Nothing bounces. Nothing animates without a job.
One orchestrated moment, not scattered effects. The hero schematic draws itself once, on arrival: sources to layer to decision, staggered 60ms apart. On work, the two-bar exposure figure fills from 100% to 0% as it enters view. On every page, hairlines ink themselves in from the left like a rule being drawn on a sheet.
Order is derived, not typed. Arrival delay is computed from an element's position among its siblings — 70ms per step, capped at 460ms — so a list arrives in reading order without anyone hand-numbering it. A delay written into the markup on purpose always wins over the computed one.
Three durations, one curve. 120ms for feedback, 220ms for small transitions, 620ms for a one-off reveal or a schematic draw, all on cubic-bezier(0.165, 0.84, 0.44, 1) — fast out, long settle.
Two rails report position. A 2px pine rule runs across the top of the viewport measuring how far through the page you are. The sticky annotation rail brings the section you are currently in to full strength and drops the others to 42%.
Reduced motion and no script are both supported states, not fallbacks. With prefers-reduced-motion set, the stylesheet resolves every hidden element to its finished state and the script takes its no-animation branch: counters render at their final value, the schematic is drawn, the bars are filled. With scripting off, a <noscript> block in the document head does the same. A four-second watchdog covers the third case, a script that loads and then fails part way. The site is complete without any of the animation.
Graphic language. Hairline rules and mono labels, drawn the way a schematic is drawn: sections separated by title-block rules, registers laid out as a table, connectors as plain lines. Rules carry information, they do not decorate.
07 · Asset inventory
| Asset | Files | Built by |
|---|---|---|
| Mark | logo/mark.svg, mark-pine.svg, mark-ink.svg, mark-paper.svg, mark-large.svg, favicon.svg | brand/build-logo.py |
| Wordmark | logo/wordmark.svg, wordmark-paper.svg | brand/build-logo.py |
| Lockups | logo/lockup.svg, lockup-paper.svg, lockup-stacked.svg | brand/build-logo.py |
| Icons | img/favicon.svg, favicon.ico, apple-touch-icon.png, icon-192.png, icon-512.png, maskable-512.png, icon-light-512.png | brand/build-icons.py |
| Social and OG | social/og-*.png (6), li-banner.png, x-header.png, post-1080.png | brand/build-social.sh |
| Typefaces | site/assets/fonts/ — Archivo, Archivo Print Condensed, IBM Plex Mono | self-hosted |
| Proof sheets | brand/sheet.html, brand/assets-review.html, brand/og.html | this document |
Every file above is generated from the tokens, not drawn by hand, so a change to the palette or the mark propagates by re-running one script. The wordmark is converted from the Archivo variable font to outlines, so no asset depends on a font being installed.