/* ============================================================================ STRATEGY9 DESIGN SYSTEM — BRAND LAYER ---------------------------------------------------------------------------- version: 1.12.0 canonical: strategy9.com repo → wwwroot/css/s9-brands.css Copied, not linked. Edit the canonical copy only, bump the version, and re-copy to every product site in the same commit. See s9-core.css for the full rule. ---------------------------------------------------------------------------- The ONLY file that differs between strategy9.com and a product site. Every brand is exactly five variables. Nothing else. If a sixth is needed, the system is wrong — fix the system, not the brand. --brand Primary fill. Buttons, solid bands, keylines. Must reach 4.5:1 against #ffffff when white text sits on it. --brand-ink Link and small-text color ON WHITE. Must reach 4.5:1 against #ffffff. Often a shade darker than --brand. --brand-dark Gradient start, button hover, big stat numerals. --brand-bright Accent ON DARK only. Hairlines, rules, gradient end. Never used for text on white — it will fail contrast. --brand-light Tinted fill. Tag backgrounds, icon wells, hover states. ---------------------------------------------------------------------------- USAGE Whole-site: Per-element:
…scopes the accent to that one card, which is how the strategy9.com suite grid shows eight products in their own colors without eight stylesheets. ---------------------------------------------------------------------------- STATUS CONFIRMED — taken from a real brand asset or shipped source file. PLACEHOLDER — carried forward from generic Tailwind values currently in Views/Home/Index.cshtml. These are NOT brand colors. They need replacing with the real hex from each product's assets. ========================================================================== */ /* ===== HOUSE / DEFAULT ==================================== CONFIRMED ===== Strategy9. Also the fallback when no data-brand is set. Source: #005b8b and #3eb3e6 are the existing site values (63 and 145 uses in the current codebase); #e8f6fc is the existing tint (14 uses). */ :root, [data-brand="strategy9"]{ --brand:#005b8b; --brand-ink:#005b8b; /* 7.0:1 on white — safe for body-size links */ --brand-dark:#00374f; --brand-bright:#3eb3e6; --brand-light:#e8f6fc; } /* ===== JOB FAIR ============================================ CONFIRMED ===== Source: EmployeeIQ_Brand_Kit_2026_v2. Job Fair is a product WITHIN EmployeeIQ, not a sibling, so it has no identity of its own: these are the same five values as [data-brand="employeeiq"] below, deliberately. Sept 2026: the two blocks moved together from the #8d3a96 set to the 2026 kit's Deep Purple, in one commit, because a Job Fair that kept the old purple would be a second brand by accident. Move them together or not at all. Reasoning for each value is on the EmployeeIQ block. Note --brand-bright is now a GOLD: any .s9-hero or .s9-cta carrying this brand ramps to it. */ [data-brand="jobfair"]{ --brand:#5e256a; --brand-ink:#5e256a; --brand-dark:#3d1646; --brand-bright:#e8a838; --brand-light:#f8f1e7; } /* ===== PLAYERIQ ============================================ CONFIRMED ===== Source: playeriq-site/index.html :root, Aug 2026 — --navy #0a1628 --navy-light #1a2d4a --gold #d4a853 Navy primary, gold accent. The gold is NOT the primary and cannot be: #d4a853 is 2.20:1 on white, so it fails for text or for a button fill on a light surface. On the navy it is 8.22:1 — which is precisely the contract for --brand-bright ("accent on dark only, never text on white"). Putting the gold anywhere else will fail contrast, so don't. --brand is #14406b: a mid navy drawn from the same family, 10.63:1 with white text on it and 10.63:1 as a link color on white, so it serves as both --brand and --brand-ink. LOGO: PlayerIQ_2017_logo_brightbluewhite.png is a single flat #00b0f8 — bright cyan, matching neither the navy nor the gold, and failing on white at 2.45:1. Resolved with Andrew, Aug 2026: navy + gold is the brand, and the 2017 logo gets redrawn to match rather than the palette bending to it. Until that artwork exists the cyan mark still ships on playeriq.com, so expect one element on the page not to agree with the rest. */ [data-brand="playeriq"]{ --brand:#14406b; /* white text on it: 10.63:1 */ --brand-ink:#14406b; /* on white: 10.63:1 */ --brand-dark:#0a1628; /* the site's navy ground */ --brand-bright:#d4a853;/* the gold — on dark only, 8.22:1 on the navy */ --brand-light:#e9eff6; } /* ===== EMPLOYEEIQ ========================================== CONFIRMED ===== Source, Sept 2026: EmployeeIQ_Brand_Kit_2026_v2. Deep Purple #5E256A becomes the primary, replacing #8d3a96 (the flat color of EmployeeIQ_2020.png), which the 2026 kit demotes to a supporting purple. The same five values as [data-brand="jobfair"] above — identical, not close. Job Fair is a product within EmployeeIQ and the two move together. Why each value: --brand #5E256A white on it 10.78:1. The logo color, so the mark and the buttons finally agree. --brand-ink #5E256A THE SAME VALUE AS --brand. 10.78:1 on white, so one value covers fill and link — the arrangement PlayerIQ and SurveyIQ use. The old palette needed a separately darkened ink (#7a2f83) because #8d3a96 only reached 4.3:1. That problem is gone. --brand-dark #3D1646 14.98:1. The kit ships no dark step, so this is Deep Purple taken down the same hue line. FLAGGED: the one value here not in the kit; it belongs there. --brand-bright #E8A838 People Gold — A GOLD, NOT A LIGHT PURPLE. 2.08:1 on white, unusable for text there, which IS the --brand-bright contract ("accent on dark only"). 5.18:1 on --brand, 7.20:1 on --brand-dark. Structurally PlayerIQ's navy+gold and RaffleIQ's indigo+orange: the system working as designed. --brand-light #F8F1E7 Warm Cream. --brand-ink on it: 9.61:1. Replaces the cool lilac #f4ecf5. */ [data-brand="employeeiq"]{ --brand:#5e256a; --brand-ink:#5e256a; --brand-dark:#3d1646; --brand-bright:#e8a838; --brand-light:#f8f1e7; } /* Warm-neutral opt-in. Not a sixth brand variable: these are aliases onto the shared warm set in s9-core.css (1.13.0), which any brand may take. No hex here — if the warmth needs tuning, tune it in core. WHY A SEPARATE RULE, AND WHY :root. This file loads BEFORE s9-core.css, and core declares --ink and friends on :root. With data-brand on , a bare [data-brand] selector ties :root on specificity and core, loading second, wins — the aliases would silently do nothing. :root[data-brand] outranks it. It also makes the opt-in whole-site only, which is the intent: an EmployeeIQ card scoped per-element on strategy9.com keeps that page's cool neutrals. */ :root[data-brand="employeeiq"]{ --ink:var(--ink-warm); --muted:var(--muted-warm); --line:var(--line-warm); --bg:var(--bg-warm); } /* ===== EMAILIQ ============================================= CONFIRMED ===== Sources, Aug 2026: · EmailIQ_blue.png in the EmailIQ-web repo is a single flat color, #005888 — three RGB points off #005b8b, i.e. the same blue after an export round-trip. · EmailIQ-web/wwwroot/css/site.css already declares its own variables: --primary-color: #005b8b --secondary-color: #00a0e3 --light-blue: #e6f3f9 (and #004a72 as the dark) So EmailIQ shares the house primary rather than owning one. What is genuinely its own is the accent: #00a0e3, brighter and greener than the Strategy9 #3eb3e6. That single value is what distinguishes an EmailIQ page from a Strategy9 page. */ [data-brand="emailiq"]{ --brand:#005b8b; --brand-ink:#005b8b; /* 7.0:1 on white */ --brand-dark:#004a72; --brand-bright:#00a0e3; --brand-light:#e6f3f9; } /* ===== DATA CONNECT ====================================== PLACEHOLDER ===== An infrastructure product. A neutral slate would separate it from the marketing tools without adding another hue — proposed, not confirmed. */ [data-brand="dataconnect"]{ --brand:#3f5c72; --brand-ink:#334c5e; --brand-dark:#263a49; --brand-bright:#7fa3bd; --brand-light:#eef3f7; } /* ===== SURVEYIQ ============================================ CONFIRMED ===== Sources, Aug 2026: · logo.png in the surveyiq_website repo is a single flat #35479d across 116,487 pixels — a deep indigo, not a blue. · surveyiq_website/Views/Shared/_Layout.cshtml declared its own inline variables: --primary-color #4A5DB5, --secondary-color #6B7ADB, --accent-color #8B9AEB. The layout's #4A5DB5 is the logo indigo lightened, and at 5.96:1 it is the weaker of the two. The logo wins: #35479d is 8.27:1 as white-on-fill AND 8.27:1 as a link color on white, so one value covers --brand and --brand-ink with room to spare. This replaces a Tailwind blue-600 placeholder that had been flagged as "sits very close to the house blue". It doesn't — the real mark is a distinctly violet indigo and reads as its own product at a glance. --brand-bright keeps the site's own #8B9AEB accent. At 2.65:1 on white it is unusable for text there, which is exactly the --brand-bright contract: dark grounds only. On --brand-dark it is 4.69:1 and clears AA. */ [data-brand="surveyiq"]{ --brand:#35479d; /* white text on it: 8.27:1 */ --brand-ink:#35479d; /* on white: 8.27:1 */ --brand-dark:#232f6b; /* 12.42:1 — gradient start, button hover, numerals */ --brand-bright:#8b9aeb;/* on dark only — 4.69:1 on --brand-dark */ --brand-light:#eceefa; /* --brand-ink on this tint: 7.16:1 */ } /* ===== WIFIIQ ============================================== CONFIRMED ===== Sources, Aug 2026: · WiFiIQ.png in the wifi2025_marketing repo is a single flat #3c53a4 across 102,895 pixels. · wifi2025_marketing/wwwroot/css/site.css declares --primary: #3B5ED8 --primary-dark: #2A47B0 and uses #3b5ed8 seven times, making it the de facto site color. This replaces a Tailwind green placeholder. The real product is blue, not green — that guess was wrong in hue, not merely in value. WHY THE LOGO COLOR WAS NOT USED. Measured against every confirmed brand in this file (CIE76, where under ~10 reads as the same color to most people): #3c53a4 (logo) vs surveyiq #35479d dE 6.4 COLLISION #3b5ed8 (site.css) vs surveyiq #35479d dE 21.6 distinguishable #2a47b0 (dark) vs surveyiq #35479d dE 11.4 COLLISION The WiFiIQ logo and the SurveyIQ logo are, to most eyes, the same blue. Two products in one suite cannot share an identity color, so --brand takes the site's own #3b5ed8: brighter, more electric, and far enough from the SurveyIQ indigo to read as its own product. The logo still ships at #3c53a4, so as with PlayerIQ expect the mark not to agree with the palette until the artwork is redrawn. FLAGGED FOR ANDREW, Aug 2026: the suite now carries four blues — Strategy9 #005b8b, PlayerIQ #14406b, SurveyIQ #35479d and WiFiIQ #3b5ed8. That is a decision worth making deliberately rather than inheriting. WiFiIQ is the obvious candidate to move to a different hue, because it is the only one whose color was never chosen — it arrived with a Bootstrap template. */ [data-brand="wifiiq"]{ --brand:#3b5ed8; /* white text on it: 5.56:1 */ --brand-ink:#2a47b0; /* on white: 7.99:1 — #3b5ed8 is too light for body text */ --brand-dark:#1f347f; /* 11.32:1 — gradient start, button hover, numerals */ --brand-bright:#7fa5f8;/* on dark only — 4.66:1 on --brand-dark, 2.6:1 on white */ --brand-light:#ecf0fc; /* --brand-ink on this tint: 7.02:1 */ } /* ===== RAFFLEIQ ============================================ CONFIRMED ===== Sources, Aug 2026: · RaffleIQ.png in the raffleiq_website repo is a single flat #212060 across 116,088 pixels — a very dark indigo. · raffleiq_website/Views/Shared/_Layout.cshtml declared --primary: #2c5282 ("A professional blue") --secondary: #ed8936 ("Complementary orange for CTAs") WHY THE SITE'S --primary WAS NOT USED. Measured against the confirmed brands (CIE76; under ~12 reads as the same color): #2c5282 vs strategy9 #005b8b dE 7.6 COLLISION #2c5282 vs playeriq #14406b dE 8.2 COLLISION It collides with two brands at once, which is what "a professional blue" gets you in a suite that already has four. The logo indigo does not: #212060 is dE 20.2 from its nearest neighbour and 14.58:1 on white. The orange is the interesting part. #ed8936 is dE 98 from everything else in this file — the only warm hue in the entire suite — but it is 2.55:1 on white, so it cannot be --brand or --brand-ink. On the logo indigo it is 5.72:1. That is exactly the --brand-bright contract, and structurally this is the same arrangement PlayerIQ uses: dark ground, warm accent. The orange is what a reader will remember, so spend it on accents and on dark bands, never on body text. This replaces a Tailwind red placeholder. Red was not far off in spirit — RaffleIQ did want a warm hue — but neither the value nor the role was right. */ [data-brand="raffleiq"]{ --brand:#212060; /* white text on it: 14.58:1 */ --brand-ink:#212060; /* on white: 14.58:1 */ --brand-dark:#16143f; --brand-bright:#ed8936;/* the orange — on dark only, 5.72:1 on --brand */ --brand-light:#ecebf5; } /* ===== TABLEIQ / VALETIQ / OTHER ========================= PLACEHOLDER ===== No color has ever been assigned. Renders in neutral until one is. */ [data-brand="other"]{ --brand:#64748b; --brand-ink:#475569; --brand-dark:#334155; --brand-bright:#94a3b8; --brand-light:#f1f5f9; }