STRATEGY IS FOLKLORE.I SHIP OPERATING SYSTEMS.

THE REFRAIN

COLOR SYSTEM

Seven brand colors. Two operational accents (neon green for action, neon purple for brand). Black foundation, off-white text. Two greys for hierarchy. Danger red only on legal and regulatory pages. Click a swatch to copy the hex.

TYPOGRAPHY

Four typefaces. Display (Black Ops One) for every heading. Mono (Space Mono) for everything else. Hand (Permanent Marker) for one rotated accent per section. Sans (Space Grotesk) as the long-form fallback. Never use Google's default sans serifs.

VOICE & TONE

Six rules. Apply to every surface: homepage hero, blog posts, CTA copy, email subject lines, social posts. A voice violation is brand drift; this section is the merge gate.

HERO PATTERN (THE FLETCH FOUR-LINE)

Every above-fold hero uses these four lines, in this order. Eyebrow names the category. H1 is the refrain. Sub places the offer in context. Eyebrow2 sharpens with three negatives and one positive.

COMPONENT VOCABULARY

The visual vocabulary of the TFS (Tactical Field Scrapbook / Brutalist) language. Every page mixes these six elements in some combination. Adding a new element requires updating this section first.

LOGO & LOCKUP

MARKETING UPGRADE

USAGE RULES

• ›Wordmark + icon lockup is the default. Icon-only variant for favicon and PWA.
• ›Wordmark renders in #00ff00 with neon glow (text-shadow 0 0 10px #00ff00) on dark backgrounds only.
• ›Letter-spacing: 0.15em (tracking-widest). Font weight: font-black.
• ›Never use the wordmark in lowercase. Never combine with other display fonts.
• ›Favicon set: /favicon.ico, /favicon-192.png, /favicon-512.png (PWA maskable).

CTA PATTERNS

ENTITY GRAPH (SEO / AEO / GEO)

The brand operates as two linked schema.org entities: a Person (the operator) and an Organization (the brand). Both share a cross-referenced sameAs graph. Any new platform presence must be added to both arrays and shipped on the same commit.

When adding a new platform (e.g., Substack, Mastodon, Wikidata Q-number, YouTube channel), update: client/index.html Person.sameAs, client/index.html Organization.sameAs, client/index.html LocalBusiness.sameAs, /client/public/.well-known/agent.json, /client/public/humans.txt, /client/public/llms.txt, /client/public/llms-full.txt, AND this brandbook. All in one PR.

SEO CHECKLIST (PER PAGE)

Every indexable page MUST satisfy this checklist. The seo:lint script enforces it in CI. Pages that fail are blocked from merge.

• ▸Exactly one <h1>, refrain-flavoured or page-specific.
• ▸<title> ≤60 chars, brand at end (| MarketingUpgrade.pro).
• ▸meta description 120-160 chars, with a concrete hook + implicit CTA.
• ▸Canonical URL: absolute, on www.
• ▸Open Graph + Twitter card tags (og:image min 1200×630).
• ▸Visible byline on every MOFU/BOFU page (Joris van Huët, Updated YYYY-MM-DD).
• ▸3+ internal links out, 2+ internal links in from relevant pages.
• ▸One server-rendered CTA in initial HTML — no JS-only modals.
• ▸JSON-LD: BreadcrumbList + at least one page-specific schema (Article, Service, FAQPage, DefinedTerm).
• ▸Core content + internal links present in rendered HTML (verify with JS disabled).

PRICING & ENGAGEMENT TIERS

From €5,000 to €25,000 per month, set by how much of the function I take on and how many days a week that takes; €25,000 is a full mandate with P&L ownership. Monthly cycles with a 30-day exit clause.

FORBIDDEN — AUTO-REJECT ON SIGHT

• ✕Words: 'innovative', 'results-driven', 'world-class', 'best-in-class', 'cutting-edge', 'thought leader', 'synergy', 'unlock', 'unleash'.
• ✕Phrases: 'Trusted by [logos]' without proof. 'Get in touch.' 'Click here.' 'Learn more.'
• ✕Visuals: stock photography of a person on a laptop. Skyline hero shots. Generic blue corporate gradient.
• ✕Em-dashes ( — ). Use comma, colon, or sentence split.
• ✕Soft 'we' sentences with no ICP. If you cannot replace 'we' with 'I' or with the ICP name, the sentence is meaningless.
• ✕JS-only CTAs (modals, popups) without a server-rendered fallback link.
• ✕Generic Google sans serifs (Roboto, Open Sans, Lato). The TFS stack is fixed.
• ✕Rounded corners on buttons/cards. TFS --radius is 0.
• ✕Any color outside the seven brand colors. Adding a new color requires a brandbook update first.

