/* ============================================================ DH SYSTEM v2 — BRAND PACK LOADER ============================================================ Loads a v1.1 brand pack JSON and writes its values to :root as CSS custom properties. Sets data-* attributes on for variant packs (typescale, density, scheme, etc.). Usage: applyDhBrand(jsonObject) // apply pack object loadDhBrandFromUrl(url) // fetch + apply setDhScheme('dark') // toggle dark/light setDhSurface(el, 'ink') // set a surface ============================================================ */ (function () { "use strict"; // ============================================================ // CORE: apply brand pack object // ============================================================ function applyDhBrand(pack) { if (!pack || typeof pack !== "object") { console.error("[DH v2] applyDhBrand: invalid pack"); return; } const root = document.documentElement; const c = pack.colors || {}; const f = pack.fonts || {}; const v = pack.variants || {}; // ---------- Layer 1: brand color slots ---------- if (c.primary) root.style.setProperty("--brand-primary", c.primary); if (c.secondary) root.style.setProperty("--brand-secondary", c.secondary); if (c.accent) root.style.setProperty("--brand-accent", c.accent); if (c.deep) root.style.setProperty("--brand-deep", c.deep); // ---------- Layer 1: surface palette slots ---------- // v1.1 schema uses ink/paper/tone. v1.0 schema uses surface-bg/surface-text. // Normalize both into ink/paper/tone. if (c.ink) root.style.setProperty("--surface-ink", c.ink); else if (c["surface-text"]) root.style.setProperty("--surface-ink", c["surface-text"]); if (c.paper) root.style.setProperty("--surface-paper", c.paper); else if (c["surface-bg"]) root.style.setProperty("--surface-paper", c["surface-bg"]); if (c.tone) root.style.setProperty("--surface-tone", c.tone); else if (c["surface-card-bg"]) root.style.setProperty("--surface-tone", c["surface-card-bg"]); // ---------- Layer 1: status colors ---------- if (c.success) root.style.setProperty("--signal-success", c.success); if (c.warning) root.style.setProperty("--signal-warning", c.warning); if (c.error) root.style.setProperty("--signal-error", c.error); // ---------- Layer 1: text-on-color ---------- if (c["text-on-primary"]) root.style.setProperty("--text-on-primary", c["text-on-primary"]); if (c["text-on-secondary"]) root.style.setProperty("--text-on-secondary", c["text-on-secondary"]); if (c["text-on-accent"]) root.style.setProperty("--text-on-accent", c["text-on-accent"]); // ---------- Layer 1: fonts ---------- if (f.display) { root.style.setProperty( "--font-display", `"${f.display}", system-ui, sans-serif` ); } if (f.body) { root.style.setProperty( "--font-body", `"${f.body}", system-ui, sans-serif` ); } // Clamp --fw-display-max to the heaviest display weight this brand's // font actually ships. Without this, headings request var(--fw-black) // = 800 even when the font only loads 400/700, and the browser // synthesizes a faux-bold that looks awful. Calvary tops at 700, // Cormorant at 700, Fraunces at 900. Loader picks the right ceiling. applyDisplayWeightCeiling(root, f.displayWeights); // Inject Google Fonts link if not already present injectGoogleFonts(f.display, f.displayWeights, f.body, f.bodyWeights); // ---------- Layer 1: variant pack data-* attributes ---------- if (pack.id) root.setAttribute("data-brand", pack.id); // Scheme resolution. The HTML head ran an inline script that already // set data-scheme based on (user localStorage pref || system pref || // "light"). Respect that. Brand pack scheme is a hint, not an enforcer // — users decide light vs dark, brands decide everything else. // Fallback path: if no data-scheme attribute is set yet (loader called // from a context where the early inline script didn't run), resolve // here from the same precedence. if (!root.hasAttribute("data-scheme")) { var resolved = null; try { var userPref = localStorage.getItem("dh-scheme-pref"); if (userPref === "light" || userPref === "dark") resolved = userPref; } catch (e) {} if (!resolved) { resolved = (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light"; } root.setAttribute("data-scheme", resolved); } // v1.3: brandMode controls which Tier-2 colors (secondary, accent) are // structurally active. monochromatic = primary scale only, duotone = // primary + secondary, palette = all four. Components can gate // [data-brand-mode] to suppress noisy colors when the system is // running in monochromatic mode. var brandMode = pack.brandMode || "monochromatic"; root.setAttribute("data-brand-mode", brandMode); if (v.typescale) root.setAttribute("data-typescale", v.typescale); if (v.density) root.setAttribute("data-density", v.density); if (v.elevation) root.setAttribute("data-elevation", v.elevation); if (v.motion) root.setAttribute("data-motion", v.motion); if (v.line) root.setAttribute("data-line", v.line); if (v.style) root.setAttribute("data-style", v.style); // ---------- Layer 1: SITE STRUCTURE OVERRIDES ---------- // Brand pack can override Site Structure tokens per-brand. // Shape: pack.siteStructure = { outerMax, contentMax, readingMax, // cardMax, paddingMobile, paddingTablet, paddingDesktop, // gapSection, gapSectionTight, gapBlock, gapRow } // All values are PIXEL numbers. Loader appends 'px' before writing. // Most brands use defaults from tokens-v2.css. Overrides are rare. const ss = pack.siteStructure || {}; const ssMap = { outerMax: "--shell-outer-max", contentMax: "--shell-content-max", readingMax: "--shell-reading-max", cardMax: "--shell-card-max", paddingMobile: "--shell-pad-mobile", paddingTablet: "--shell-pad-tablet", paddingDesktop: "--shell-pad-desktop", gapSection: "--gap-section", gapSectionTight: "--gap-section-tight", gapBlock: "--gap-block", gapRow: "--gap-row" }; Object.entries(ssMap).forEach(([key, cssVar]) => { if (ss[key] !== undefined && ss[key] !== null) { root.style.setProperty(cssVar, ss[key] + "px"); } }); // ---------- ACHROMATIC OVERRIDES ---------- // Pure grayscale brand input (R=G=B, e.g. #000000) breaks the CSS // oklch formulas because `max(c, 0.10)` injects chroma at undefined // hue, rendering as a faint magenta-red tint instead of clean neutral // gray. Detect achromatic input here and write literal neutral values // for the 12-step scales + brand-color foreground tokens. Non- // achromatic brands continue to use the CSS formula cascade. // // Stash the current pack so scheme toggles can re-apply the right // scheme's literals (light + dark formulas differ). window.DH = window.DH || {}; window.DH._currentPack = pack; const isDarkScheme = root.getAttribute("data-scheme") === "dark"; if (isAchromatic(c.primary)) { applyAchromaticOverridesEverywhere(pack, isDarkScheme); } else { clearAchromaticOverridesEverywhere(); } // ---------- meta: fire event so listeners can react ---------- document.dispatchEvent( new CustomEvent("dh:brand-applied", { detail: { pack } }) ); return pack; } // ============================================================ // SCOPED: apply brand pack to a specific element (multi-brand pages) // ============================================================ function applyDhBrandToElement(el, pack) { if (!el || !pack) return; const c = pack.colors || {}; const f = pack.fonts || {}; const v = pack.variants || {}; if (c.primary) el.style.setProperty("--brand-primary", c.primary); if (c.secondary) el.style.setProperty("--brand-secondary", c.secondary); if (c.accent) el.style.setProperty("--brand-accent", c.accent); if (c.deep) el.style.setProperty("--brand-deep", c.deep); if (c.ink) el.style.setProperty("--surface-ink", c.ink); else if (c["surface-text"]) el.style.setProperty("--surface-ink", c["surface-text"]); if (c.paper) el.style.setProperty("--surface-paper", c.paper); else if (c["surface-bg"]) el.style.setProperty("--surface-paper", c["surface-bg"]); if (c.tone) el.style.setProperty("--surface-tone", c.tone); else if (c["surface-card-bg"]) el.style.setProperty("--surface-tone", c["surface-card-bg"]); if (c["text-on-primary"]) el.style.setProperty("--text-on-primary", c["text-on-primary"]); if (c["text-on-secondary"]) el.style.setProperty("--text-on-secondary", c["text-on-secondary"]); if (c["text-on-accent"]) el.style.setProperty("--text-on-accent", c["text-on-accent"]); if (f.display) { el.style.setProperty( "--font-display", `"${f.display}", system-ui, sans-serif` ); } if (f.body) { el.style.setProperty( "--font-body", `"${f.body}", system-ui, sans-serif` ); } // See applyDhBrand for rationale. Same clamp, element-scoped here. applyDisplayWeightCeiling(el, f.displayWeights); injectGoogleFonts(f.display, f.displayWeights, f.body, f.bodyWeights); if (pack.id) el.setAttribute("data-brand", pack.id); // Element-scoped scheme controls scheme for that element's subtree if (v.scheme && v.scheme !== "default") { el.setAttribute("data-scheme", v.scheme); } // v1.3: element-scoped brand mode same as root. var elBrandMode = pack.brandMode || "monochromatic"; el.setAttribute("data-brand-mode", elBrandMode); // Compute the 12-step scales AND all derived color-family tokens at // the element level using literal hex values. Browsers don't reliably // re-resolve var() inside oklch(from var()) or color-mix(in X, var(), // ...) at the consumer's context, so we pre-substitute literals here. // Now every derived token is scoped to this element's own brand. if (c.primary) { const isDark = v.scheme === "dark"; writeAccentScale(el, c.primary, isDark); writeGrayScale(el, c.primary, isDark); writeAccentAlphas(el, c.primary); writeColorFamily(el, "primary", c.primary, isDark); if (c.secondary) writeColorFamily(el, "secondary", c.secondary, isDark); if (c.accent) writeColorFamily(el, "accent", c.accent, isDark); if (c.deep) writeColorFamily(el, "deep", c.deep, isDark, /* isDeep */ true); } } // ============================================================ // COLOR FAMILY WRITER — every -tint, -soft, -hover, -active, // -deep, -text, -fill variant for a single brand color. // ============================================================ function writeColorFamily(el, name, hex, isDark, isDeep) { const set = (suffix, value) => el.style.setProperty(`--color-${name}${suffix}`, value); // Base set("", hex); // Tints + softs (always derived from light mixes — same in both schemes) set("-tint", `color-mix(in srgb, ${hex} 14%, white)`); set("-soft", `color-mix(in srgb, ${hex} 45%, white)`); // Deep family doesn't get hover/active/text/fill (it's a structural color) if (isDeep) return; // Hover + active states set("-hover", `color-mix(in oklch, ${hex}, black 12%)`); set("-active", `color-mix(in oklch, ${hex}, black 22%)`); set("-deep", `color-mix(in srgb, ${hex} 82%, black)`); // Text + fill variants are scheme-aware if (isDark) { set("-text", `oklch(from ${hex} clamp(0.7, l, 0.88) clamp(0.06, c, 0.18) h)`); set("-fill", `oklch(from ${hex} clamp(0.55, l, 0.7) min(c, 0.18) h)`); } else { set("-text", `oklch(from ${hex} clamp(0.35, l, 0.5) max(c, 0.06) h)`); set("-fill", hex); } } // ============================================================ // SCALE WRITERS — element-scoped, literal-substituted oklch // ============================================================ function writeAccentScale(el, primary, isDark) { const set = (i, formula) => el.style.setProperty(`--accent-${i}`, formula); if (isDark) { set(1, `oklch(from ${primary} 0.155 calc(c * 0.20) h)`); set(2, `oklch(from ${primary} 0.195 calc(c * 0.30) h)`); set(3, `oklch(from ${primary} 0.245 calc(c * 0.50) h)`); set(4, `oklch(from ${primary} 0.295 calc(c * 0.70) h)`); set(5, `oklch(from ${primary} 0.355 calc(c * 0.85) h)`); set(6, `oklch(from ${primary} 0.42 c h)`); set(7, `oklch(from ${primary} 0.50 c h)`); set(8, `oklch(from ${primary} 0.58 c h)`); set(9, primary); set(10, `oklch(from ${primary} calc(l + 0.04) c h)`); set(11, `oklch(from ${primary} clamp(0.72, calc(l + 0.20), 0.85) max(c, 0.10) h)`); set(12, `oklch(from ${primary} clamp(0.92, calc(l + 0.40), 0.97) max(c, 0.04) h)`); } else { set(1, `oklch(from ${primary} 0.985 calc(c * 0.04) h)`); set(2, `oklch(from ${primary} 0.965 calc(c * 0.10) h)`); set(3, `oklch(from ${primary} 0.935 calc(c * 0.20) h)`); set(4, `oklch(from ${primary} 0.895 calc(c * 0.35) h)`); set(5, `oklch(from ${primary} 0.845 calc(c * 0.55) h)`); set(6, `oklch(from ${primary} 0.78 calc(c * 0.75) h)`); set(7, `oklch(from ${primary} 0.70 calc(c * 0.90) h)`); set(8, `oklch(from ${primary} 0.62 c h)`); set(9, primary); set(10, `oklch(from ${primary} calc(l - 0.04) c h)`); set(11, `oklch(from ${primary} clamp(0.38, calc(l - 0.05), 0.48) max(c, 0.10) h)`); set(12, `oklch(from ${primary} clamp(0.18, calc(l - 0.30), 0.28) max(c, 0.06) h)`); } } function writeGrayScale(el, primary, isDark) { const set = (i, formula) => el.style.setProperty(`--gray-${i}`, formula); if (isDark) { // Chroma floor with brand-tint preservation — dark surfaces stay // perceptibly tinted instead of collapsing to pure black. set(1, `oklch(from ${primary} 0.135 max(c * 0.15, 0.020) h)`); set(2, `oklch(from ${primary} 0.175 max(c * 0.18, 0.024) h)`); set(3, `oklch(from ${primary} 0.215 max(c * 0.20, 0.028) h)`); set(4, `oklch(from ${primary} 0.255 max(c * 0.20, 0.030) h)`); set(5, `oklch(from ${primary} 0.295 max(c * 0.20, 0.032) h)`); set(6, `oklch(from ${primary} 0.345 max(c * 0.18, 0.030) h)`); set(7, `oklch(from ${primary} 0.42 max(c * 0.16, 0.028) h)`); set(8, `oklch(from ${primary} 0.55 max(c * 0.12, 0.022) h)`); set(9, `oklch(from ${primary} 0.62 max(c * 0.10, 0.018) h)`); set(10, `oklch(from ${primary} 0.66 max(c * 0.08, 0.015) h)`); set(11, `oklch(from ${primary} 0.78 max(c * 0.05, 0.010) h)`); set(12, `oklch(from ${primary} 0.95 max(c * 0.03, 0.005) h)`); } else { set(1, `oklch(from ${primary} 0.988 0.003 h)`); set(2, `oklch(from ${primary} 0.97 0.005 h)`); set(3, `oklch(from ${primary} 0.945 0.007 h)`); set(4, `oklch(from ${primary} 0.92 0.008 h)`); set(5, `oklch(from ${primary} 0.88 0.010 h)`); set(6, `oklch(from ${primary} 0.83 0.012 h)`); set(7, `oklch(from ${primary} 0.74 0.013 h)`); set(8, `oklch(from ${primary} 0.60 0.013 h)`); set(9, `oklch(from ${primary} 0.48 0.012 h)`); set(10, `oklch(from ${primary} 0.42 0.011 h)`); set(11, `oklch(from ${primary} 0.34 0.010 h)`); set(12, `oklch(from ${primary} 0.18 0.008 h)`); } } function writeAccentAlphas(el, primary) { const set = (i, opacity) => el.style.setProperty( `--accent-a${i}`, `color-mix(in oklch, ${primary} ${opacity}%, transparent)` ); set(1, 3); set(2, 6); set(3, 12); set(4, 18); set(5, 25); set(6, 35); set(7, 50); set(8, 70); } // ============================================================ // FETCH + APPLY // ============================================================ async function loadDhBrandFromUrl(url) { try { const res = await fetch(url); const pack = await res.json(); return applyDhBrand(pack); } catch (err) { console.error("[DH v2] loadDhBrandFromUrl failed:", err); } } // ============================================================ // SCHEME TOGGLE // ============================================================ function setDhScheme(scheme) { const valid = ["light", "dark", "auto"]; if (!valid.includes(scheme)) scheme = "light"; const root = document.documentElement; root.setAttribute("data-scheme", scheme); // Re-apply achromatic overrides on scheme change (light + dark // lightness curves are different, so the literal values must flip). const pack = (window.DH && window.DH._currentPack) || null; if (pack && pack.colors && isAchromatic(pack.colors.primary)) { applyAchromaticOverridesEverywhere(pack, scheme === "dark"); } document.dispatchEvent( new CustomEvent("dh:scheme-changed", { detail: { scheme } }) ); } function toggleDhScheme() { const current = document.documentElement.getAttribute("data-scheme"); setDhScheme(current === "dark" ? "light" : "dark"); } // ============================================================ // DENSITY + MOTION SETTERS // ============================================================ function setDhDensity(density) { const valid = ["compact", "comfortable", "spacious", "editorial"]; if (!valid.includes(density)) density = "comfortable"; document.documentElement.setAttribute("data-density", density); } function setDhMotion(motion) { const valid = ["subtle", "calm", "playful", "energetic"]; if (!valid.includes(motion)) motion = "calm"; document.documentElement.setAttribute("data-motion", motion); } // ============================================================ // VIEW TRANSITIONS WRAPPERS // Smooth cross-fade between states using View Transitions API. // Falls back to instant apply if browser doesn't support it. // ============================================================ function applyDhBrandWithTransition(pack) { if (!document.startViewTransition) return applyDhBrand(pack); document.startViewTransition(() => applyDhBrand(pack)); } function toggleDhSchemeWithTransition() { if (!document.startViewTransition) return toggleDhScheme(); document.startViewTransition(() => toggleDhScheme()); } // ============================================================ // SURFACE HELPER // ============================================================ function setDhSurface(el, surface) { if (!el) return; const valid = ["paper", "tone", "ink", "deep", "primary", "tint", "soft"]; if (!valid.includes(surface)) { el.removeAttribute("data-surface"); return; } el.setAttribute("data-surface", surface); } // ============================================================ // GOOGLE FONTS INJECTOR // ============================================================ const _fontsLoaded = new Set(); /* Clamp --fw-display-max to the heaviest display weight the brand pack actually loads. Heading rules use var(--fw-display-max) instead of var(--fw-black) so they degrade gracefully on fonts that don't ship 800/900. Calvary → max 700 → headings render at 700, no faux-bold Cormorant → max 700 → headings render at 700 Fraunces → max 900 → headings render at 900 as designed If displayWeights is missing, keep the tokens-v2 default (800). */ function applyDisplayWeightCeiling(el, displayWeights) { if (!el || !displayWeights) return; const nums = (Array.isArray(displayWeights) ? displayWeights : []) .map(Number) .filter((n) => Number.isFinite(n) && n > 0); if (!nums.length) return; const ceiling = Math.max(...nums); el.style.setProperty("--fw-display-max", String(ceiling)); } function injectGoogleFonts(display, displayWeights, body, bodyWeights) { const families = new Set(); if (display) families.add(buildFamilySpec(display, displayWeights)); if (body && body !== display) families.add(buildFamilySpec(body, bodyWeights)); for (const spec of families) { if (_fontsLoaded.has(spec)) continue; const link = document.createElement("link"); link.rel = "stylesheet"; link.href = `https://fonts.googleapis.com/css2?family=${spec}&display=swap`; document.head.appendChild(link); _fontsLoaded.add(spec); } } function buildFamilySpec(family, weights) { const fam = family.replace(/ /g, "+"); const wts = (weights && weights.length > 0) ? `:wght@${weights.sort((a, b) => a - b).join(";")}` : ""; return `${fam}${wts}`; } // ============================================================ // SCROLL PROGRESS — Site Structure Layer 1 / G8 // ============================================================ // Attach a .scroll-progress bar to the page and update its scaleX // as the user scrolls. Pure CSS handles the visual, JS only writes // the --scroll-progress custom property. One call wires the page. // // Usage: //

What a logo system actually needs

Andrew Lane

Keep reading

Choosing a primary color (and meaning it)