{ "name": "mikee.pro", "version": "1.0", "published": "2026-10-06", "url": "https://mikee.pro/brand/", "guide": "https://mikee.pro/brand/", "tokens": "https://mikee.pro/assets/css/tokens.css", "styles": "https://mikee.pro/assets/css/site.css", "fonts": "https://mikee.pro/assets/fonts/", "positioning": "For companies whose marketing numbers do not agree with each other, mikee.pro is the human-operated marketing system they can be held to - one named operator sets the measurement up and runs it, and every published figure carries its own evidence.", "oneIdea": "Provenance", "tagline": "Marketing you can check.", "descriptor": "Human-operated marketing systems.", "operatorModel": "Every engagement is set up and operated by Mikee Shattuck personally. There is no account layer, no software licence to a system nobody opens, and no automation left running unattended.", "theRule": "If a number cannot name its source and its window, it does not go in front of a decision.", "palette": [ { "token": "--paper", "hex": "#f1f4f1", "role": "" }, { "token": "--panel", "hex": "#fafbfa", "role": "" }, { "token": "--panel-2", "hex": "#e9eee9", "role": "", "contrast": { "--paper": { "ratio": 1.06, "aa_text": false, "aa_large": false }, "--panel": { "ratio": 1.13, "aa_text": false, "aa_large": false }, "--pine-deep": { "ratio": 11.62, "aa_text": true, "aa_large": true } } }, { "token": "--ink", "hex": "#17252a", "role": "", "contrast": { "--paper": { "ratio": 14.2, "aa_text": true, "aa_large": true }, "--panel": { "ratio": 15.17, "aa_text": true, "aa_large": true }, "--pine-deep": { "ratio": 1.15, "aa_text": false, "aa_large": false } } }, { "token": "--ink-2", "hex": "#2c3b41", "role": "", "contrast": { "--paper": { "ratio": 10.48, "aa_text": true, "aa_large": true }, "--panel": { "ratio": 11.19, "aa_text": true, "aa_large": true }, "--pine-deep": { "ratio": 1.18, "aa_text": false, "aa_large": false } } }, { "token": "--muted", "hex": "#55646a", "role": "", "contrast": { "--paper": { "ratio": 5.55, "aa_text": true, "aa_large": true }, "--panel": { "ratio": 5.92, "aa_text": true, "aa_large": true }, "--pine-deep": { "ratio": 2.22, "aa_text": false, "aa_large": false } } }, { "token": "--muted-2", "hex": "#5f6e72", "role": "", "contrast": { "--paper": { "ratio": 4.79, "aa_text": true, "aa_large": true }, "--panel": { "ratio": 5.11, "aa_text": true, "aa_large": true }, "--pine-deep": { "ratio": 2.57, "aa_text": false, "aa_large": false } } }, { "token": "--rule", "hex": "#cdd6d2", "role": "", "contrast": { "--paper": { "ratio": 1.34, "aa_text": false, "aa_large": false }, "--panel": { "ratio": 1.43, "aa_text": false, "aa_large": false }, "--pine-deep": { "ratio": 9.2, "aa_text": true, "aa_large": true } } }, { "token": "--rule-soft", "hex": "#dfe5e1", "role": "", "contrast": { "--paper": { "ratio": 1.15, "aa_text": false, "aa_large": false }, "--panel": { "ratio": 1.23, "aa_text": false, "aa_large": false }, "--pine-deep": { "ratio": 10.68, "aa_text": true, "aa_large": true } } }, { "token": "--pine", "hex": "#2b5a4c", "role": "", "contrast": { "--paper": { "ratio": 7.1, "aa_text": true, "aa_large": true }, "--panel": { "ratio": 7.58, "aa_text": true, "aa_large": true }, "--pine-deep": { "ratio": 1.74, "aa_text": false, "aa_large": false } } }, { "token": "--pine-deep", "hex": "#14332b", "role": "" }, { "token": "--pine-tint", "hex": "#e2ebe6", "role": "", "contrast": { "--paper": { "ratio": 1.1, "aa_text": false, "aa_large": false }, "--panel": { "ratio": 1.17, "aa_text": false, "aa_large": false }, "--pine-deep": { "ratio": 11.22, "aa_text": true, "aa_large": true } } }, { "token": "--pine-bright", "hex": "#3d7d67", "role": "", "contrast": { "--paper": { "ratio": 4.38, "aa_text": false, "aa_large": true }, "--panel": { "ratio": 4.68, "aa_text": true, "aa_large": true }, "--pine-deep": { "ratio": 2.81, "aa_text": false, "aa_large": false } } }, { "token": "--live", "hex": "#1e7f5c", "role": "state: running / verified", "contrast": { "--paper": { "ratio": 4.46, "aa_text": false, "aa_large": true }, "--panel": { "ratio": 4.77, "aa_text": true, "aa_large": true }, "--pine-deep": { "ratio": 2.76, "aa_text": false, "aa_large": false } } }, { "token": "--flag", "hex": "#9a6b14", "role": "state: attention / being fixed", "contrast": { "--paper": { "ratio": 4.22, "aa_text": false, "aa_large": true }, "--panel": { "ratio": 4.51, "aa_text": true, "aa_large": true }, "--pine-deep": { "ratio": 2.92, "aa_text": false, "aa_large": false } } }, { "token": "--hold", "hex": "#8a3b2a", "role": "state: failed / not joined", "contrast": { "--paper": { "ratio": 6.92, "aa_text": true, "aa_large": true }, "--panel": { "ratio": 7.39, "aa_text": true, "aa_large": true }, "--pine-deep": { "ratio": 1.78, "aa_text": false, "aa_large": false } } }, { "token": "--on-ink", "hex": "#eef2ef", "role": "", "contrast": { "--paper": { "ratio": 1.02, "aa_text": false, "aa_large": false }, "--panel": { "ratio": 1.09, "aa_text": false, "aa_large": false }, "--pine-deep": { "ratio": 12.08, "aa_text": true, "aa_large": true } } }, { "token": "--on-ink-muted", "hex": "#9db0aa", "role": "", "contrast": { "--paper": { "ratio": 2.05, "aa_text": false, "aa_large": false }, "--panel": { "ratio": 2.19, "aa_text": false, "aa_large": false }, "--pine-deep": { "ratio": 6.0, "aa_text": true, "aa_large": true } } } ], "paletteNotes": { "oneAccent": "--pine is the only accent. Nothing else is decorative colour.", "statusColoursAreFunctional": "--live, --flag and --hold always mean a state. They are never used for emphasis.", "quietGreyIsDeliberate": "--muted-2 is #5f6e72 because the quieter #7b8a8d measured 3.23:1 on paper, below AA for the 11px text it carries." }, "typefaces": [ { "family": "Archivo", "weight": "400 800", "file": "/assets/fonts/archivo-latin.woff2" }, { "family": "Archivo Print Condensed", "weight": "800", "file": "/assets/fonts/archivo-print-condensed-800.woff2" }, { "family": "Plex Mono", "weight": "400", "file": "/assets/fonts/ibm-plex-mono-latin-400.woff2" }, { "family": "Plex Mono", "weight": "500", "file": "/assets/fonts/ibm-plex-mono-latin-500.woff2" }, { "family": "Plex Mono", "weight": "600", "file": "/assets/fonts/ibm-plex-mono-latin-600.woff2" } ], "typeJobs": { "--font-display": "Page titles and the single most important statement on a screen. Uppercase, never below 28px, never body text.", "--font-body": "Everything a reader reads: headings, paragraphs, buttons, tables.", "--font-mono": "Every number, unit, timestamp, source line and label. The instrument face." }, "assets": { "logo": [ { "file": "favicon.svg", "url": "https://mikee.pro/brand/logo/favicon.svg", "bytes": 334, "use": "Mark drawn for 16px, no hairline detail." }, { "file": "lockup-paper.svg", "url": "https://mikee.pro/brand/logo/lockup-paper.svg", "bytes": 11064, "use": "Lockup reversed, for dark backgrounds." }, { "file": "lockup-stacked.svg", "url": "https://mikee.pro/brand/logo/lockup-stacked.svg", "bytes": 11064, "use": "Stacked lockup, for square and narrow placements." }, { "file": "lockup.svg", "url": "https://mikee.pro/brand/logo/lockup.svg", "bytes": 11064, "use": "Mark and wordmark, the standard signature." }, { "file": "mark-ink.svg", "url": "https://mikee.pro/brand/logo/mark-ink.svg", "bytes": 334, "use": "Mark in ink, when pine would clash." }, { "file": "mark-large.svg", "url": "https://mikee.pro/brand/logo/mark-large.svg", "bytes": 336, "use": "Mark at display size, for covers and signage." }, { "file": "mark-paper.svg", "url": "https://mikee.pro/brand/logo/mark-paper.svg", "bytes": 334, "use": "Mark reversed in paper, for dark backgrounds." }, { "file": "mark-pine.svg", "url": "https://mikee.pro/brand/logo/mark-pine.svg", "bytes": 334, "use": "Mark in pine, for light backgrounds." }, { "file": "mark.svg", "url": "https://mikee.pro/brand/logo/mark.svg", "bytes": 334, "use": "The datum mark, pine on transparent. The default." }, { "file": "wordmark-paper.svg", "url": "https://mikee.pro/brand/logo/wordmark-paper.svg", "bytes": 10761, "use": "Wordmark reversed, for dark backgrounds." }, { "file": "wordmark.svg", "url": "https://mikee.pro/brand/logo/wordmark.svg", "bytes": 10761, "use": "Wordmark as outlines, ink, no font dependency." } ], "social": [ { "file": "li-banner.png", "url": "https://mikee.pro/brand/social/li-banner.png", "bytes": 29561, "use": "LinkedIn banner, 1584x396." }, { "file": "og-about.png", "url": "https://mikee.pro/brand/social/og-about.png", "bytes": 39518, "use": "OG card for the about page." }, { "file": "og-brand.png", "url": "https://mikee.pro/brand/social/og-brand.png", "bytes": 41631, "use": "OG card for the brand system page." }, { "file": "og-contact.png", "url": "https://mikee.pro/brand/social/og-contact.png", "bytes": 43450, "use": "OG card for the contact page." }, { "file": "og-home.png", "url": "https://mikee.pro/brand/social/og-home.png", "bytes": 40508, "use": "OG card for the home page." }, { "file": "og-services.png", "url": "https://mikee.pro/brand/social/og-services.png", "bytes": 45087, "use": "OG card for the services page." }, { "file": "og-work.png", "url": "https://mikee.pro/brand/social/og-work.png", "bytes": 41237, "use": "OG card for the work page." }, { "file": "post-1080.png", "url": "https://mikee.pro/brand/social/post-1080.png", "bytes": 48221, "use": "Square social post, 1080x1080." }, { "file": "x-header.png", "url": "https://mikee.pro/brand/social/x-header.png", "bytes": 40534, "use": "X header, 1500x500." } ], "icons": [ { "file": "apple-touch-icon.png", "url": "https://mikee.pro/assets/img/apple-touch-icon.png", "bytes": 2199, "use": "180px, opaque, for iOS home screens." }, { "file": "icon-192.png", "url": "https://mikee.pro/assets/img/icon-192.png", "bytes": 4315, "use": "PWA icon, 192px." }, { "file": "icon-512.png", "url": "https://mikee.pro/assets/img/icon-512.png", "bytes": 12813, "use": "PWA icon, 512px." }, { "file": "icon-light-512.png", "url": "https://mikee.pro/assets/img/icon-light-512.png", "bytes": 12400, "use": "512px on paper, for light surfaces." }, { "file": "maskable-512.png", "url": "https://mikee.pro/assets/img/maskable-512.png", "bytes": 6073, "use": "Maskable PWA icon, safe area respected." }, { "file": "og-about.png", "url": "https://mikee.pro/assets/img/og-about.png", "bytes": 39518 }, { "file": "og-brand.png", "url": "https://mikee.pro/assets/img/og-brand.png", "bytes": 41631 }, { "file": "og-contact.png", "url": "https://mikee.pro/assets/img/og-contact.png", "bytes": 43450 }, { "file": "og-home.png", "url": "https://mikee.pro/assets/img/og-home.png", "bytes": 40508 }, { "file": "og-services.png", "url": "https://mikee.pro/assets/img/og-services.png", "bytes": 45087 }, { "file": "og-work.png", "url": "https://mikee.pro/assets/img/og-work.png", "bytes": 41237 }, { "file": "favicon.ico", "url": "https://mikee.pro/assets/img/favicon.ico", "bytes": 383, "use": "16/32/48 multi-resolution, for browsers." } ], "logoSourceVector": true, "wordmarkIsOutlines": "brand/logo/wordmark.svg is converted from the variable font to paths, so no asset depends on a font being installed." }, "layout": { "measure": "68ch", "shell": "1180px", "rail": "210px", "radius": "3px", "hairline": "1px", "scale": { "--step--2": "0.6875rem", "--step--1": "0.8125rem", "--step-0": "1.0625rem", "--step-1": "1.25rem", "--step-2": "1.5625rem", "--step-3": "2.125rem", "--step-4": "clamp(2.5rem, 4.6vw, 3.75rem)", "--step-5": "clamp(2.9rem, 7.2vw, 6.25rem)", "--step-6": "clamp(3.4rem, 11vw, 9rem)" }, "spacing": { "--s-1": "0.25rem", "--s-2": "0.5rem", "--s-3": "0.75rem", "--s-4": "1rem", "--s-5": "1.5rem", "--s-6": "2rem", "--s-7": "3rem", "--s-8": "4rem", "--s-9": "6rem", "--s-10": "8rem" } }, "graphics": "Hairline rules and mono labels, drawn the way a schematic is drawn: sections separated by title-block rules, registers laid out as a table, connectors as plain lines. Rules carry information, they do not decorate.", "voice": { "how": "Plain, specific, numeric. Sentence case. Active voice. Numbers in figures. No exclamation marks, no emoji, no adjectives standing in for evidence.", "refuses": [ "'passionate about'", "'data-driven'", "'world-class'", "'ninja'", "'unlock'", "'supercharge'", "superlatives that cannot be sourced", "anything that would survive being pasted onto a competitor's site" ], "test": "Could a reader ask 'says who?' and get an answer? If not, rewrite it or attach the source.", "rewrites": [ { "from": "We're passionate about data-driven marketing.", "to": "Seven data checks count every record that fails to join." }, { "from": "We supercharge your growth engine.", "to": "Budget is set by office, from tracked ad position and billed revenue." }, { "from": "Actionable insights at your fingertips.", "to": "Cost per hire is published as a range, because the CRM holds no click IDs." } ] }, "motion": { "jobs": [ "orientation: where did this come from", "process: how far through a sequence are we", "feedback: did my input register" ], "nothingLoops": true, "durations": { "--dur-1": "120ms", "--dur-2": "220ms", "--dur-3": "620ms" }, "easing": { "--ease-out": "cubic-bezier(0.165, 0.84, 0.44, 1)", "--ease-in-out": "cubic-bezier(0.65, 0, 0.35, 1)" }, "stagger": "Arrival order is derived from position among siblings: 70ms per step, capped at 460ms. A delay authored in the markup wins.", "positionRails": [ "a 2px progress rule across the top of the viewport", "the sticky annotation rail: the current section at full strength, the rest at 42%" ], "optIn": "The hidden initial state is scoped to html[data-motion]. Pages that link site.css without scripting (proof sheets, the OG renderer) do not carry it.", "guarantees": [ "site.js reveals on scroll, with a 4s watchdog", "@media (prefers-reduced-motion: reduce) resolves every hidden element to its finished state", "