@praecipio/brand 0.1.0

package/README.md

@@ -0,0 +1,61 @@
+# @praecipio/brand
+
+The Praecipio brand as a typed, tested library — palette, tint/shade ladders,
+typography, logo rules, icon recipe, and voice, decompiled from Brand Style
+Guide v2.01. Products import this package instead of copy-pasting hex values,
+so every surface stays consistent and updates with a version bump.
+
+## Install
+
+Public on npmjs.org — no registry setup, no auth:
+
+```sh
+npm install @praecipio/brand    # or pnpm add / yarn add
+```
+
+The package ships tokens, rules, components, and generated CSS only. The
+licensed assets (Freight Sans Pro / FA5 Pro font files, stock photography)
+are not in it — font stacks ship as names, and the repo stays private.
+
+## Use
+
+```ts
+// Typed tokens, ladders, and rules
+import { palette, prime, primeLadder, contrast, luminance } from '@praecipio/brand';
+
+primeLadder('orange').tints;          // guide p.20, exactly
+contrast('#C84F09', '#FFFFFF');       // the rules ship as functions
+```
+
+```css
+/* CSS custom properties — every palette color + ladder as --praecipio-* */
+@import '@praecipio/brand/css';
+
+.cta { background: var(--praecipio-prime-orange); }
+```
+
+```tsx
+// React components (react >= 18 is an optional peer dependency)
+import { SwatchGrid, Combinator } from '@praecipio/brand/react';
+```
+
+Other subpaths: `@praecipio/brand/tokens.json` (machine-readable palette),
+`@praecipio/brand/mkdocs.css` (one-file MkDocs Material branding), and
+`@praecipio/brand/hubspot/*` (HubSpot theme `fields.json` + a HubL stylesheet
+exposing the same `--praecipio-*` variables — `make hubspot` regenerates,
+`make hubspot-upload` pushes to the design manager).
+
+## Rules, not guidelines
+
+Usage rules from the guide are executable: contrast assertions, colorway
+restrictions (black/white logos are print-only), ≥60% primary coverage,
+no gradients. Import them — don't re-derive them.
+
+CMYK values carry no process/ICC spec (`CMYK_INTENT`); treat print output
+as unspecified pending a ruling.
+
+## Versioning
+
+Versioned with the repo's tagged releases ("Praecipio Brand x.y.z"). The
+package, the portal, and the release asset bundles are all built from the
+same source at the same tag.

package/dist/chunk-A6WMWOXD.js

