/ Runwithfoxesbrand guide
// internal reference

Brand guide

Everything you need to keep runwithfoxes.com looking and sounding like itself. Colours, fonts, components, writing rules, and the things we never do.

/colours

Colour palette

Primary
#F47521
Orange
--orange
Primary accent. CTAs, links, hover states, stats, active nav
#E06A1A
Orange hover
n/a
Button hover state
#355E4C
Charcoal
--charcoal
Dark sections, bottom bar, chat send button. Deep green-tinted dark, not black
#F7EAD9
Cream
--cream
Warm highlight. Used sparingly
Neutrals
#FAFAF8
Background
--bg
Page background. Warm off-white
#1D1B1B
Text
--text
Primary body text. Near-black
#8A8A85
Text muted
--text-muted
Secondary text, labels, nav defaults
#E0E0DC
Border
--border
Dividers, card borders, subtle lines
#F5F5F0
Card hover
n/a
Card background on hover
Rules
\\Orange is the only loud colour. The rest is warm neutrals.
\\Charcoal is NOT black. It's a dark forest green (#355E4C).
\\Never use pure black (#000) or pure white (#FFF) as backgrounds.
\\No additional accent colours. No blues, reds, greens in content.
\\White text only on charcoal backgrounds and orange buttons.
/typography

Type system

The Fox Advantage
Space Groteskclamp(48px, 8vw, 96px) / 300 / -2pxHero heading
Fox thinking, not hedgehog thinking
Space Groteskclamp(36px, 5vw, 64px) / 300 / -1pxSection titles
Mental Availability in action
Space Grotesk24px / 400 / -0.5pxPart and project names
The marketing department autopsy report
Space Grotesk18px / 400 / -0.3pxChapter titles in lists
The marketing department as we knew it is gone. The stack collapsed.
JetBrains Mono0.9375rem / 300 / 0Chapter prose, body copy
This book started as notes to myself. Then it became a Substack.
JetBrains Mono0.875rem / 300 / 0About text, descriptions
GET THE BOOK
JetBrains Mono12px / 400 / 2pxButtons (uppercase)
\MENTAL_AVAILABILITY
JetBrains Mono11px / 400 / 2pxLabels, tags (uppercase)
Rules
\\Headings are always light weight (300). Never bold.
\\Body copy is light weight (300). Strong tags use 500.
\\Negative letter-spacing on large headings, positive on small uppercase labels.
\\Sentence case for all headings. Never Title Case.
\\JetBrains Mono is the default body font. Monospace is the brand.
/texture

Dot grid background

0.8px dots · 28px grid · 0.4 opacity · #d0d0cc
charcoal variant · orange dots at 0.08 opacity
\\Fixed position, full viewport, pointer-events none, z-index 0.
\\This dot grid appears on every page. It's a defining visual element.
\\On charcoal sections, dots switch to orange at 0.08 opacity.
/section_labels

Section labels

// a book by paul dervanHero label
/what_collapsedAbout section
/structureParts section
/chapters.mdChapters section
/projectsProjects section
/author.txtAuthor section
/get_the_bookGate/signup section
\part_01Part numbering
\\JetBrains Mono, 12px, weight 400, letter-spacing 2px, uppercase.
\\Use forward slashes, hashtags, backslashes, and file extensions.
\\This terminal aesthetic is core to the brand identity.
/interactions

Cards and hover effects

Part and project cards
\01
What just collapsed
Hover this card to see the background shift to #F5F5F0
\02
Better together
Subtle. No dramatic transforms. Just a gentle warmth.
\\Background shifts from #FAFAF8 to #F5F5F0 on hover.
\\No border-radius. Sharp corners throughout.
\\All transitions use 0.3s duration.
Chapter list items
01Hover to see the slide and colour shift→
02Title turns orange, arrow fades in→
\\Hover slides content right (translateX 12px, not padding-left).
\\Title colour transitions to orange.
\\Arrow (initially opacity 0) fades in as orange.
Hover philosophy
\\Subtle. No dramatic transforms, no scale changes.
\\Colour shift to orange is the primary hover pattern.
\\Use translateX for slide effects, not padding shifts (avoids layout recalculation).
\\'Read more →' links: opacity or translateX shift on hover (not letter-spacing, which triggers layout).
\\Link hover: opacity drops to 0.7.
\\Never hide content behind hover-only. Touch users can't hover. Use click/tap reveal patterns instead.
/buttons

Buttons and CTAs

\\Primary: orange bg (#F47521), white text, hover darkens to #E06A1A.
\\Outline: transparent bg, 1px orange border, hover border shifts to text colour.
\\Link: orange text, hover opacity 0.7.
\\All buttons: JetBrains Mono, 12px, weight 400, letter-spacing 2px, uppercase.
\\No border-radius. Sharp corners.
/fox_imagery

Fox placement

Hero
340px width
Right side of grid
Double drop-shadow (24px + 8px)
Mobile: 240px
Gate section
260px width
Right column
Opacity 0.9
Mobile: 160px
Chapter pages
180px, float right
Negative margin (-60px)
shape-outside: margin-box
Mobile: 140px, centred
\\All foxes are transparent PNGs with preserved semi-transparent shadows.
\\Multiple poses: holding book, sitting, bored, arms folded, walking away.
\\The fox has attitude. Grumpy, slightly bored. Not cute, not corporate.
\\No stock photography. Ever.
/motion

Animations

Chat bubble
Scales from 0 to 1 with opacity. 0.4s ease-out. Hover: scale 1.08, shadow expands.
Chat panel
Scale 0.9→1, translateY 10px→0. 0.25s. Mobile: slides up from bottom.
Chapter accordion
Click to expand/collapse. First group open by default. +/− indicator.
SVG chart
Stroke-dashoffset animation for line drawing effect.
Fade-in
Scroll-triggered. translateY(24px) → 0, opacity 0 → 1. Subtle and sparse.
Fox imagery
The fox is the distinctive element. Use fox poses, placement, and attitude to create moments no other site has.
\\Global transition default: 0.3s on all properties.
\\Chat uses 0.2s for snappier feel.
\\No bouncy or elastic easing. Clean ease-out only.
\\Only animate transform and opacity. Never padding, letter-spacing, height, or other layout-triggering properties.
\\Always respect prefers-reduced-motion. Include @media (prefers-reduced-motion: reduce) block that disables all animation.
\\Aim for 3-4 purposeful interactive moments per page, not more. Each one should help the reader understand the content.
/blockquotes

Blockquotes and pull quotes

The marketing department as we knew it is gone. The stack collapsed. The specialists are being replaced by generalists with tools.

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

\\Left border: 2px solid orange. Always.
\\In-chapter: JetBrains Mono, muted text, italic.
\\Pull quotes: Space Grotesk, 17px, weight 300, italic.
/aesthetic

The code/terminal aesthetic

The entire site borrows from developer tools and terminals. This is a core brand decision, not decoration. It signals "this person builds things, not just talks about them."

// Navigation uses file paths and commands
#about    chapters.md    /projects    author.txt

// Section labels use terminal prefixes
/what_collapsed    /structure    /get_the_book

// Part numbers are zero-padded with backslash
\part_01    \part_02    \part_03

// Project tags use backslash prefix
\mental_availability    \brand    \fame_strategy

// Meta items use backslash
\ 54 chapters    \ 4 parts    \ free to read
/writing_style

Writing style

Voice
\\Conversational, peer-to-peer. Like two mates in a pub.
\\Direct. Short sentences mixed with longer ones. Uneven rhythm.
\\Irish inflection where it fits: "deadly", "hoover", "mate". Nothing forced.
\\Uses "we" more than "you". Never "most people".
\\Evidence and observation first, judgement after.
Opening recipe
\\Start with a small lived moment: a meeting, a phone call, a queue.
\\One odd detail: a brand name, a timestamp, a place like Carrickmines.
\\Short verdict line. Then the turn. Then the bigger point.
\\No neat endings. No bow, no lesson, no moral. Just stop.
Hard bans
\\No em dashes. Use a comma or full stop.
\\No corporate words: future-proof, over-index, activation, ecosystem, leverage, unlock, synergy, reimagine.
\\No invented specifics. If it wasn't given, don't make it up.
\\Sentence case for all headings. Never Title Case.
Examples from the site
Hero
How to thrive in marketing because of AI, not despite it. 54 short chapters. No jargon. No fluff.
About
The marketing department as we knew it is gone. The stack collapsed. The specialists are being replaced by generalists with tools.
Part description
The reps. The poking. The building. The five behaviour shifts that separate foxes from hedgehogs.
Author bio
Marketing leader. Currently figuring out what happens when AI collapses the marketing stack, one experiment at a time.
Gate CTA
Parts 1 and 2 are live now. Drop your email and we'll send the rest when it's ready.
/responsive

Responsive breakpoints

Desktop
Full layout
2-column grids
Visible top nav
Centred bottom bar
Container: 48px padding
max 768px
Single column
Top nav hidden
Full-width bottom bar
Container: 24px padding
Sections: 80px vertical
max 380px
Container: 16px padding
Hero fox: 180px
Chapter fox: 110px
Smaller fonts
Tighter bar padding
/never_do_this

What not to do

✕No rounded corners on cards, buttons, or panels
✕No gradients in UI elements
✕No heavy shadows
✕No decorative icons or emoji
✕No bold heading weights (300 or 400 only)
✕No pure black (#000) or pure white (#FFF) backgrounds
✕No additional accent colours beyond orange
✕No images with visible backgrounds
✕No stock photography
✕No Title Case in headings
✕No em dashes in copy
✕No corporate jargon
✕No hover-only content. Touch users can't hover. Use click/tap patterns
✕No animating layout properties (padding, letter-spacing, height). Use transform and opacity only
✕No skipping prefers-reduced-motion. Always include the media query
✕No animation overload. 3-4 purposeful moments per page, not a theme park
Can I help?