Design language v1 · the rules this site is built to
Derived from the logo's own two colours.
Tailwind v4 · static build · Cloudflare Worker
The problem
The live site uses 157 distinct hex values and loads four font families. A single boxed container is stamped 870 times across 133 pages — as a case study, a service, a testimonial, a stat and a CTA. text-center appears 1,126 times, type--uppercase 503 times.
When everything is emphasised, nothing is. The site has also drifted from its own mark: the logo is only two colours, but the CSS runs an orange, a green, a blue, a coral and a navy alongside the red.
Sections are separated by whitespace. A 1px hairline if that is not enough. A tinted fill only as a last resort.
Exactly one element on screen earns a solid fill: the primary action. Everything else is border and space.
The red is the equity. It stays scarce so it keeps meaning.
Red is commercial — actions, brand, the ask. Navy is editorial — insight, categories, data. Never both on one element.
Shadow is reserved for things that genuinely float: menus and dialogs.
Palette
Every value traces to the logo: the cool grey wordmark #8F969E and the red mark. Greys carry a blue bias (~213°) taken from that grey — a pure neutral grey would be a non-decision. Contrast ratios are measured, not estimated.
The panel disagreed on whether the brand red could carry text. Measured: #D03024 on white is 5.08:1, so it passes AA for body text and may be a link colour. #8F969E is 2.99:1 and fails even large text — it is a mark and metadata colour only.
The mark
The existing mark is used unchanged — it is the one piece of equity worth protecting. Both supplied variants are shown on their correct grounds. The current files are raster PNGs at 2304×537 pulled from the MODX image cache; they should be redrawn as SVG for the build, which removes ~170 KB, stays crisp at any size, and lets the mark inherit theme colour instead of shipping two files.
Colour on light
Reversed on dark
Minimum clear space on all sides equals the height of the wordmark's x-height. Nothing crosses it.
24px tall on screen. Below that the counters in the mark close up and it reads as a smudge.
Two variants only: colour on light grounds, reversed white on dark. No red-only, no grey-only, no outline.
#8F969E is 2.99:1 and fails contrast for text — it is legitimate in the mark, never in a sentence.
Typography
Libre Franklin — a Franklin Gothic lineage newspaper grotesque — carries structure: headings, navigation, labels, buttons. Source Serif 4 carries every paragraph. The contrast is categorical rather than stylistic, and it signals that the blog is written, not assembled. No mono: a mono eyebrow on a fractional-CMO site borrows a developer's credibility.
A practical ABM playbook for UK SMEs: pick the right accounts, map buying groups, run LinkedIn plays, use AI safely, and measure pipeline progress. Long-form articles run to 4,000 words, so the reading voice has to hold up over distance — a 68-character measure and a 1.65 line-height do most of that work.
Twenty-five years of senior marketing judgement, scoped to an outcome your business has agreed. Marketing pages are scanned, so they take the structural face.
Settled
Option C is the decision. Serif in articles, sans on marketing pages — the two page types have different jobs, one is read and one is scanned. Shown three ways with the same copy; headings, navigation, buttons and labels are Libre Franklin throughout regardless.
Most SME marketing fails on focus, not effort. The businesses that grow are rarely the ones doing more; they are the ones that decided what to stop doing and then held that line for four quarters.
Reads as written by a person. Best over 4,000 words. Risk: on a services page it can read older, which is the opposite of the brief.
Most SME marketing fails on focus, not effort. The businesses that grow are rarely the ones doing more; they are the ones that decided what to stop doing and then held that line for four quarters.
Unambiguously modern and tidy. Risk: it looks like every other consultancy site, and 4,000-word articles get tiring.
Services, home, case studies and forms — sans.
Blog posts and long-form guides — serif.
The two page types have different jobs. Marketing pages are scanned; articles are read. One token swap on the Prose container, no new fonts.
In practice: body is Libre Franklin; the Prose container that all Markdown lands in is Source Serif 4. Everything on this page below the type scale is already showing the decision.
Above the fold
The hero has three jobs, not one: name the situation, say plainly what this is, and show it. Presence comes from scale, asymmetry and space — not from a fill or a gradient. Where a hero needs a graphic device, it uses the tile motif taken from the logo's own 2×2 mark, which is the one decorative element with brand provenance. Breadcrumbs sit inside the hero on every page except home. Variants A–D sit on paper; E–G are filled, and a filled hero is that page's one fill — nothing else on the screen gets one.
A · Home — statement hero, no image
Strategic marketing · Birmingham
Twenty-five years of senior marketing judgement, scoped to an outcome your business has agreed.
The one place a headline may make a claim this direct. Two actions maximum, and only the first is filled.
B · Service — breadcrumb, standfirst, facts beside the ask
Service
A ten-step process that ends with a plan you can actually staff, not a deck.
FactList in the hero answers "is this for me?" before the buyer scrolls. Same component as the case-study row.
C · Case study — outcome first, proof beside it
Electronics · EV charging · 40 staff
Repositioned around a single category, with inbound enquiries rebuilt to match.
The h1 states the change, not the client name — the buyer is scanning for a situation like theirs.
D · Article — byline, then the answer immediately
ABM
Quick answer
ABM works for an SME when you can name the twenty accounts that matter and reach a buying group inside each. Below twenty, it is just selling. Above two hundred, you do not have the capacity.
The visible Updated date and the answer directly after the byline are the two things that make a page quotable by an answer engine. Both are structural, not decorative.
E · Ink ground — the filled hero, for campaign and landing pages
The Transform Accelerator
A 90-day operating rhythm for SMEs that have run out of road doing everything at once.
On a dark ground the eyebrow uses the lightened red #EE7C6E (6.50:1). Brand red is only 3.47:1 on ink and is large-text-only there — it stays as the button fill, where white on it is 5.08:1.
F · Navy ground — the editorial lane at full bleed
Twelve chapters, one decision framework, and the twenty accounts worth your quarter.
Navy carries the library and guide pages. The action inverts to a white fill with an ink label — a red button here would put both lanes on one block.
G · Image ground — text never sits on the raw photograph
Case study · Versinetic
Repositioned around a single category, with inbound enquiries rebuilt to match.
The diagonal fill above stands in for a photograph. The scrim is a hard requirement, not a styling choice: an ink overlay at 70% minimum, because at 55% white text over a pale photo measures 3.95:1 and fails. At 70% the worst case — a fully white image — still gives 6.50:1. A build test asserts the scrim is present on every image hero.
Width
Every filled hero has both. The background runs edge to edge; the content does not. The h1 stays on the same 1180px measure as the rest of the page, so the page keeps one spine and the eye keeps one left edge to return to. A full-bleed hero whose text also runs to the viewport edge is the thing that reads as a template.
The Transform Accelerator
A 90-day operating rhythm for SMEs that have run out of road doing everything at once.
Variant E, full bleed. Compare the left edge of “Four quarters” with the section heading above it — identical. Only the ink extends past it.
Case study · Versinetic
Repositioned around a single category, with inbound enquiries rebuilt to match.
Variant G, full bleed — where the pattern earns most, because a photograph cropped to a content column looks like a stock image in a box.
An inner container re-applies the same max-width and gutters. The h1 lines up with every other h1 on the site.
width:100vw and calc(50% - 50vw) both include the scrollbar, so they overflow by ~15px and reintroduce horizontal scroll. Full-bleed sections are top-level siblings of the contained wrapper instead.
A full-bleed hero is still that page’s one fill. Two edge-to-edge bands on one page and neither reads as the opening.
Variants A–D have no fill to bleed. Edge-to-edge white on white just removes the border for no gain.
Energy
Every rule so far removes something — space before fill, one fill per view, red three times, no shadows, no icons. A system built only of prohibitions produces a tidy, flat page. These six put the energy back without adding a single colour: the palette is still nine tokens.
1 · Scale contrast — the free one
h1 now runs to 4rem with −0.028em tracking, up from 3.25. Costs nothing chromatically and does more for presence than any decoration. Vague headlines cannot be set this large — which is a useful forcing function on the copy.
2 · The marker — emphasis without a new colour
A red wash at 30% behind one word, occupying the lower 42% of the line box so it reads as a highlighter rather than an underline or a fill. On dark grounds the wash is dropped and the word itself takes the tint (#FFB3A8 — 10.30:1 on ink, 5.04:1 on navy). A highlighter behind text needs a light ground to read as a highlighter; over ink it just goes muddy. One word per page. It is the cheapest way to make a headline feel authored.
3 · Oversized numerals — the ladder made visible
Where the business actually is, evidenced rather than assumed.
The few things worth doing, and what gets stopped.
Execution support against a 90-day rhythm.
Numerals at 5rem in --color-rule, behind the content rather than competing with it. They carry weight without carrying colour. These cards also show device 6 — hover to lift 3px and darken the border, disabled under prefers-reduced-motion.
4 · Duotone imagery — any photograph becomes an Epitomise photograph
A greyscale image with a brand hue composited over it in color blend mode. This is the single biggest change available: it means a stock photograph, a client screenshot and a headshot all read as one system instead of dragging their own colour casts onto a nine-token palette. Use sparingly — case-study evidence screenshots stay true colour, because doctored proof is not proof.
5 · The tile motif, at scale
240px, rotated off the top-right corner at 16% opacity, with one tile held at full red. Derived entirely from the logo, so it can be used generously without inventing anything. One per band.
Above: device 5 sitting on device 6 — a full-bleed ink band.
6 · Page rhythm — the structural fix for flatness
The real reason the page felt flat: every section sat on the same paper ground. A page should alternate — a filled hero, paper for the argument, one dark or navy band to mark a change of subject, paper again, and a closing band. Two or three grounds per page, never five in a row of the same one. This is a page-composition rule rather than a component, and it is the one that does most of the work.
Applied
Every block from the index, composed with the rhythm rule and the six devices — no new components, no new colours. The ground changes five times on the way down, and each change marks a change of subject. Corner labels name the ground so you can read the pace.
Strategic marketing · Birmingham
Twenty-five years of senior marketing judgement, scoped to an outcome your business has agreed.
Trusted by
How we can help
A written plan you can staff, not a deck.
For the person who owns marketing but has never led it.
Hands on the work when the plan needs momentum.
What clients say
He asked the questions our board had been avoiding for two years, then gave us a plan we could actually staff.Managing Director
Industrial services · West Midlands
We stopped three campaigns in the first month. Revenue went up. That still annoys me.Founder
B2B software · 30 staff
The difference is he has run the function, not just advised on it.Operations Director
Electronics manufacturer
Selected work
Electronics · 40 staff
From design consultancy to named EV charging specialist.
Read the case study →Staffing · 12 staff
A category of one in a market that competes on price.
Read the case study →Manufacturing
Twenty accounts named, and a buying group mapped inside each.
Read the case study →Free guides
Eleven practical guides for UK SME leaders. No gate on nine of them.
A 30-minute call is usually enough to tell. No deck, no pitch.
Book a callFive grounds on the way down: ink, paper, navy, paper, image. Each change marks a change of subject — who I am, who trusts me, what clients say, what I have done, what to do next. Same nineteen components, same nine tokens; only the composition changed.
Components
A component is built when it appears in three places doing the same job. Twice is a coincidence. Below: the ones that carry the site. Note there is exactly one card, and it is defined by a full 1px border and internal padding — never an edge strip.
Case study card · the only card
Electronics · 40 staff
Vehicle electrification and charging. Repositioned from a design consultancy to a named EV charging specialist; inbound enquiries rebuilt around a single category.
Read the case study →Key takeaway · replaces "Quick answer" and "Simple answer"
Quick answer
ABM works for an SME when you can name the twenty accounts that matter and reach a buying group inside each. Below twenty, it is just selling. Above two hundred, you do not have the capacity.
Process · the Transform Accelerator
Where the business actually is, evidenced rather than assumed.
The few things worth doing, and what gets stopped.
Execution support against a 90-day operating rhythm.
Measure, correct, and compound what is working.
Numbered markers are used here and nowhere else on the site: the Transform Accelerator is a genuine sequence, so the numbers carry information. Decorative 01 / 02 / 03 on a non-sequence is banned.
Contents rail · auto-generated
FAQ · disclosure list
Enquiry form · one name field
PDF · 1.2 MB · link shown here and emailed.
Editorial note · the navy lane
Insight · September 2026
Navy carries the editorial lane: article categories, the second series in a chart, and informational notes that are not asking for anything. Red is reserved for the ask.
Statement block · replaces ~300 boxed divs
He asked the questions our board had been avoiding for two years, then gave us a plan we could actually staff.
Managing Director · industrial services · West Midlands
A rule above, real space, typographic weight. No quotation-mark graphic, no avatar circle, no card.
Added in review
A second panel found four genuine gaps for a site carrying 29 long-form articles, 16 case studies and 11 resources. Each clears the three-places rule. Pagination, search and pull quotes were proposed and rejected — 29 posts at three a year is one list page for a decade.
Breadcrumb · orientation + BreadcrumbList schema
Most arrivals land from organic search on a deep page. On phone, parent only.
FactList · the case study's missing fifth part
Also carries "PDF · 1.2 MB · 14 pages" on resources and format/length on services.
PostListItem · a list, not a card grid
Pick the right accounts, map buying groups, and measure pipeline progress.
Senior judgement decides what to prioritise and what to stop doing.
29 excerpts in a three-up card grid is ten rows of noise. A list scans.
AuthorBio · E-E-A-T, and the credibility unit
Fractional CMO and founder of Epitomise. Twenty-five years in strategic marketing for UK technology and service businesses.
About SteveSquare photo, never a circle. On a sole-practitioner site this is the social proof.
CTA band · hairline-bounded, never a fill inside a fill
A 30-minute call is usually enough to tell.
Reusable across pages
Counted across all 133 legacy pages, rather than guessed: Testimonials on 55, a free-guides promo on 43, “How we can help” on 37, a quote CTA on 12 — and 54 distinct client logo files. Two of these earn new components; two are arrangements of components that already exist, which is how the set stays small enough to hold in your head.
LogoWall — new component · 54 logos available
Rendered in one tone, not full colour. Fifty-four logos in their own brand colours would put more hues on a page than the entire palette allows — the nine-token rule would be gone in a single block. Uniform optical height rather than uniform box, twelve maximum per wall, chosen for relevance to that page rather than dumped wholesale, and never in a carousel. Tiles are separated rather than gridded into one block, so a part-filled last row leaves no dead cells. Word marks stand in for the real files here.
ResourcePromo — new component · appeared on 43 pages
Free guides
Eleven practical guides for UK SME leaders. No gate on nine of them.
Hairline-bounded, never filled — it is a signpost, not the page’s ask. Distinct from LeadMagnetForm, which is the form itself on the resource’s own page. Naming the file size and format before the click is the honesty rule that also happens to raise the click-through.
TestimonialSet — arrangement, not a new component · 55 pages
He asked the questions our board had been avoiding for two years, then gave us a plan we could actually staff.Managing Director
Industrial services · West Midlands
We stopped three campaigns in the first month. Revenue went up. That still annoys me.Founder
B2B software · 30 staff
The difference is he has run the function, not just advised on it.Operations Director
Electronics manufacturer
Three StatementBlocks on one row. No new component, no avatar circles, no quotation-mark graphic, no carousel. One to three per page; a fourth means none of them is being read. Attribution states role and sector even where the client is unnamed — an anonymous quote with no context is worth less than no quote.
ServiceTriad — arrangement · 37 pages
01
A written plan you can staff, not a deck.
02
For the person who owns marketing but has never led it.
03
Hands on the work when the plan needs momentum.
SectionHeader plus three ServiceCards. The numbering is legitimate here for the same reason it is on the Transform Accelerator: Steve sells these as a ladder, so the order carries meaning. Three is the count — it is a triad on 37 pages because that is the offer, not because three fits nicely.
Motion
Worth doing, narrowly. A single fade-and-rise as a section first enters the viewport reads as considered; anything more reads as a template with a plugin. The instinct to worry was right, but the risk is not where it is usually assumed to be.
Not actually a risk
transform and opacity are composited and never trigger layout, so a fade-and-rise contributes nothing to CLS. Real CLS comes from unsized images, injected banners and font swap — all handled elsewhere in this build.The actual risks
opacity:0 waiting on an observer is invisible to them — and the Quick answer block is the whole AEO play.prefers-reduced-motion is not optional, and a 14px rise is chosen partly because it is small enough to be harmless.The fix that makes it safe — gate the hidden state behind JavaScript itself
/* WRONG — content is invisible to any crawler that does not run JS */ .reveal { opacity: 0; transform: translateY(14px); } /* RIGHT — the hidden state only exists once JS has proven it is running */ html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; } html.js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } }
One line in the <head> adds the class: document.documentElement.classList.add('js'). With JavaScript off — which is how most AI crawlers see the site — the rule never matches, every section renders at full opacity, and the raw HTML is complete. The animation becomes a pure enhancement rather than a precondition for reading the page. A build test asserts no element is hidden without the html.js prefix.
Fade in, rise 14px, 500ms, ease. Once, then the observer unobserves. Nothing else moves on this site.
The hero, the h1 and the first paragraph are painted, not animated. They are the LCP candidates.
A band reveals as one object. Staggering twelve cards individually is the tell that a plugin is doing the thinking.
Long-form body copy is never animated. A reader scrolling a 4,000-word piece should never wait for a paragraph.
Banned outright: parallax, scroll-linked or scroll-scrubbed animation, counters that tick up, anything that loops, anything that moves after it has arrived, and CSS scroll-driven timelines (animation-timeline: view()) — not Baseline, so it would need a fallback path that is more code than the thing it replaces.
Decisions
The three reviewers converged independently on most of the right-hand column. Anything removed here is removed from the site, not merely restyled.
In — 19 components
Out — refused
Implementation
CSS-first configuration. This block is the design language — everything above is generated from it. Utilities are permitted in templates only; a build check fails the deploy if a Markdown content file contains class= or raw HTML, so layout cannot rot.
/* app.css */ @import "tailwindcss"; @theme { /* colour — every value traced to the logo */ --color-ink: #16191D; --color-slate: #5A626B; --color-grey: #8F969E; /* 2.99:1 — never text */ --color-rule: #DDE1E6; --color-paper: #F4F6F8; --color-surface: #FFFFFF; --color-red: #D03024; /* 5.08:1 on white — link-safe */ --color-red-deep: #A62219; /* 7.33:1 — AAA */ --color-navy: #1D4E7C; /* 8.63:1 — secondary, editorial lane */ --color-navy-wash: #EDF2F7; /* the only tinted fill */ /* type */ --font-sans: "Libre Franklin", ui-sans-serif, system-ui, sans-serif; /* body, UI, marketing */ --font-serif: "Source Serif 4", Georgia, serif; /* .prose - articles only */ --text-eyebrow: 0.78125rem; --text-eyebrow--line-height: 1; --text-body: 1.125rem; --text-body--line-height: 1.65; --text-lead: 1.3125rem; --text-lead--line-height: 1.5; /* the measure — prose never exceeds this */ --container-measure: 34rem; --radius-control: 4px; /* figures and images stay square */ --shadow-float: 0 8px 24px -8px rgb(22 25 29 / 0.18); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-ink: #E7EAEE; --color-slate: #9BA4AE; --color-paper: #12151A; --color-surface: #191D24; --color-rule: #2B313A; --color-red: #EE7C6E; --color-red-deep: #C9362B; /* dark button fill: white on this is 5.19:1 */ --color-navy: #7FB3D5; --color-navy-wash: #151E27; } }