@@ -0,0 +1,192 @@
+// src/color.ts
+var CMYK_INTENT = "as published (guide v2.01, 2024) \u2014 process/ICC/substrate unspecified; needs a print-spec ruling";
+var c = (name, tier, hex, cmyk, pantone) => ({ name, tier, hex, rgb: hexToRgb(hex), cmyk, pantone });
+var prime = {
+  orange: c("orange", "prime", "#C84F09", [16, 81, 100, 5], "718 C"),
+  teal: c("teal", "prime", "#054950", [92, 56, 55, 38], "7476 C"),
+  maroon: c("maroon", "prime", "#6A1933", [38, 95, 61, 44], "7421 C"),
+  navy: c("navy", "prime", "#2B3F60", [90, 76, 38, 27], "534 C")
+};
+var accent = {
+  peach: c("peach", "accent", "#FFBE7A", [0, 29, 58, 0], "149 C"),
+  mint: c("mint", "accent", "#92E5B7", [40, 0, 38, 0], "352 C"),
+  lavender: c("lavender", "accent", "#B699E1", [29, 41, 0, 0], "2645 C"),
+  cyan: c("cyan", "accent", "#39D3D3", [61, 0, 24, 0], "325 C"),
+  coral: c("coral", "accent", "#DD7B6C", [16, 63, 55, 0], "7607 C"),
+  steel: c("steel", "accent", "#6EABB3", [58, 18, 28, 0], "7709 C"),
+  mauve: c("mauve", "accent", "#A4809C", [38, 53, 22, 0], "5145 C"),
+  slate: c("slate", "accent", "#4F8299", [75, 40, 30, 0], "7697 C")
+};
+var neutral = {
+  black: c("black", "neutral", "#000000", [20, 20, 20, 100], "Neutral Black C"),
+  ink: c("ink", "neutral", "#332E27", [0, 8, 18, 94], "Black C"),
+  "gray-dark": c("gray-dark", "neutral", "#7A6E67", [15, 24, 28, 53], "Warm Gray 10 C"),
+  gray: c("gray", "neutral", "#9E968D", [40, 36, 42, 2], "Black 0961 C"),
+  "gray-light": c("gray-light", "neutral", "#C5B9AC", [23, 24, 30, 0], "7528 C"),
+  "gray-faint": c("gray-faint", "neutral", "#D6D1CA", [2, 3, 4, 5], "Warm Gray 1 C")
+};
+var palette = [
+  ...Object.values(prime),
+  ...Object.values(accent),
+  ...Object.values(neutral)
+];
+function hexToRgb(hex) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex);
+  if (!m) throw new Error(`invalid hex color: ${hex}`);
+  const n = parseInt(m[1], 16);
+  return { r: n >> 16 & 255, g: n >> 8 & 255, b: n & 255 };
+}
+function rgbToHex({ r, g, b }) {
+  const h = (v) => Math.round(v).toString(16).padStart(2, "0").toUpperCase();
+  return `#${h(r)}${h(g)}${h(b)}`;
+}
+var TINT_STEPS = [0.1, 0.2, 0.3, 0.4];
+var shadeFactors = {
+  orange: [0.8, 0.6, 0.4, 0.2],
+  teal: [0.9, 0.8, 0.7, 0.5],
+  maroon: [0.9, 0.8, 0.7, 0.6],
+  navy: [0.9, 0.8, 0.7, 0.6]
+};
+function ladder(hex, shades = [0.8, 0.6, 0.4, 0.2]) {
+  const { r, g, b } = hexToRgb(hex);
+  const tint = (k) => rgbToHex({ r: r + (255 - r) * k, g: g + (255 - g) * k, b: b + (255 - b) * k });
+  const shade = (k) => rgbToHex({ r: r * k, g: g * k, b: b * k });
+  return {
+    base: rgbToHex({ r, g, b }),
+    tints: TINT_STEPS.map(tint),
+    shades: shades.map(shade)
+  };
+}
+function primeLadder(name) {
+  return ladder(prime[name].hex, shadeFactors[name]);
+}
+
+// src/rules.ts
+var MIN_LOGO_WIDTH_PX = 80;
+var MIN_PRIMARY_COVERAGE = 0.6;
+function luminance(color) {
+  const { r, g, b } = typeof color === "string" ? hexToRgb(color) : color;
+  const lin = (v) => {
+    const s = v / 255;
+    return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+function contrast(a, b) {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+function isAllowedTextOnWhite(hex) {
+  const accentHexes = new Set(Object.values(accent).map((c2) => c2.hex));
+  return !accentHexes.has(hex.toUpperCase());
+}
+var GRADIENTS_ALLOWED = false;
+var MAX_PATTERN_OPACITY = 0.15;
+
+// src/typography.ts
+var fonts = {
+  heading: {
+    family: "Freight Sans Pro",
+    fallback: "'Nunito Sans', system-ui, sans-serif",
+    role: "heading",
+    license: "commercial (Adobe Fonts / GarageFonts) \u2014 private use only"
+  },
+  body: {
+    family: "Nunito Sans",
+    fallback: "system-ui, sans-serif",
+    role: "body",
+    license: "OFL 1.1"
+  }
+};
+var fontStack = (role) => `'${fonts[role].family}', ${fonts[role].fallback}`;
+var typeSpecs = {
+  heading: ["Black 11/14", "Bold 11/14", "Semibold 11/14"],
+  body: ["Bold 10/14", "Regular 10/14", "Italic 10/14"]
+};
+
+// src/logo.ts
+var orientations = {
+  hori: "Horizontal \u2014 the primary orientation; use when in doubt",
+  verti: "Vertical (stacked) \u2014 avoid at small sizes; can become illegible",
+  "verti-sm": "Vertical small \u2014 stacked variant tuned for smaller sizes",
+  logomark: "Logomark \u2014 the P icon; supportive, used alongside the full logo"
+};
+var colorways = {
+  rgb: { visual: "primary", use: "digital" },
+  cmyk: { visual: "primary", use: "print (process)" },
+  pms: { visual: "primary", use: "print (spot / Pantone)" },
+  "reverse-rgb": { visual: "reverse", use: "digital, on dark backgrounds" },
+  "reverse-cmyk": { visual: "reverse", use: "print (process), on dark backgrounds" },
+  "reverse-pms": { visual: "reverse", use: "print (spot), on dark backgrounds" },
+  black: { visual: "black", use: "one-color print, screen print, embossing, engraving \u2014 never digital" },
+  white: { visual: "white", use: "one-color print, screen print, embossing, engraving \u2014 never digital" }
+};
+var canonicalColorway = {
+  primary: "rgb",
+  reverse: "reverse-rgb",
+  black: "black",
+  white: "white"
+};
+var logoDoNots = [
+  "Do not use a one-color overlay on digital assets",
+  "Do not use unapproved color combinations",
+  "Do not add a drop shadow",
+  "Do not warp or skew the logo",
+  "Do not overlay the logo on complicated or busy backgrounds",
+  "Do not crop the logo",
+  "Do not outline the logo",
+  "Do not change the color of the line 'P' inside the logomark",
+  "Do not rotate or set the logo at an angle",
+  "Do not overlay complicated effects, like bevel or emboss, to a logo",
+  "Do not change the opacity of the logo",
+  "Do not recreate using any other typefaces",
+  "Do not change the integrity of the logo"
+];
+var logomarkUsage = "Place the logomark discreetly in the corner of assets, always after or in conjunction with the full Praecipio logotype. It is not a replacement for the official logo. Do not alter it \u2014 use the official file.";
+var clearspace = "logomark height on all sides";
+
+// src/icons.ts
+var iconRecipe = {
+  library: "Google Material Symbols",
+  style: "Rounded",
+  fill: 0,
+  weight: 400,
+  grade: 0,
+  opticalSize: 40,
+  lineColors: ["black", "white"],
+  chipColors: "any prime or accent color from the palette"
+};
+var iconUsage = "Icons are supportive symbols \u2014 never the main imagery. Use them in conjunction with text: bullet points, check marks, accompanying labels.";
+
+export {
+  CMYK_INTENT,
+  prime,
+  accent,
+  neutral,
+  palette,
+  hexToRgb,
+  rgbToHex,
+  TINT_STEPS,
+  shadeFactors,
+  ladder,
+  primeLadder,
+  MIN_LOGO_WIDTH_PX,
+  MIN_PRIMARY_COVERAGE,
+  luminance,
+  contrast,
+  isAllowedTextOnWhite,
+  GRADIENTS_ALLOWED,
+  MAX_PATTERN_OPACITY,
+  fonts,
+  fontStack,
+  typeSpecs,
+  orientations,
+  colorways,
+  canonicalColorway,
+  logoDoNots,
+  logomarkUsage,
+  clearspace,
+  iconRecipe,
+  iconUsage
+};
+//# sourceMappingURL=chunk-A6WMWOXD.js.map

package/dist/chunk-A6WMWOXD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/color.ts","../src/rules.ts","../src/typography.ts","../src/logo.ts","../src/icons.ts"],"sourcesContent":["// Praecipio palette — Brand Style Guide v2.01 (2024-05-07), pp. 19–20.\n// Values cross-checked against docs/swatches/Praecipio-Color-Values.pdf and\n// the .ase swatch files. Canonical authority is the guide; the logo EPS\n// masters carry the retired legacy orange #C84220 and must not be trusted\n// for color.\n\nexport type Tier = 'prime' | 'accent' | 'neutral';\n\nexport interface Rgb {\n  r: number;\n  g: number;\n  b: number;\n}\n\nexport interface BrandColor {\n  name: string;\n  tier: Tier;\n  hex: string;\n  rgb: Rgb;\n  /**\n   * CMYK percentages exactly as published in guide v2.01 / Color-Values PDF.\n   * ⚠ Print intent is UNSPECIFIED — the guide names no process, ink standard\n   * (SWOP/GRACoL/FOGRA), ICC profile, or substrate. Treat as reference\n   * numbers, not press-ready separations; see CMYK_INTENT.\n   */\n  cmyk: [number, number, number, number];\n  pantone: string;\n}\n\n/** Provenance caveat for all CMYK values in this palette. */\nexport const CMYK_INTENT =\n  'as published (guide v2.01, 2024) — process/ICC/substrate unspecified; needs a print-spec ruling';\n\nconst c = (\n  name: string,\n  tier: Tier,\n  hex: string,\n  cmyk: [number, number, number, number],\n  pantone: string,\n): BrandColor => ({ name, tier, hex, rgb: hexToRgb(hex), cmyk, pantone });\n\nexport const prime = {\n  orange: c('orange', 'prime', '#C84F09', [16, 81, 100, 5], '718 C'),\n  teal: c('teal', 'prime', '#054950', [92, 56, 55, 38], '7476 C'),\n  maroon: c('maroon', 'prime', '#6A1933', [38, 95, 61, 44], '7421 C'),\n  navy: c('navy', 'prime', '#2B3F60', [90, 76, 38, 27], '534 C'),\n} as const;\n\nexport const accent = {\n  peach: c('peach', 'accent', '#FFBE7A', [0, 29, 58, 0], '149 C'),\n  mint: c('mint', 'accent', '#92E5B7', [40, 0, 38, 0], '352 C'),\n  lavender: c('lavender', 'accent', '#B699E1', [29, 41, 0, 0], '2645 C'),\n  cyan: c('cyan', 'accent', '#39D3D3', [61, 0, 24, 0], '325 C'),\n  coral: c('coral', 'accent', '#DD7B6C', [16, 63, 55, 0], '7607 C'),\n  steel: c('steel', 'accent', '#6EABB3', [58, 18, 28, 0], '7709 C'),\n  mauve: c('mauve', 'accent', '#A4809C', [38, 53, 22, 0], '5145 C'),\n  slate: c('slate', 'accent', '#4F8299', [75, 40, 30, 0], '7697 C'),\n} as const;\n\nexport const neutral = {\n  black: c('black', 'neutral', '#000000', [20, 20, 20, 100], 'Neutral Black C'),\n  ink: c('ink', 'neutral', '#332E27', [0, 8, 18, 94], 'Black C'),\n  'gray-dark': c('gray-dark', 'neutral', '#7A6E67', [15, 24, 28, 53], 'Warm Gray 10 C'),\n  gray: c('gray', 'neutral', '#9E968D', [40, 36, 42, 2], 'Black 0961 C'),\n  'gray-light': c('gray-light', 'neutral', '#C5B9AC', [23, 24, 30, 0], '7528 C'),\n  'gray-faint': c('gray-faint', 'neutral', '#D6D1CA', [2, 3, 4, 5], 'Warm Gray 1 C'),\n} as const;\n\nexport const palette: readonly BrandColor[] = [\n  ...Object.values(prime),\n  ...Object.values(accent),\n  ...Object.values(neutral),\n];\n\nexport function hexToRgb(hex: string): Rgb {\n  const m = /^#?([0-9a-f]{6})$/i.exec(hex);\n  if (!m) throw new Error(`invalid hex color: ${hex}`);\n  const n = parseInt(m[1], 16);\n  return { r: (n >> 16) & 0xff, g: (n >> 8) & 0xff, b: n & 0xff };\n}\n\nexport function rgbToHex({ r, g, b }: Rgb): string {\n  const h = (v: number) => Math.round(v).toString(16).padStart(2, '0').toUpperCase();\n  return `#${h(r)}${h(g)}${h(b)}`;\n}\n\n/**\n * Tint/shade ladder — guide p.20. Tints mix toward white at 10/20/30/40%\n * uniformly. Shade factors were hand-tuned per color (already-dark primes get\n * gentler steps), so they are data, not a formula. From the canonical hexes\n * this reproduces the guide's printed values exactly. (The historical .ase\n * ladder was computed from off-by-one base values — a drift this retires.)\n * Guide rule: marketing collateral always uses the primary colors; tints and\n * shades exist for depth via blending/opacity in digital work only.\n */\nexport interface Ladder {\n  base: string;\n  tints: string[]; // toward white: 10%, 20%, 30%, 40%\n  shades: string[]; // multiples of base, per-color factors, darkest last\n}\n\nexport const TINT_STEPS = [0.1, 0.2, 0.3, 0.4] as const;\n\nexport const shadeFactors: Record<keyof typeof prime, readonly number[]> = {\n  orange: [0.8, 0.6, 0.4, 0.2],\n  teal: [0.9, 0.8, 0.7, 0.5],\n  maroon: [0.9, 0.8, 0.7, 0.6],\n  navy: [0.9, 0.8, 0.7, 0.6],\n};\n\nexport function ladder(hex: string, shades: readonly number[] = [0.8, 0.6, 0.4, 0.2]): Ladder {\n  const { r, g, b } = hexToRgb(hex);\n  const tint = (k: number) =>\n    rgbToHex({ r: r + (255 - r) * k, g: g + (255 - g) * k, b: b + (255 - b) * k });\n  const shade = (k: number) => rgbToHex({ r: r * k, g: g * k, b: b * k });\n  return {\n    base: rgbToHex({ r, g, b }),\n    tints: TINT_STEPS.map(tint),\n    shades: shades.map(shade),\n  };\n}\n\n/** The four published prime ladders, exactly as printed in the guide. */\nexport function primeLadder(name: keyof typeof prime): Ladder {\n  return ladder(prime[name].hex, shadeFactors[name]);\n}\n","// Executable usage rules — Brand Style Guide v2.01.\nimport { accent, hexToRgb, type Rgb } from './color.js';\n\n/** Guide p.13: minimum logo width is 0.8 in / 2.032 cm / 80 px. */\nexport const MIN_LOGO_WIDTH_PX = 80;\n\n/** Guide p.19: primary colors should comprise at least 60% of a graphic. */\nexport const MIN_PRIMARY_COVERAGE = 0.6;\n\n/** WCAG 2.x relative luminance. */\nexport function luminance(color: string | Rgb): number {\n  const { r, g, b } = typeof color === 'string' ? hexToRgb(color) : color;\n  const lin = (v: number) => {\n    const s = v / 255;\n    return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;\n  };\n  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);\n}\n\n/** WCAG contrast ratio between two colors, >= 1. */\nexport function contrast(a: string, b: string): number {\n  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);\n  return (hi + 0.05) / (lo + 0.05);\n}\n\n/**\n * Guide p.19: \"Accent colors should never be used on text against a white\n * background.\" White text on an accent background is allowed only for\n * heavy/bold fonts. This predicate encodes the first (hard) rule.\n */\nexport function isAllowedTextOnWhite(hex: string): boolean {\n  const accentHexes = new Set(Object.values(accent).map((c) => c.hex));\n  return !accentHexes.has(hex.toUpperCase());\n}\n\n/** Guide p.19: \"Do not create gradients with these colors.\" */\nexport const GRADIENTS_ALLOWED = false;\n\n/** Guide p.24: pattern overlays behind text cap at 15% opacity (multiply). */\nexport const MAX_PATTERN_OPACITY = 0.15;\n","// Typography — Brand Style Guide v2.01, pp. 16–17.\nexport interface FontRole {\n  family: string;\n  fallback: string;\n  role: 'heading' | 'body';\n  /** Licensing note — governs where the files may ship. */\n  license: string;\n}\n\nexport const fonts = {\n  heading: {\n    family: 'Freight Sans Pro',\n    fallback: \"'Nunito Sans', system-ui, sans-serif\",\n    role: 'heading',\n    license: 'commercial (Adobe Fonts / GarageFonts) — private use only',\n  },\n  body: {\n    family: 'Nunito Sans',\n    fallback: 'system-ui, sans-serif',\n    role: 'body',\n    license: 'OFL 1.1',\n  },\n} as const satisfies Record<string, FontRole>;\n\nexport const fontStack = (role: keyof typeof fonts): string =>\n  `'${fonts[role].family}', ${fonts[role].fallback}`;\n\n/** Published specimen specs: weight and size/leading per role. */\nexport const typeSpecs = {\n  heading: ['Black 11/14', 'Bold 11/14', 'Semibold 11/14'],\n  body: ['Bold 10/14', 'Regular 10/14', 'Italic 10/14'],\n} as const;\n","// Logo system — orientations, colorways, and usage rules.\nexport const orientations = {\n  hori: 'Horizontal — the primary orientation; use when in doubt',\n  verti: 'Vertical (stacked) — avoid at small sizes; can become illegible',\n  'verti-sm': 'Vertical small — stacked variant tuned for smaller sizes',\n  logomark: 'Logomark — the P icon; supportive, used alongside the full logo',\n} as const;\n\nexport type VisualClass = 'primary' | 'reverse' | 'black' | 'white';\n\nexport interface Colorway {\n  /** Which visually-distinct treatment this colorway renders as. */\n  visual: VisualClass;\n  use: string;\n}\n\nexport const colorways: Record<string, Colorway> = {\n  rgb: { visual: 'primary', use: 'digital' },\n  cmyk: { visual: 'primary', use: 'print (process)' },\n  pms: { visual: 'primary', use: 'print (spot / Pantone)' },\n  'reverse-rgb': { visual: 'reverse', use: 'digital, on dark backgrounds' },\n  'reverse-cmyk': { visual: 'reverse', use: 'print (process), on dark backgrounds' },\n  'reverse-pms': { visual: 'reverse', use: 'print (spot), on dark backgrounds' },\n  black: { visual: 'black', use: 'one-color print, screen print, embossing, engraving — never digital' },\n  white: { visual: 'white', use: 'one-color print, screen print, embossing, engraving — never digital' },\n};\n\n/** Canonical colorway to display for each visually-distinct treatment. */\nexport const canonicalColorway: Record<VisualClass, string> = {\n  primary: 'rgb',\n  reverse: 'reverse-rgb',\n  black: 'black',\n  white: 'white',\n};\n\n/** Unacceptable usage — the complete list. */\nexport const logoDoNots = [\n  'Do not use a one-color overlay on digital assets',\n  'Do not use unapproved color combinations',\n  'Do not add a drop shadow',\n  'Do not warp or skew the logo',\n  'Do not overlay the logo on complicated or busy backgrounds',\n  'Do not crop the logo',\n  'Do not outline the logo',\n  \"Do not change the color of the line 'P' inside the logomark\",\n  'Do not rotate or set the logo at an angle',\n  'Do not overlay complicated effects, like bevel or emboss, to a logo',\n  'Do not change the opacity of the logo',\n  'Do not recreate using any other typefaces',\n  'Do not change the integrity of the logo',\n] as const;\n\nexport const logomarkUsage =\n  'Place the logomark discreetly in the corner of assets, always after or in ' +\n  'conjunction with the full Praecipio logotype. It is not a replacement for ' +\n  'the official logo. Do not alter it — use the official file.';\n\n/** Clear space: keep the logomark-height padding free around the logo. */\nexport const clearspace = 'logomark height on all sides';\n","// Iconography recipe — the icon library is generated, not drawn.\nexport const iconRecipe = {\n  library: 'Google Material Symbols',\n  style: 'Rounded',\n  fill: 0,\n  weight: 400,\n  grade: 0,\n  opticalSize: 40,\n  lineColors: ['black', 'white'] as const,\n  chipColors: 'any prime or accent color from the palette',\n} as const;\n\nexport const iconUsage =\n  'Icons are supportive symbols — never the main imagery. Use them in ' +\n  'conjunction with text: bullet points, check marks, accompanying labels.';\n"],"mappings":"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","names":["c"]}

package/dist/hubspot/README.md

@@ -0,0 +1,14 @@
+# Praecipio brand tokens for HubSpot
+
+Generated by `@praecipio/brand` — regenerate with `make hubspot`, never edit.
+
+- **`fields.json`** — drop the two groups into a theme's `fields.json`
+  (or merge into an existing one). The palette becomes page-editor color
+  fields, defaulted to canonical values.
+- **`praecipio-tokens.hubl.css`** — include in the theme's CSS. It maps the
+  theme fields onto the same `--praecipio-*` custom properties every other
+  Praecipio build uses, so modules written against the tokens work unchanged
+  outside HubSpot (and vice versa).
+
+Upload to the design manager with `make hubspot-upload` (requires
+`HUBSPOT_PERSONAL_ACCESS_KEY` and `HUBSPOT_ACCOUNT_ID` in the environment).

package/dist/hubspot/fields.json

@@ -0,0 +1,217 @@
+[
+  {
+    "type": "group",
+    "name": "praecipio_colors",
+    "label": "Praecipio colors",
+    "help_text": "Canonical palette from @praecipio/brand — do not hand-edit values.",
+    "children": [
+      {
+        "type": "color",
+        "name": "prime_orange",
+        "label": "prime / orange",
+        "help_text": "#C84F09 · 718 C",
+        "default": {
+          "color": "#C84F09",
+          "opacity": 100
+        }
+      },
+      {
+        "type": "color",
+        "name": "prime_teal",
+        "label": "prime / teal",
+        "help_text": "#054950 · 7476 C",
+        "default": {
+          "color": "#054950",
+          "opacity": 100
+        }
+      },
+      {
+        "type": "color",
+        "name": "prime_maroon",
+        "label": "prime / maroon",
+        "help_text": "#6A1933 · 7421 C",
+        "default": {
+          "color": "#6A1933",
+          "opacity": 100
+        }
+      },
+      {
+        "type": "color",
+        "name": "prime_navy",
+        "label": "prime / navy",
+        "help_text": "#2B3F60 · 534 C",
+        "default": {
+          "color": "#2B3F60",
+          "opacity": 100
+        }
+      },
+      {
+        "type": "color",
+        "name": "accent_peach",
+        "label": "accent / peach",
+        "help_text": "#FFBE7A · 149 C",
+        "default": {
+          "color": "#FFBE7A",
+          "opacity": 100
+        }
+      },
+      {
+        "type": "color",
+        "name": "accent_mint",
+        "label": "accent / mint",
+        "help_text": "#92E5B7 · 352 C",
+        "default": {
+          "color": "#92E5B7",
+          "opacity": 100
+        }
+      },
+      {
+        "type": "color",
+        "name": "accent_lavender",
+        "label": "accent / lavender",
+        "help_text": "#B699E1 · 2645 C",
+        "default": {
+          "color": "#B699E1",
+          "opacity": 100
+        }
+      },
+      {
+        "type": "color",
+        "name": "accent_cyan",
+        "label": "accent / cyan",
+        "help_text": "#39D3D3 · 325 C",
+        "default": {
+          "color": "#39D3D3",
+          "opacity": 100
+        }
+      },
+      {
+        "type": "color",
+        "name": "accent_coral",
+        "label": "accent / coral",
+        "help_text": "#DD7B6C · 7607 C",
+        "default": {
+          "color": "#DD7B6C",
+          "opacity": 100
+        }
+      },
+      {
+        "type": "color",
+        "name": "accent_steel",
+        "label": "accent / steel",
+        "help_text": "#6EABB3 · 7709 C",
+        "default": {
+          "color": "#6EABB3",
+          "opacity": 100
+        }
+      },
+      {
+        "type": "color",
+        "name": "accent_mauve",
+        "label": "accent / mauve",
+        "help_text": "#A4809C · 5145 C",
+        "default": {
+          "color": "#A4809C",
+          "opacity": 100
+        }
+      },
+      {
+        "type": "color",
+        "name": "accent_slate",
+        "label": "accent / slate",
+        "help_text": "#4F8299 · 7697 C",
+        "default": {
+          "color": "#4F8299",
+          "opacity": 100
+        }
+      },
+      {
+        "type": "color",
+        "name": "neutral_black",
+        "label": "neutral / black",
+        "help_text": "#000000 · Neutral Black C",
+        "default": {
+          "color": "#000000",
+          "opacity": 100
+        }
+      },
+      {
+        "type": "color",
+        "name": "neutral_ink",
+        "label": "neutral / ink",
+        "help_text": "#332E27 · Black C",
+        "default": {
+          "color": "#332E27",
+          "opacity": 100
+        }
+      },
+      {
+        "type": "color",
+        "name": "neutral_gray_dark",
+        "label": "neutral / gray-dark",
+        "help_text": "#7A6E67 · Warm Gray 10 C",
+        "default": {
+          "color": "#7A6E67",
+          "opacity": 100
+        }
+      },
+      {
+        "type": "color",
+        "name": "neutral_gray",
+        "label": "neutral / gray",
+        "help_text": "#9E968D · Black 0961 C",
+        "default": {
+          "color": "#9E968D",
+          "opacity": 100
+        }
+      },
+      {
+        "type": "color",
+        "name": "neutral_gray_light",
+        "label": "neutral / gray-light",
+        "help_text": "#C5B9AC · 7528 C",
+        "default": {
+          "color": "#C5B9AC",
+          "opacity": 100
+        }
+      },
+      {
+        "type": "color",
+        "name": "neutral_gray_faint",
+        "label": "neutral / gray-faint",
+        "help_text": "#D6D1CA · Warm Gray 1 C",
+        "default": {
+          "color": "#D6D1CA",
+          "opacity": 100
+        }
+      }
+    ]
+  },
+  {
+    "type": "group",
+    "name": "praecipio_type",
+    "label": "Praecipio typography",
+    "children": [
+      {
+        "type": "font",
+        "name": "heading_font",
+        "label": "Headings",
+        "help_text": "Freight Sans Pro is the licensed brand heading font (commercial (Adobe Fonts / GarageFonts) — private use only) — add as a custom font only if web-licensed. Nunito Sans is the approved web fallback.",
+        "default": {
+          "font": "Nunito Sans",
+          "font_set": "GOOGLE"
+        }
+      },
+      {
+        "type": "font",
+        "name": "body_font",
+        "label": "Body",
+        "help_text": "OFL 1.1.",
+        "default": {
+          "font": "Nunito Sans",
+          "font_set": "GOOGLE"
+        }
+      }
+    ]
+  }
+]

package/dist/hubspot/praecipio-tokens.hubl.css

@@ -0,0 +1,58 @@
+/* Praecipio brand tokens for HubSpot — generated by @praecipio/brand; do not edit.
+   Theme fields resolve the palette; ladder values are static build-time
+   derivations of those same colors. */
+:root {
+  --praecipio-prime-orange: {{ theme.praecipio_colors.prime_orange.color }};
+  --praecipio-prime-teal: {{ theme.praecipio_colors.prime_teal.color }};
+  --praecipio-prime-maroon: {{ theme.praecipio_colors.prime_maroon.color }};
+  --praecipio-prime-navy: {{ theme.praecipio_colors.prime_navy.color }};
+  --praecipio-accent-peach: {{ theme.praecipio_colors.accent_peach.color }};
+  --praecipio-accent-mint: {{ theme.praecipio_colors.accent_mint.color }};
+  --praecipio-accent-lavender: {{ theme.praecipio_colors.accent_lavender.color }};
+  --praecipio-accent-cyan: {{ theme.praecipio_colors.accent_cyan.color }};
+  --praecipio-accent-coral: {{ theme.praecipio_colors.accent_coral.color }};
+  --praecipio-accent-steel: {{ theme.praecipio_colors.accent_steel.color }};
+  --praecipio-accent-mauve: {{ theme.praecipio_colors.accent_mauve.color }};
+  --praecipio-accent-slate: {{ theme.praecipio_colors.accent_slate.color }};
+  --praecipio-neutral-black: {{ theme.praecipio_colors.neutral_black.color }};
+  --praecipio-neutral-ink: {{ theme.praecipio_colors.neutral_ink.color }};
+  --praecipio-neutral-gray-dark: {{ theme.praecipio_colors.neutral_gray_dark.color }};
+  --praecipio-neutral-gray: {{ theme.praecipio_colors.neutral_gray.color }};
+  --praecipio-neutral-gray-light: {{ theme.praecipio_colors.neutral_gray_light.color }};
+  --praecipio-neutral-gray-faint: {{ theme.praecipio_colors.neutral_gray_faint.color }};
+  /* derived ladders (regenerate on palette change) */
+  --praecipio-orange-tint-10: #ce6122;
+  --praecipio-orange-tint-20: #d3723a;
+  --praecipio-orange-tint-30: #d98453;
+  --praecipio-orange-tint-40: #de956b;
+  --praecipio-orange-shade-80: #a03f07;
+  --praecipio-orange-shade-60: #782f05;
+  --praecipio-orange-shade-40: #502004;
+  --praecipio-orange-shade-20: #281002;
+  --praecipio-teal-tint-10: #1e5b62;
+  --praecipio-teal-tint-20: #376d73;
+  --praecipio-teal-tint-30: #508085;
+  --praecipio-teal-tint-40: #699296;
+  --praecipio-teal-shade-90: #054248;
+  --praecipio-teal-shade-80: #043a40;
+  --praecipio-teal-shade-70: #043338;
+  --praecipio-teal-shade-50: #032528;
+  --praecipio-maroon-tint-10: #793047;
+  --praecipio-maroon-tint-20: #88475c;
+  --praecipio-maroon-tint-30: #975e70;
+  --praecipio-maroon-tint-40: #a67585;
+  --praecipio-maroon-shade-90: #5f172e;
+  --praecipio-maroon-shade-80: #551429;
+  --praecipio-maroon-shade-70: #4a1224;
+  --praecipio-maroon-shade-60: #400f1f;
+  --praecipio-navy-tint-10: #405270;
+  --praecipio-navy-tint-20: #556580;
+  --praecipio-navy-tint-30: #6b7990;
+  --praecipio-navy-tint-40: #808ca0;
+  --praecipio-navy-shade-90: #273956;
+  --praecipio-navy-shade-80: #22324d;
+  --praecipio-navy-shade-70: #1e2c43;
+  --praecipio-navy-shade-60: #1a263a;
+  --praecipio-font-heading: '{{ theme.praecipio_type.heading_font.font }}', 'Nunito Sans', system-ui, sans-serif;
+  --praecipio-font-body: '{{ theme.praecipio_type.body_font.font }}', system-ui, sans-serif;
+}