STRATEGY IS FOLKLORE.I SHIP OPERATING SYSTEMS.

THE REFRAIN

COLOR SYSTEM

Six brand colors. Two operational accents (neon green for action, neon purple for brand). Black foundation, off-white text. Three greys for hierarchy. Danger red only on legal/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. Voice violations are the single most common 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

Nine monthly tiers from €5,000 to €25,000. Each tier adds scope on top of the one below. The brandbook codifies them so quotations, contracts, blog CTAs, and vertical pages stay in sync.

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 — WCAG 2.2 AA TARGET

Every shipped page must meet WCAG 2.2 Level AA. We do not target AAA at color, because the brand palette is built on saturated neon — but we hit AAA on text-on-card pairings (white on #0a0a0a) which is where the long-form content lives.

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