/* ============================================================ 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: //

Turn any idea into a complete brand system in minutes.

Brand audits in under an hour

From idea to launchable wordmark

Choosing a primary color (and meaning it)

Iconography that ages well

The one slide every brand pitch needs

Mood boarding with AI without losing the plot

When to break your own design system

Brand voice from a single positioning line

What a logo system actually needs

Build your full brand system in minutes.