/ Runwithfoxesbrand guide
// internal reference

Brand guide

How runwithfoxes.com is made, not what it says. This page is built in its own system, so it doubles as the specimen. If a rule here is broken by the page you are reading, one of them is wrong.

The source of truth is two memory files, not this page: the type system and the ad spec. This is where they are made legible, with the reason under every rule so nobody follows one they cannot explain.

/the_one_idea

Two things held in tension

The brand is bright, colourful, crafted creativity and, at the same time, a techie, low-key, typewriter restraint. Both have to be legible in any encounter with the brand, in whatever format. Neither half on its own is the brand. Type carries the restraint. Colour and craft come in through the artwork, never through the chrome.

The enemy is not dark and it is not quiet. The enemy is dull. Kill Bill is dark and still brilliant because of the gold. A restrained page is still brilliant if the craft is visible.

two layers, kept separate
\Reasons are durable: both-ness legible everywhere, brilliance not brightness, craft visible, colour through artwork not chrome, effectiveness underneath.
\Vehicles are current practice and replaceable: the three faces, the fox, the window, mono and the slash, film references. Any vehicle can be swapped for one that serves the reasons better.

The test for anything new: is both-ness legible, and if not, which half is under-weighted. This keeps the guide from turning into a cage.

/typography

Type system

Three faces, each with one job. Two registers. Two reading sizes. One weight per face. Hierarchy comes from size, position and space, never from making things heavier.

the three faces
Build an unfair advantage
JetBrains Mono 700 / statement register / front doors only
Fox thinking, not hedgehog thinking
Space Grotesk 500 / headline register / h1 through h3, reading pages
The specialists are being replaced by generalists with tools, and the tools are getting very good.
Source Serif 4 / standfirst / 20px / 1.5, once per page under the H1
Everything a person actually reads runs in Source Serif at one size. If a line wants to be smaller than this, it is not reading copy. It becomes the machine, so it changes face, not size.
Source Serif 4 / body / 17px / 1.65
\MENTAL_AVAILABILITY
JetBrains Mono / the machine / 11 to 12px, labels, meta, sources, counts
the rules
\Two registers. Statement (Mono 700, centred, ~54px) is for front doors only, where nobody is reading yet. Reading (Grotesk 500 headline, Source Serif body) is for every page someone stays on. Statement does not travel to a page with a paragraph on it.
\Two reading sizes only. Standfirst 20px, once, under the H1. Body 17px, everything else. No sub-body, no small print, no caption-sized serif.
\Anything smaller than body becomes mono, not small serif. That removes the when-do-I-drop-a-size question. You do not. You change face.
\One weight per face. Mono 400 (700 for the one statement headline). Grotesk 500. Serif 400, with 600 for a genuine inline emphasis inside a sentence, never a whole line or a heading.

Grotesk 500 was chosen over 600, which read too insistent over long copy, and over 300, which went weak at size. 500 holds a page without shouting. Nothing is bolded for emphasis, because heavy-everything is the drift this rule exists to stop.

/measure

Copy runs the full width of its container

If there is empty space to the right of a paragraph and nothing is in it, that is the bug: four lines and a dead column instead of two lines across. Body copy is never capped at a 62 to 66 character measure. Standard typographic advice says otherwise here, and it loses.

\The only exception is a real two-column grid with something actually in the other column, almost always the fox. It works either side. That is a grid column, not a max-width on the text.

A cap on the text is the bug; a grid column is legitimate. A hook already polices the cap, but the hook cannot see intent, so the rule is stated plainly here.

/colour

Colour palette