TINTS & SHADES — FULL SCALE

Every brand color exposes a 50-950 step scale for nuanced UI usage (hover states, alert backgrounds, gradient stops, data visualization). The 500 step is the canonical hex. Lower numbers are lighter; higher numbers are darker. Generated programmatically; OKLCH-tuned source of truth lives in client/src/index.css.

CONTRAST MATRIX — WCAG 2.2 AA + AAA

Every brand-color foreground × background pairing measured against WCAG 2.2. AA threshold: 4.5:1 for normal text, 3:1 for large text (18pt regular or 14pt bold). AAA: 7:1 normal / 4.5:1 large. Pairings marked “Fail” must not be used for text. Use them for decorative-only surfaces (borders, dividers, icons with adjacent labels).

N = normal text grade · L = large text grade. AAA = ideal, AA = minimum, Fail = decorative only.

TYPE SCALE

The full responsive type ramp, mobile-first. All sizes use rem so they respect user font-size preferences. Line heights are tuned per step; display sizes are tight (0.9-1.1) while body sits at 1.6 for long-form readability.

SPACING SYSTEM (4PT GRID)

Everything in the layout uses 4px increments. Tailwind's default scale maps cleanly: spacing-1 = 4px, spacing-2 = 8px, spacing-4 = 16px. Component padding, gap, and margin must come from this scale. Adding a one-off value (e.g., 13px) requires a design-token RFC.

ICONOGRAPHY

Lucide React. Stroke-based, single weight (1.5px at 24px size). Always pair with a text label for accessibility. Never use an icon alone as a button without an aria-label.

MOTION & ANIMATION

Motion serves communication, not decoration. Hero text uses staggered letter reveal with a cinematic ease curve. Scroll-driven parallax for hero sections only. Always respect prefers-reduced-motion.

ACCESSIBILITY: WORKING RULES

No formal external accessibility standard has been set. Two working rules are enforced in the codebase and should hold: every image carries a descriptive alt attribute, and arcade green (#00ff00) is used only on obsidian surfaces, where it clears 15:1. On the light canvas the accent is the darkened pink (#9b2fa3), because the green fails contrast there. The list below borrows from WCAG 2.2 as targets for new pages. It is a set of goals, not a claim of conformance.

DESIGN TOKENS — EXPORT

Canonical token export. CSS variables (drop into any project), Tailwind config snippet, and a JSON payload for Figma / Style Dictionary. Source of truth: client/src/index.css. When tokens change, update there first, then this brandbook.

:root {
  /* color */
  --green-500: #00ff00;
  --purple-500: #e386e9;
  --red-500: #ff0000;
  --white: #ffffff;
  --off-white: #f2f2f2;
  --grey-50: #f0f0f0;
  --grey-60: #999999;
  --grey-80: #cccccc;
  --bg-base: #000000;
  --bg-card: #0a0a0a;

  /* fonts */
  --font-display: "Black Ops One", system-ui;
  --font-mono: "Space Mono", monospace;
  --font-hand: "Permanent Marker", cursive;
  --font-sans: "Space Grotesk", system-ui, sans-serif;

  /* radius */
  --radius: 0;

  /* motion */
  --ease-cinematic: cubic-bezier(.25,.46,.45,.94);
  --ease-snap: cubic-bezier(.16,1,.3,1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
}

{
  "color": {
    "green":   { "500": "#00ff00" },
    "purple":  { "500": "#e386e9" },
    "red":     { "500": "#ff0000" },
    "neutral": {
      "0":   "#000000",
      "10":  "#0a0a0a",
      "60":  "#999999",
      "80":  "#cccccc",
      "95":  "#f2f2f2",
      "100": "#ffffff"
    }
  },
  "font": {
    "display": "Black Ops One",
    "mono":    "Space Mono",
    "hand":    "Permanent Marker",
    "sans":    "Space Grotesk"
  },
  "radius": { "default": 0 },
  "motion": {
    "ease": {
      "cinematic": "cubic-bezier(.25,.46,.45,.94)",
      "snap":      "cubic-bezier(.16,1,.3,1)"
    },
    "duration": {
      "fast":  "150ms",
      "base":  "300ms",
      "slow":  "600ms"
    }
  }
}

ASSET LIBRARY

Canonical hosted assets. Use the absolute URL; never duplicate or re-host. Adding a new asset requires landing the file in client/public/images and registering it here.

GOVERNANCE — HOW TO CHANGE ANYTHING

The brandbook is the source of truth. Changes to colors, typography, voice, or component vocabulary require a documented RFC. Quick fixes (typos, formatting) can ship freely.

CHANGELOG