/* ============================================================================ STRATEGY9 DESIGN SYSTEM — BRAND LAYER ---------------------------------------------------------------------------- version: 1.11.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: PlayerIQ-JobFair-Overview.html, the approved reference design. Retains its purple as an EmployeeIQ sub-brand. */ [data-brand="jobfair"]{ --brand:#8d3a96; --brand-ink:#7a2f83; /* darkened from #8d3a96 to clear 4.5:1 */ --brand-dark:#6b2c73; --brand-bright:#b06ab8; --brand-light:#f4ecf5; } /* ===== 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, Aug 2026: EmployeeIQ_2020.png in the employeeiq_web repo is a single flat #8d3a96 across 142,941 pixels. That is the same purple as [data-brand="jobfair"] below — not close to it, identical. Which is correct: Job Fair is a hiring-event feature OF EmployeeIQ, not a separate product, so it should not have a separate identity. The two selectors below are deliberately the same five values. employeeiq_web/index.html and job-fair.html already declare this palette inline as --brand #8D3A96, --brand-bright #9B4F96, --brand-deep #6B2C73 and --brand-soft #F4ECF5 — so the site, the logo and this file now agree. This replaces a Tailwind purple-600 placeholder. The guess had the right hue family and the wrong value: #9333ea is a good deal more violet and more saturated than the real mark. */ [data-brand="employeeiq"]{ --brand:#8d3a96; --brand-ink:#7a2f83; /* darkened from #8d3a96 to clear 4.5:1 on white */ --brand-dark:#6b2c73; --brand-bright:#b06ab8; --brand-light:#f4ecf5; } /* ===== 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; }