the palette
#3A7CA5
Sky blue
--orange (misnamed, see below)
The one accent. Links, hover, active nav, stats, the slash.
#1A3A4E
Deep sky
--charcoal
Chrome only. Dark bars, chat send button. A deep blue, not black.
#F47521
Logo orange
--logo-orange
The word Run in the logo, and nothing else.
#F7EAD9
Cream
--color-cream
Warm highlight, used sparingly.
neutrals
#FAFAF8
Background
--bg
Page background. Warm off-white. The fox only appears here.
#1D1B1B
Text
--text
Body text. Near-black, not pure black.
#8A8A85
Text muted
--text-muted
Meta, labels, nav defaults.
#E0E0DC
Border
--border
Dividers, thin lines.
the rules
\Colour enters through the artwork, not the chrome. The chrome (nav, dividers, labels, rules) stays quiet. A photo, a scene, a slide can be as loud as the idea needs.
\Sky blue is the only loud colour in the chrome. No accent beyond it.
\Content sits on cream. Never put writing on the blue. Deep sky is chrome only.
\Never pure black or pure white as a background.
\Orange (#F47521) is the logo word Run only. It is not a content colour.

Build note, not a colour decision: the CSS variable --orange holds the blue #3A7CA5, a leftover from a rebrand where the value changed and the name did not. The accent is genuinely sky blue. Use --logo-orange for the real orange. Renaming --orange is on the backlog; until then, do not read the name as the truth.

/texture

Dot grid background

0.8px dots · 28px grid · 0.4 opacity · #d0d0cc
\Fixed, full viewport, pointer-events none, behind everything. It appears on every cream page. A defining texture, not decoration.
\On deep-sky sections the dots switch to sky blue at 0.08 opacity.
/section_labels

Section labels and the terminal aesthetic

The whole site borrows from developer tools and terminals. It is a brand decision, not decoration: it signals someone who builds things, not just talks about them. This is the restraint half made visible.

/toolsModules menu
/previousCase studies
\build_it_for_youEngagement CTA
/the_one_ideaA section anchor
#aboutIn-page anchor
\ 54 chaptersMeta item
\JetBrains Mono, 12px, letter-spacing 2px, uppercase.
\Forward slashes, hashes, backslashes and file extensions. Sentence-level meaning, machine styling.
/cards_and_curves

Cards, chrome, and where curves are allowed

This is the one rule that changed. The site is not flat-everywhere anymore, and it is not rounded-everywhere either. The line is between chrome and artwork.

chrome stays square
\01
Square corners
Nav, dividers, section rows, buttons, labels, tables, content cards. All sharp. This is the typewriter-restraint half.
\02
Subtle hover
Background warms to #F5F5F0, or colour shifts to sky blue. No scale, no dramatic transform. translateX for slides, never padding.
the agent windows are artwork, and they carry the soft corners of the software they depict
Campaign Agent
Running the batch now.
A window that shows software working borrows the macOS window corner, the rounded chat bubble, the pill badge, because that is what real software looks like. The radius lives inside the window. The page around it stays square.
\Rounded corners are allowed only on the agent-window artwork. The window frame ~9 to 15px, chat bubbles ~13px, pills fully round.
\The three window dots are real macOS traffic lights: red #ff5f57, amber #febc2e, green #28c840. House style, pinned in the locked agent-card template (card-core.css). They are the one place the depicted-software world shows through in colour, so they are exempt from no-accent-beyond-sky-blue. Do not recolour them to blue.

Same logic as a borrowed typeface: a piece of artwork may borrow from the world it depicts, and it stays ours because it lives inside our frame. Chrome is always quiet; artwork can be as loud, or as soft, as the idea needs. A nav bar never rounds. A depicted app always does.

/buttons

Buttons and CTAs

\Primary: sky blue background, white text, hover darkens to #2F6688. Square.
\Outline: transparent, 1px sky blue border, hover border to text colour. Square.
\Link: sky blue text, hover opacity 0.7.
\All buttons: JetBrains Mono, 12px, letter-spacing 2px, uppercase.
\The \\ prefix (\\build it for you) is the engagement-CTA syntax. Blue, mono.
/fox

The fox

The fox is the distinctive asset. It carries the personality that keeps everything ours, even when the world around it changes. It is the character in the costume.

\Transparent PNGs with their soft shadows preserved. Only ever on cream, never on the blue.
\Many poses: holding the book, sitting, bored, arms folded, walking away. The fox has attitude. Grumpy, slightly bored. Not cute, not corporate.
\On the homepage the fox drives the scroll: the film shrinks and moves down-right as the agent windows assemble. On reading pages it sits in its own grid column, either side, and is the only reason to split the copy into two columns.
\No stock photography, ever.
/isa

Isa

Isa is the site's AI, and a brand surface in her own right. She is now a draggable window, not a bubble stuck to the corner: rounded window chrome with three working controls, grab her almost anywhere and move her aside. She belongs to the agent-window family, so she rounds for the same reason they do.

\Do not change Isa or her rules without Paul's say-so. She is a guarded surface.
\Behaviour: opens herself after a beat on desktop only (she waits for the homepage hero to be scrolled past). On mobile the bubble stays and the visitor taps it. Once dismissed she stays closed for the visit, and reopens next visit.
\On /contact she opens booking-led instead of book-led, with her own dismissal memory.
\Her voice is a personality, not a tone. Do not improvise her. Load her real system prompt (src/lib/chat-system-prompt.ts) before writing a word as Isa.
/homepage

The homepage and the agents hero

The homepage is the fullest statement of both-ness. It opens on the statement register (a mono headline, almost nothing else), then a fox film shrinks and slides down-right on scroll while five draggable agent windows assemble around the dominant Campaign Agent. The restraint is the type and the chrome; the life is the film, the fox, and the working software in the windows.

\The hero lives entirely in AgentsHero.tsx so it can be swapped in one move. Its styles are the ah- block in globals.css.
\Never put overflow-x: hidden on html, body or .page-wrapper. It silently kills the sticky scroll and the hero renders nothing. Use overflow-x: clip.
\Below the hero: bio and contact strip, live Substack carousel, the seven-module nested accordion, testimonials, book block. Mobile is a relayout of the same markup, never a second version and never a crop.
\Do not touch the nav, the hero or Isa without Paul's explicit say-so.
/motion

Motion

Agents assemble
The homepage signature. Fox film shrinks and moves on scroll while agent windows slide into place around the Campaign Agent.
Isa window
Scales and fades in. Draggable. Slides up from the bottom on mobile.
Accordion
Click to expand a module, then a tool. No auto-advance.
Fade-in
Scroll-triggered, translateY(24px) to 0, opacity 0 to 1. Subtle and sparse.
\Only animate transform and opacity. Never padding, height, letter-spacing, or anything that triggers layout.
\Clean ease-out, no bounce or elastic. 0.3s default, 0.2s for the snappier chat.
\Always include a prefers-reduced-motion block that disables animation.
\Three or four purposeful moments per page, not a theme park. A workflow or flow diagram always animates.
/blockquotes

Pull quotes

This isn't about AI replacing marketers. It's about marketers who use AI working alongside those who don't.

\Left border 2px sky blue, always. Set in the reading register, Source Serif, italic, standfirst size.
\Never on the blue. The quote is content; it sits on cream.
/art_direction

Anton and borrowed faces

Anton is not in the three-face reading system. It is the art-directed voice for ads, decks and anywhere the brand makes a loud creative statement. That is artwork, so it lives by different rules to the chrome.

\A piece of artwork may borrow a typeface from the world it depicts. The spaced serif on a film-poster ad is correct precisely because it is not our font. Rounders can look like Rounders.
\The borrowed face lives inside the artwork only. The chrome around it (logo, caption, frame) stays in our voice. Fox in a costume: the character keeps it ours while the world changes.
\The dial: chrome is always quiet, artwork can be as loud as the idea needs. A deck can run gold-on-black for ten slides. A nav bar never can.
/writing

Writing style

Full spec lives in the writing-voice skill. The short version: pub voice, peer to peer, never staccato. Evidence before opinion.

voice
\Conversational, peer to peer, like two mates in a pub. We more than you. Never most teams.
\Quality and speed are the two themes running through everything.
\AI is always an opportunity, never a replacement or a threat.
\Start specific, not with a thesis. No neat endings, no bow, no moral. Just stop.
hard bans
\No em dashes. A comma or a full stop.
\No corporate words: leverage, unlock, activation, ecosystem, synergy, reimagine, future-proof, over-index.
\No invented specifics. If it was not given, do not make it up.
\Sentence case for headings. Never Title Case.
/never_do_this

What not to do

✗No rounded corners on chrome. Rounded corners belong only to the agent-window artwork, which rounds because it depicts software.
✗No mono body on a reading page. Body is Source Serif. Mono is for the machine (labels, meta), not for paragraphs someone reads.
✗No bolding for emphasis, and no heading heavier than its face's one weight. Hierarchy is size and space.
✗No small serif. Anything smaller than body becomes mono.
✗No capped text measure. Copy runs the full container width unless a real second column holds something.
✗No writing on the blue. Content on cream, deep sky is chrome only.
✗No colour in the chrome beyond sky blue. Colour enters through the artwork.
✗No pure black or pure white backgrounds. No gradients in UI chrome.
✗No stock photography. No images with visible backgrounds.
✗No Title Case in headings. No em dashes. No corporate jargon.
✗No hover-only content. Touch users cannot hover, so use tap patterns.
✗No animating layout properties, and no skipping prefers-reduced-motion.