@praecipio/brand 0.1.0

package/dist/react/index.js

@@ -0,0 +1,291 @@
+import {
+  CMYK_INTENT,
+  accent,
+  contrast,
+  luminance,
+  neutral,
+  palette,
+  prime,
+  primeLadder
+} from "../chunk-A6WMWOXD.js";
+
+// src/react/SwatchGrid.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SwatchGrid() {
+  return /* @__PURE__ */ jsx("div", { className: "swatch-grid", title: `CMYK: ${CMYK_INTENT}`, children: palette.map((c) => {
+    const isPrime = c.tier === "prime";
+    const l = isPrime ? primeLadder(c.name) : null;
+    return /* @__PURE__ */ jsxs("div", { className: "swatch", children: [
+      /* @__PURE__ */ jsx("div", { className: "swatch-chip", style: { background: c.hex } }),
+      l && /* @__PURE__ */ jsxs("div", { className: "swatch-ladder", children: [
+        [...l.shades].reverse().map((hex) => /* @__PURE__ */ jsx("span", { style: { background: hex } }, hex)),
+        /* @__PURE__ */ jsx("span", { style: { background: l.base } }),
+        l.tints.map((hex) => /* @__PURE__ */ jsx("span", { style: { background: hex } }, hex))
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "swatch-meta", children: [
+        /* @__PURE__ */ jsx("strong", { children: c.name }),
+        " ",
+        /* @__PURE__ */ jsxs("em", { children: [
+          "(",
+          c.tier,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsx("br", {}),
+        c.hex,
+        " \xB7 ",
+        c.pantone,
+        /* @__PURE__ */ jsx("br", {}),
+        "CMYK ",
+        c.cmyk.join(".")
+      ] })
+    ] }, c.name);
+  }) });
+}
+
+// src/react/Combinator.tsx
+import { useMemo, useState } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var surface = (label, hex) => ({
+  label,
+  hex,
+  kind: luminance(hex) > 0.35 ? "light" : "dark"
+});
+var surfaces = [
+  surface("white", "#FFFFFF"),
+  surface("prime-teal", prime.teal.hex),
+  surface("prime-maroon", prime.maroon.hex),
+  surface("prime-navy", prime.navy.hex),
+  surface("teal-shade-80", primeLadder("teal").shades[1]),
+  surface("navy-shade-80", primeLadder("navy").shades[1]),
+  surface("orange-tint-30", primeLadder("orange").tints[2]),
+  surface("teal-tint-40", primeLadder("teal").tints[3]),
+  surface("gray-faint", neutral["gray-faint"].hex)
+];
+var logoFor = (s, orient) => {
+  const name = { hori: "Hori", verti: "Verti", logomark: "Logomark" }[orient];
+  return s.kind === "light" ? { file: `Praecipio_${name}_RGB.png`, visual: "primary", dir: `${orient}/primary` } : orient === "logomark" ? { file: "Praecipio_Logomark_White.png", visual: "white (logomark exception on dark)", dir: "logomark/white" } : { file: `Praecipio_${name}_RVRS_Light_RGB.png`, visual: "reverse", dir: `${orient}/reverse` };
+};
+var orients = ["hori", "verti", "logomark"];
+var arrangements = [
+  "hero: logo top-left, headline centered-left, accent callout chip lower-right",
+  "centered: logomark above headline, generous clearspace, single accent rule below",
+  "split: left half surface color with logo + headline, right half white with body text",
+  "badge: content leads, logomark discreet in the corner (after the full logotype)"
+];
+var pick = (arr) => arr[Math.floor(Math.random() * arr.length)];
+function legalAccent(surface2) {
+  const candidates = Object.values(accent).map((c) => ({ label: `accent-${c.name}`, hex: c.hex })).filter((c) => contrast(c.hex, surface2.hex) >= 3);
+  return candidates.length ? pick(candidates) : { label: "accent-peach", hex: accent.peach.hex };
+}
+function makeCombo() {
+  const surface2 = pick(surfaces);
+  const orient = pick(orients);
+  const logo = logoFor(surface2, orient);
+  const acc = legalAccent(surface2);
+  const textCandidates = [
+    { label: "neutral-ink", hex: neutral.ink.hex },
+    { label: "white", hex: "#FFFFFF" }
+  ].filter((t) => contrast(t.hex, surface2.hex) >= 4.5);
+  const text = pick(textCandidates);
+  const arrangement = pick(arrangements);
+  return { surface: surface2, orient, logo, acc, text, arrangement };
+}
+function prompt(c) {
+  return [
+    "Compose a Praecipio-branded graphic using @praecipio/brand:",
+    `- surface: ${c.surface.label} (${c.surface.hex}) \u2014 keep prime coverage >= 60%`,
+    `- logo: ${c.orient} orientation, ${c.logo.visual} treatment (build/logo/${c.logo.dir}), min width 80px, clearspace = logomark height`,
+    `- text: ${c.text.label} (${c.text.hex}), headings Freight Sans Pro, body Nunito Sans`,
+    `- accent: ${c.acc.label} (${c.acc.hex}) for graphic elements only \u2014 never as text on white`,
+    `- arrangement: ${c.arrangement}`,
+    "- rules: no gradients, no drop shadows, no rotation, patterns <= 15% opacity multiply"
+  ].join("\n");
+}
+function Combinator({ assetBase }) {
+  const [combo, setCombo] = useState(makeCombo);
+  const [copied, setCopied] = useState(false);
+  const text = useMemo(() => prompt(combo), [combo]);
+  const copy = () => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  };
+  const logoSrc = `${assetBase}assets/gallery/logo/${combo.logo.dir}/${combo.logo.file}`;
+  return /* @__PURE__ */ jsxs2("div", { className: "combinator", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "combinator-bar", children: [
+      /* @__PURE__ */ jsx2("button", { onClick: () => setCombo(makeCombo()), children: "\u27F3 shuffle" }),
+      /* @__PURE__ */ jsx2("button", { onClick: copy, children: copied ? "copied \u2713" : "copy prompt" }),
+      /* @__PURE__ */ jsxs2("span", { className: "combinator-meta", children: [
+        combo.surface.label,
+        " \xB7 ",
+        combo.orient,
+        "/",
+        combo.logo.visual,
+        " \xB7 ",
+        combo.acc.label
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "combinator-preview", style: { background: combo.surface.hex }, children: [
+      /* @__PURE__ */ jsx2("img", { src: logoSrc, alt: "logo", style: { maxWidth: 180, maxHeight: 90 } }),
+      /* @__PURE__ */ jsx2("div", { style: { color: combo.text.hex, fontWeight: 800, fontSize: "1.3rem" }, children: "Building Connected Enterprises" }),
+      /* @__PURE__ */ jsx2("div", { style: { color: combo.text.hex, opacity: 0.85, fontSize: "0.8rem" }, children: "Real solutions for real challenges \u2014 strategy, process, and people, aligned." }),
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          style: {
+            background: combo.acc.hex,
+            height: 8,
+            width: 96,
+            borderRadius: 4
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx2("div", { style: { color: combo.text.hex, opacity: 0.6, fontSize: "0.65rem" }, children: combo.arrangement })
+    ] }),
+    /* @__PURE__ */ jsx2("pre", { className: "combinator-prompt", children: text })
+  ] });
+}
+
+// src/react/Sampler.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var v = (token) => `var(--praecipio-${token})`;
+var button = (bg, fg, outline) => ({
+  background: bg,
+  color: fg,
+  border: outline ? `2px solid ${outline}` : "none",
+  borderRadius: 6,
+  padding: "0.55rem 1.2rem",
+  fontFamily: v("font-body"),
+  fontWeight: 700,
+  fontSize: "0.85rem",
+  cursor: "pointer"
+});
+var heading = { fontFamily: v("font-heading"), fontWeight: 800, margin: 0 };
+function Card({ title, children }) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        border: `1px solid ${v("neutral-gray-faint")}`,
+        borderRadius: 8,
+        padding: "1rem 1.1rem",
+        background: "#fff",
+        flex: "1 1 180px"
+      },
+      children: [
+        /* @__PURE__ */ jsx3("h4", { style: { ...heading, color: v("prime-maroon"), fontSize: "1rem", marginBottom: "0.4rem" }, children: title }),
+        /* @__PURE__ */ jsx3("p", { style: { margin: 0, fontSize: "0.8rem", color: v("neutral-ink"), lineHeight: 1.5 }, children }),
+        /* @__PURE__ */ jsx3("a", { href: "#sampler", style: { color: v("prime-teal"), fontWeight: 700, fontSize: "0.8rem" }, children: "Learn more \u2192" })
+      ]
+    }
+  );
+}
+function Sampler() {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        border: `1px solid ${v("neutral-gray-faint")}`,
+        borderRadius: 10,
+        overflow: "hidden",
+        fontFamily: v("font-body")
+      },
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              background: v("prime-navy"),
+              color: "#fff",
+              display: "flex",
+              alignItems: "center",
+              gap: "1.4rem",
+              padding: "0.7rem 1.2rem"
+            },
+            children: [
+              /* @__PURE__ */ jsx3("span", { style: { ...heading, fontSize: "1.05rem" }, children: "Praecipio" }),
+              ["Products", "Solutions", "Docs"].map((l) => /* @__PURE__ */ jsx3("span", { style: { opacity: 0.8, fontSize: "0.8rem" }, children: l }, l)),
+              /* @__PURE__ */ jsx3("button", { style: { ...button(v("prime-orange"), "#fff"), marginLeft: "auto" }, children: "Get started" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs3("div", { style: { background: v("teal-shade-80"), color: "#fff", padding: "2.2rem 1.4rem" }, children: [
+          /* @__PURE__ */ jsx3("h2", { style: { ...heading, fontSize: "1.7rem", maxWidth: "24ch" }, children: "Intelligence Gateway" }),
+          /* @__PURE__ */ jsx3("p", { style: { opacity: 0.85, maxWidth: "52ch", fontSize: "0.9rem", lineHeight: 1.55 }, children: "One consistent surface for every product we ship \u2014 because the colors, type, and rules on this page are imported, not copied." }),
+          /* @__PURE__ */ jsx3("div", { style: { background: v("accent-mint"), height: 6, width: 88, borderRadius: 3, margin: "0.9rem 0 1.1rem" } }),
+          /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "0.7rem" }, children: [
+            /* @__PURE__ */ jsx3("button", { style: button(v("prime-orange"), "#fff"), children: "Try it now" }),
+            /* @__PURE__ */ jsx3("button", { style: button("transparent", "#fff", "#fff"), children: "Read the docs" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { style: { background: "#fff", padding: "1.4rem", display: "flex", flexDirection: "column", gap: "1.1rem" }, children: [
+          /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "0.9rem", flexWrap: "wrap" }, children: [
+            /* @__PURE__ */ jsxs3(Card, { title: "Typed tokens", children: [
+              /* @__PURE__ */ jsx3("code", { children: "primeLadder('orange')" }),
+              " reproduces the guide exactly \u2014 in TypeScript, CSS, or JSON."
+            ] }),
+            /* @__PURE__ */ jsx3(Card, { title: "Rules as code", children: "Contrast, coverage, and colorway legality ship as functions and tests, not PDFs." }),
+            /* @__PURE__ */ jsx3(Card, { title: "One version", children: "The portal, asset bundles, and this package all build from the same tag." })
+          ] }),
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              style: {
+                background: v("orange-tint-30"),
+                color: v("prime-maroon"),
+                borderRadius: 6,
+                padding: "0.7rem 1rem",
+                fontSize: "0.8rem",
+                fontWeight: 700
+              },
+              children: "Heads up \u2014 this entire mock is styled from @praecipio/brand/css custom properties. View source: there is not a single hard-coded brand hex here."
+            }
+          ),
+          /* @__PURE__ */ jsxs3("form", { style: { display: "flex", gap: "0.6rem", alignItems: "center", flexWrap: "wrap" }, onSubmit: (e) => e.preventDefault(), children: [
+            /* @__PURE__ */ jsx3("label", { style: { fontSize: "0.8rem", fontWeight: 700, color: v("neutral-ink") }, children: "Stay in the loop" }),
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                placeholder: "you@praecipio.com",
+                style: {
+                  border: `1px solid ${v("neutral-gray-faint")}`,
+                  borderRadius: 6,
+                  padding: "0.5rem 0.8rem",
+                  fontFamily: v("font-body"),
+                  fontSize: "0.8rem",
+                  flex: "1 1 160px"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx3("button", { style: button(v("prime-navy"), "#fff"), children: "Subscribe" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              background: v("prime-navy"),
+              color: "#fff",
+              padding: "0.8rem 1.2rem",
+              fontSize: "0.7rem",
+              opacity: 0.95
+            },
+            children: [
+              "\xA9 Praecipio \u2014 every color, font stack, and spacing decision above came from",
+              " ",
+              /* @__PURE__ */ jsx3("code", { children: "@praecipio/brand" }),
+              "."
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Combinator,
+  Sampler,
+  SwatchGrid
+};
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/SwatchGrid.tsx","../../src/react/Combinator.tsx","../../src/react/Sampler.tsx"],"sourcesContent":["// Swatch grid rendered FROM the library — the portal documents the palette\n// with the palette. If @praecipio/brand changes, this page changes.\nimport { palette, prime, primeLadder, CMYK_INTENT } from '../index.js';\n\nexport function SwatchGrid() {\n  return (\n    <div className=\"swatch-grid\" title={`CMYK: ${CMYK_INTENT}`}>\n      {palette.map((c) => {\n        const isPrime = c.tier === 'prime';\n        const l = isPrime ? primeLadder(c.name as keyof typeof prime) : null;\n        return (\n          <div className=\"swatch\" key={c.name}>\n            <div className=\"swatch-chip\" style={{ background: c.hex }} />\n            {l && (\n              <div className=\"swatch-ladder\">\n                {[...l.shades].reverse().map((hex) => (\n                  <span key={hex} style={{ background: hex }} />\n                ))}\n                <span style={{ background: l.base }} />\n                {l.tints.map((hex) => (\n                  <span key={hex} style={{ background: hex }} />\n                ))}\n              </div>\n            )}\n            <div className=\"swatch-meta\">\n              <strong>{c.name}</strong> <em>({c.tier})</em>\n              <br />\n              {c.hex} · {c.pantone}\n              <br />\n              CMYK {c.cmyk.join('.')}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n","// Brand combinator: shuffles LEGAL combinations of surface, logo variant,\n// accent, and arrangement — legality comes from the same @praecipio/brand\n// rules the packages ship, so illegal combos are unrepresentable. Each\n// result includes a copy-pastable prompt for asking Claude to compose it.\nimport { useMemo, useState } from 'react';\nimport { prime, accent, neutral, primeLadder, contrast, luminance } from '../index.js';\n\ninterface Surface {\n  label: string;\n  hex: string;\n  kind: 'light' | 'dark';\n}\n\n// kind is derived, not hand-labeled — the library's luminance() decides\nconst surface = (label: string, hex: string): Surface => ({\n  label,\n  hex,\n  kind: luminance(hex) > 0.35 ? 'light' : 'dark',\n});\n\nconst surfaces: Surface[] = [\n  surface('white', '#FFFFFF'),\n  surface('prime-teal', prime.teal.hex),\n  surface('prime-maroon', prime.maroon.hex),\n  surface('prime-navy', prime.navy.hex),\n  surface('teal-shade-80', primeLadder('teal').shades[1]),\n  surface('navy-shade-80', primeLadder('navy').shades[1]),\n  surface('orange-tint-30', primeLadder('orange').tints[2]),\n  surface('teal-tint-40', primeLadder('teal').tints[3]),\n  surface('gray-faint', neutral['gray-faint'].hex),\n];\n\n// digital-legal logo treatments only (black/white are print-only)\nconst logoFor = (s: Surface, orient: string) => {\n  const name = { hori: 'Hori', verti: 'Verti', logomark: 'Logomark' }[orient];\n  return s.kind === 'light'\n    ? { file: `Praecipio_${name}_RGB.png`, visual: 'primary', dir: `${orient}/primary` }\n    : orient === 'logomark'\n      ? { file: 'Praecipio_Logomark_White.png', visual: 'white (logomark exception on dark)', dir: 'logomark/white' }\n      : { file: `Praecipio_${name}_RVRS_Light_RGB.png`, visual: 'reverse', dir: `${orient}/reverse` };\n};\n\nconst orients = ['hori', 'verti', 'logomark'];\nconst arrangements = [\n  'hero: logo top-left, headline centered-left, accent callout chip lower-right',\n  'centered: logomark above headline, generous clearspace, single accent rule below',\n  'split: left half surface color with logo + headline, right half white with body text',\n  'badge: content leads, logomark discreet in the corner (after the full logotype)',\n];\n\nconst pick = <T,>(arr: T[]): T => arr[Math.floor(Math.random() * arr.length)];\n\nfunction legalAccent(surface: Surface): { label: string; hex: string } {\n  const candidates = Object.values(accent)\n    .map((c) => ({ label: `accent-${c.name}`, hex: c.hex }))\n    // accents never as text on white; as graphic elements require 3:1 on the surface\n    .filter((c) => contrast(c.hex, surface.hex) >= 3);\n  return candidates.length ? pick(candidates) : { label: 'accent-peach', hex: accent.peach.hex };\n}\n\nfunction makeCombo() {\n  const surface = pick(surfaces);\n  const orient = pick(orients);\n  const logo = logoFor(surface, orient);\n  const acc = legalAccent(surface);\n  // any text color that passes WCAG AA on the surface is legal — shuffle picks\n  const textCandidates = [\n    { label: 'neutral-ink', hex: neutral.ink.hex },\n    { label: 'white', hex: '#FFFFFF' },\n  ].filter((t) => contrast(t.hex, surface.hex) >= 4.5);\n  const text = pick(textCandidates);\n  const arrangement = pick(arrangements);\n  return { surface, orient, logo, acc, text, arrangement };\n}\n\nfunction prompt(c: ReturnType<typeof makeCombo>): string {\n  return [\n    'Compose a Praecipio-branded graphic using @praecipio/brand:',\n    `- surface: ${c.surface.label} (${c.surface.hex}) — keep prime coverage >= 60%`,\n    `- logo: ${c.orient} orientation, ${c.logo.visual} treatment (build/logo/${c.logo.dir}), min width 80px, clearspace = logomark height`,\n    `- text: ${c.text.label} (${c.text.hex}), headings Freight Sans Pro, body Nunito Sans`,\n    `- accent: ${c.acc.label} (${c.acc.hex}) for graphic elements only — never as text on white`,\n    `- arrangement: ${c.arrangement}`,\n    '- rules: no gradients, no drop shadows, no rotation, patterns <= 15% opacity multiply',\n  ].join('\\n');\n}\n\nexport function Combinator({ assetBase }: { assetBase: string }) {\n  const [combo, setCombo] = useState(makeCombo);\n  const [copied, setCopied] = useState(false);\n  const text = useMemo(() => prompt(combo), [combo]);\n\n  const copy = () => {\n    navigator.clipboard.writeText(text).then(() => {\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    });\n  };\n\n  const logoSrc = `${assetBase}assets/gallery/logo/${combo.logo.dir}/${combo.logo.file}`;\n  return (\n    <div className=\"combinator\">\n      <div className=\"combinator-bar\">\n        <button onClick={() => setCombo(makeCombo())}>⟳ shuffle</button>\n        <button onClick={copy}>{copied ? 'copied ✓' : 'copy prompt'}</button>\n        <span className=\"combinator-meta\">\n          {combo.surface.label} · {combo.orient}/{combo.logo.visual} · {combo.acc.label}\n        </span>\n      </div>\n      <div className=\"combinator-preview\" style={{ background: combo.surface.hex }}>\n        <img src={logoSrc} alt=\"logo\" style={{ maxWidth: 180, maxHeight: 90 }} />\n        <div style={{ color: combo.text.hex, fontWeight: 800, fontSize: '1.3rem' }}>\n          Building Connected Enterprises\n        </div>\n        <div style={{ color: combo.text.hex, opacity: 0.85, fontSize: '0.8rem' }}>\n          Real solutions for real challenges — strategy, process, and people, aligned.\n        </div>\n        <div\n          style={{\n            background: combo.acc.hex,\n            height: 8,\n            width: 96,\n            borderRadius: 4,\n          }}\n        />\n        <div style={{ color: combo.text.hex, opacity: 0.6, fontSize: '0.65rem' }}>\n          {combo.arrangement}\n        </div>\n      </div>\n      <pre className=\"combinator-prompt\">{text}</pre>\n    </div>\n  );\n}\n","// Sampler: a mock product UI composed ONLY from the published consumer\n// surface — `@praecipio/brand/css` custom properties and the library's\n// legality rules. What this renders is exactly what an external build\n// (a Cloudflare container UX, the marketing site) gets from the package:\n// no portal-private styles, no assets, just tokens.\nimport type { CSSProperties, ReactNode } from 'react';\n\nconst v = (token: string) => `var(--praecipio-${token})`;\n\nconst button = (bg: string, fg: string, outline?: string): CSSProperties => ({\n  background: bg,\n  color: fg,\n  border: outline ? `2px solid ${outline}` : 'none',\n  borderRadius: 6,\n  padding: '0.55rem 1.2rem',\n  fontFamily: v('font-body'),\n  fontWeight: 700,\n  fontSize: '0.85rem',\n  cursor: 'pointer',\n});\n\nconst heading: CSSProperties = { fontFamily: v('font-heading'), fontWeight: 800, margin: 0 };\n\nfunction Card({ title, children }: { title: string; children: ReactNode }) {\n  return (\n    <div\n      style={{\n        border: `1px solid ${v('neutral-gray-faint')}`,\n        borderRadius: 8,\n        padding: '1rem 1.1rem',\n        background: '#fff',\n        flex: '1 1 180px',\n      }}\n    >\n      <h4 style={{ ...heading, color: v('prime-maroon'), fontSize: '1rem', marginBottom: '0.4rem' }}>\n        {title}\n      </h4>\n      <p style={{ margin: 0, fontSize: '0.8rem', color: v('neutral-ink'), lineHeight: 1.5 }}>\n        {children}\n      </p>\n      <a href=\"#sampler\" style={{ color: v('prime-teal'), fontWeight: 700, fontSize: '0.8rem' }}>\n        Learn more →\n      </a>\n    </div>\n  );\n}\n\n// Prime coverage stays >= 60% (navy bar, teal hero, navy footer dominate);\n// accents appear only as graphic elements on dark primes; no gradients.\nexport function Sampler() {\n  return (\n    <div\n      style={{\n        border: `1px solid ${v('neutral-gray-faint')}`,\n        borderRadius: 10,\n        overflow: 'hidden',\n        fontFamily: v('font-body'),\n      }}\n    >\n      {/* app bar */}\n      <div\n        style={{\n          background: v('prime-navy'),\n          color: '#fff',\n          display: 'flex',\n          alignItems: 'center',\n          gap: '1.4rem',\n          padding: '0.7rem 1.2rem',\n        }}\n      >\n        <span style={{ ...heading, fontSize: '1.05rem' }}>Praecipio</span>\n        {['Products', 'Solutions', 'Docs'].map((l) => (\n          <span key={l} style={{ opacity: 0.8, fontSize: '0.8rem' }}>\n            {l}\n          </span>\n        ))}\n        <button style={{ ...button(v('prime-orange'), '#fff'), marginLeft: 'auto' }}>\n          Get started\n        </button>\n      </div>\n\n      {/* hero */}\n      <div style={{ background: v('teal-shade-80'), color: '#fff', padding: '2.2rem 1.4rem' }}>\n        <h2 style={{ ...heading, fontSize: '1.7rem', maxWidth: '24ch' }}>\n          Intelligence Gateway\n        </h2>\n        <p style={{ opacity: 0.85, maxWidth: '52ch', fontSize: '0.9rem', lineHeight: 1.55 }}>\n          One consistent surface for every product we ship — because the colors, type, and\n          rules on this page are imported, not copied.\n        </p>\n        <div style={{ background: v('accent-mint'), height: 6, width: 88, borderRadius: 3, margin: '0.9rem 0 1.1rem' }} />\n        <div style={{ display: 'flex', gap: '0.7rem' }}>\n          <button style={button(v('prime-orange'), '#fff')}>Try it now</button>\n          <button style={button('transparent', '#fff', '#fff')}>Read the docs</button>\n        </div>\n      </div>\n\n      {/* content */}\n      <div style={{ background: '#fff', padding: '1.4rem', display: 'flex', flexDirection: 'column', gap: '1.1rem' }}>\n        <div style={{ display: 'flex', gap: '0.9rem', flexWrap: 'wrap' }}>\n          <Card title=\"Typed tokens\">\n            <code>primeLadder('orange')</code> reproduces the guide exactly — in TypeScript,\n            CSS, or JSON.\n          </Card>\n          <Card title=\"Rules as code\">\n            Contrast, coverage, and colorway legality ship as functions and tests, not PDFs.\n          </Card>\n          <Card title=\"One version\">\n            The portal, asset bundles, and this package all build from the same tag.\n          </Card>\n        </div>\n\n        <div\n          style={{\n            background: v('orange-tint-30'),\n            color: v('prime-maroon'),\n            borderRadius: 6,\n            padding: '0.7rem 1rem',\n            fontSize: '0.8rem',\n            fontWeight: 700,\n          }}\n        >\n          Heads up — this entire mock is styled from @praecipio/brand/css custom properties.\n          View source: there is not a single hard-coded brand hex here.\n        </div>\n\n        <form style={{ display: 'flex', gap: '0.6rem', alignItems: 'center', flexWrap: 'wrap' }} onSubmit={(e) => e.preventDefault()}>\n          <label style={{ fontSize: '0.8rem', fontWeight: 700, color: v('neutral-ink') }}>\n            Stay in the loop\n          </label>\n          <input\n            placeholder=\"you@praecipio.com\"\n            style={{\n              border: `1px solid ${v('neutral-gray-faint')}`,\n              borderRadius: 6,\n              padding: '0.5rem 0.8rem',\n              fontFamily: v('font-body'),\n              fontSize: '0.8rem',\n              flex: '1 1 160px',\n            }}\n          />\n          <button style={button(v('prime-navy'), '#fff')}>Subscribe</button>\n        </form>\n      </div>\n\n      {/* footer */}\n      <div\n        style={{\n          background: v('prime-navy'),\n          color: '#fff',\n          padding: '0.8rem 1.2rem',\n          fontSize: '0.7rem',\n          opacity: 0.95,\n        }}\n      >\n        © Praecipio — every color, font stack, and spacing decision above came from{' '}\n        <code>@praecipio/brand</code>.\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","surface","jsx","jsxs"]}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@praecipio/brand",
+  "version": "0.1.0",
+  "description": "Praecipio brand as code: palette, typography, logo rules, React components, and generated CSS tokens. Decompiled from Brand Style Guide v2.01.",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/praecipio/brand.git"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    },
+    "./css": "./dist/praecipio.css",
+    "./mkdocs.css": "./dist/praecipio-mkdocs.css",
+    "./tokens.json": "./dist/praecipio.json",
+    "./hubspot/*": "./dist/hubspot/*",
+    "./tokens": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "tsup": "^8.0.0",
+    "tsx": "^4.7.0",
+    "typescript": "^5.4.0",
+    "vitest": "^3.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/react/index.ts --format esm --dts --sourcemap --external react && pnpm run generate && cp ../../build/tokens/praecipio.css ../../build/tokens/praecipio-mkdocs.css ../../build/tokens/praecipio.json dist/ && rm -rf dist/hubspot && cp -r ../../build/hubspot dist/hubspot",
+    "test": "vitest run",
+    "generate": "tsx generate/css.ts && tsx generate/ase.ts && tsx generate/mkdocs-css.ts && tsx generate/hubspot.ts",
+    "generate:pattern": "tsx generate/pattern-cover.ts"
+  }
+}