@praecipio/brand 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,150 @@
+type Tier = 'prime' | 'accent' | 'neutral';
+interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+interface BrandColor {
+    name: string;
+    tier: Tier;
+    hex: string;
+    rgb: Rgb;
+    /**
+     * CMYK percentages exactly as published in guide v2.01 / Color-Values PDF.
+     * ⚠ Print intent is UNSPECIFIED — the guide names no process, ink standard
+     * (SWOP/GRACoL/FOGRA), ICC profile, or substrate. Treat as reference
+     * numbers, not press-ready separations; see CMYK_INTENT.
+     */
+    cmyk: [number, number, number, number];
+    pantone: string;
+}
+/** Provenance caveat for all CMYK values in this palette. */
+declare const CMYK_INTENT = "as published (guide v2.01, 2024) \u2014 process/ICC/substrate unspecified; needs a print-spec ruling";
+declare const prime: {
+    readonly orange: BrandColor;
+    readonly teal: BrandColor;
+    readonly maroon: BrandColor;
+    readonly navy: BrandColor;
+};
+declare const accent: {
+    readonly peach: BrandColor;
+    readonly mint: BrandColor;
+    readonly lavender: BrandColor;
+    readonly cyan: BrandColor;
+    readonly coral: BrandColor;
+    readonly steel: BrandColor;
+    readonly mauve: BrandColor;
+    readonly slate: BrandColor;
+};
+declare const neutral: {
+    readonly black: BrandColor;
+    readonly ink: BrandColor;
+    readonly 'gray-dark': BrandColor;
+    readonly gray: BrandColor;
+    readonly 'gray-light': BrandColor;
+    readonly 'gray-faint': BrandColor;
+};
+declare const palette: readonly BrandColor[];
+declare function hexToRgb(hex: string): Rgb;
+declare function rgbToHex({ r, g, b }: Rgb): string;
+/**
+ * Tint/shade ladder — guide p.20. Tints mix toward white at 10/20/30/40%
+ * uniformly. Shade factors were hand-tuned per color (already-dark primes get
+ * gentler steps), so they are data, not a formula. From the canonical hexes
+ * this reproduces the guide's printed values exactly. (The historical .ase
+ * ladder was computed from off-by-one base values — a drift this retires.)
+ * Guide rule: marketing collateral always uses the primary colors; tints and
+ * shades exist for depth via blending/opacity in digital work only.
+ */
+interface Ladder {
+    base: string;
+    tints: string[];
+    shades: string[];
+}
+declare const TINT_STEPS: readonly [0.1, 0.2, 0.3, 0.4];
+declare const shadeFactors: Record<keyof typeof prime, readonly number[]>;
+declare function ladder(hex: string, shades?: readonly number[]): Ladder;
+/** The four published prime ladders, exactly as printed in the guide. */
+declare function primeLadder(name: keyof typeof prime): Ladder;
+
+/** Guide p.13: minimum logo width is 0.8 in / 2.032 cm / 80 px. */
+declare const MIN_LOGO_WIDTH_PX = 80;
+/** Guide p.19: primary colors should comprise at least 60% of a graphic. */
+declare const MIN_PRIMARY_COVERAGE = 0.6;
+/** WCAG 2.x relative luminance. */
+declare function luminance(color: string | Rgb): number;
+/** WCAG contrast ratio between two colors, >= 1. */
+declare function contrast(a: string, b: string): number;
+/**
+ * Guide p.19: "Accent colors should never be used on text against a white
+ * background." White text on an accent background is allowed only for
+ * heavy/bold fonts. This predicate encodes the first (hard) rule.
+ */
+declare function isAllowedTextOnWhite(hex: string): boolean;
+/** Guide p.19: "Do not create gradients with these colors." */
+declare const GRADIENTS_ALLOWED = false;
+/** Guide p.24: pattern overlays behind text cap at 15% opacity (multiply). */
+declare const MAX_PATTERN_OPACITY = 0.15;
+
+interface FontRole {
+    family: string;
+    fallback: string;
+    role: 'heading' | 'body';
+    /** Licensing note — governs where the files may ship. */
+    license: string;
+}
+declare const fonts: {
+    readonly heading: {
+        readonly family: "Freight Sans Pro";
+        readonly fallback: "'Nunito Sans', system-ui, sans-serif";
+        readonly role: "heading";
+        readonly license: "commercial (Adobe Fonts / GarageFonts) — private use only";
+    };
+    readonly body: {
+        readonly family: "Nunito Sans";
+        readonly fallback: "system-ui, sans-serif";
+        readonly role: "body";
+        readonly license: "OFL 1.1";
+    };
+};
+declare const fontStack: (role: keyof typeof fonts) => string;
+/** Published specimen specs: weight and size/leading per role. */
+declare const typeSpecs: {
+    readonly heading: readonly ["Black 11/14", "Bold 11/14", "Semibold 11/14"];
+    readonly body: readonly ["Bold 10/14", "Regular 10/14", "Italic 10/14"];
+};
+
+declare const orientations: {
+    readonly hori: "Horizontal — the primary orientation; use when in doubt";
+    readonly verti: "Vertical (stacked) — avoid at small sizes; can become illegible";
+    readonly 'verti-sm': "Vertical small — stacked variant tuned for smaller sizes";
+    readonly logomark: "Logomark — the P icon; supportive, used alongside the full logo";
+};
+type VisualClass = 'primary' | 'reverse' | 'black' | 'white';
+interface Colorway {
+    /** Which visually-distinct treatment this colorway renders as. */
+    visual: VisualClass;
+    use: string;
+}
+declare const colorways: Record<string, Colorway>;
+/** Canonical colorway to display for each visually-distinct treatment. */
+declare const canonicalColorway: Record<VisualClass, string>;
+/** Unacceptable usage — the complete list. */
+declare const logoDoNots: readonly ["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"];
+declare const logomarkUsage: string;
+/** Clear space: keep the logomark-height padding free around the logo. */
+declare const clearspace = "logomark height on all sides";
+
+declare const iconRecipe: {
+    readonly library: "Google Material Symbols";
+    readonly style: "Rounded";
+    readonly fill: 0;
+    readonly weight: 400;
+    readonly grade: 0;
+    readonly opticalSize: 40;
+    readonly lineColors: readonly ["black", "white"];
+    readonly chipColors: "any prime or accent color from the palette";
+};
+declare const iconUsage: string;
+
+export { type BrandColor, CMYK_INTENT, type Colorway, type FontRole, GRADIENTS_ALLOWED, type Ladder, MAX_PATTERN_OPACITY, MIN_LOGO_WIDTH_PX, MIN_PRIMARY_COVERAGE, type Rgb, TINT_STEPS, type Tier, type VisualClass, accent, canonicalColorway, clearspace, colorways, contrast, fontStack, fonts, hexToRgb, iconRecipe, iconUsage, isAllowedTextOnWhite, ladder, logoDoNots, logomarkUsage, luminance, neutral, orientations, palette, prime, primeLadder, rgbToHex, shadeFactors, typeSpecs };

package/dist/index.js

@@ -0,0 +1,63 @@
+import {
+  CMYK_INTENT,
+  GRADIENTS_ALLOWED,
+  MAX_PATTERN_OPACITY,
+  MIN_LOGO_WIDTH_PX,
+  MIN_PRIMARY_COVERAGE,
+  TINT_STEPS,
+  accent,
+  canonicalColorway,
+  clearspace,
+  colorways,
+  contrast,
+  fontStack,
+  fonts,
+  hexToRgb,
+  iconRecipe,
+  iconUsage,
+  isAllowedTextOnWhite,
+  ladder,
+  logoDoNots,
+  logomarkUsage,
+  luminance,
+  neutral,
+  orientations,
+  palette,
+  prime,
+  primeLadder,
+  rgbToHex,
+  shadeFactors,
+  typeSpecs
+} from "./chunk-A6WMWOXD.js";
+export {
+  CMYK_INTENT,
+  GRADIENTS_ALLOWED,
+  MAX_PATTERN_OPACITY,
+  MIN_LOGO_WIDTH_PX,
+  MIN_PRIMARY_COVERAGE,
+  TINT_STEPS,
+  accent,
+  canonicalColorway,
+  clearspace,
+  colorways,
+  contrast,
+  fontStack,
+  fonts,
+  hexToRgb,
+  iconRecipe,
+  iconUsage,
+  isAllowedTextOnWhite,
+  ladder,
+  logoDoNots,
+  logomarkUsage,
+  luminance,
+  neutral,
+  orientations,
+  palette,
+  prime,
+  primeLadder,
+  rgbToHex,
+  shadeFactors,
+  typeSpecs
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/praecipio-mkdocs.css

@@ -0,0 +1,118 @@
+/* praecipio-mkdocs.css — generated by @praecipio/brand; do not edit.
+ * Brands any mkdocs-material site:
+ *   theme: { name: material, palette: { primary: custom } }
+ *   extra_css: [praecipio-mkdocs.css]
+ */
+:root {
+  --praecipio-prime-orange: #c84f09;
+  --praecipio-prime-teal: #054950;
+  --praecipio-prime-maroon: #6a1933;
+  --praecipio-prime-navy: #2b3f60;
+  --praecipio-accent-peach: #ffbe7a;
+  --praecipio-accent-mint: #92e5b7;
+  --praecipio-accent-lavender: #b699e1;
+  --praecipio-accent-cyan: #39d3d3;
+  --praecipio-accent-coral: #dd7b6c;
+  --praecipio-accent-steel: #6eabb3;
+  --praecipio-accent-mauve: #a4809c;
+  --praecipio-accent-slate: #4f8299;
+  --praecipio-neutral-black: #000000;
+  --praecipio-neutral-ink: #332e27;
+  --praecipio-neutral-gray-dark: #7a6e67;
+  --praecipio-neutral-gray: #9e968d;
+  --praecipio-neutral-gray-light: #c5b9ac;
+  --praecipio-neutral-gray-faint: #d6d1ca;
+  --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: 'Freight Sans Pro', 'Nunito Sans', system-ui, sans-serif;
+  --praecipio-font-body: 'Nunito Sans', system-ui, sans-serif;
+}
+
+/* mkdocs-material variable mapping — three schemes:
+ *   default  = light on warm design-gray paper (never stark white)
+ *   twilight = dim warm neutral, graphic-arts gray for judging color
+ *   slate    = dark
+ * Surfaces for artwork tiles are exposed as --praecipio-tile-* so galleries
+ * read correctly in every scheme. */
+:root, [data-md-color-scheme="default"] {
+  --md-primary-fg-color: var(--praecipio-prime-teal);
+  --md-primary-fg-color--light: var(--praecipio-teal-tint-20);
+  --md-primary-fg-color--dark: var(--praecipio-teal-shade-80);
+  --md-accent-fg-color: var(--praecipio-prime-orange);
+  --md-typeset-a-color: var(--praecipio-prime-teal);
+  --md-text-font-family: var(--praecipio-font-body);
+  --md-default-bg-color: #f6f4f1; /* warm paper — not white */
+  --md-code-bg-color: #edeae5;
+  --praecipio-tile-a: #ece9e4;
+  --praecipio-tile-b: #f8f6f3;
+  --praecipio-card-bg: #fffefc;
+  --praecipio-card-fg: var(--praecipio-neutral-ink);
+}
+[data-md-color-scheme="twilight"] {
+  --md-default-bg-color: #33302b; /* warm neutral gray — design viewing */
+  --md-default-fg-color: rgba(232, 228, 222, 0.87);
+  --md-default-fg-color--light: rgba(232, 228, 222, 0.62);
+  --md-default-fg-color--lighter: rgba(232, 228, 222, 0.32);
+  --md-default-fg-color--lightest: rgba(232, 228, 222, 0.12);
+  --md-typeset-color: rgba(232, 228, 222, 0.87);
+  --md-typeset-a-color: var(--praecipio-teal-tint-40);
+  --md-accent-fg-color: var(--praecipio-orange-tint-30);
+  --md-primary-fg-color: var(--praecipio-teal-shade-80);
+  --md-code-bg-color: #2a2723;
+  --md-code-fg-color: var(--praecipio-neutral-gray-light);
+  --md-footer-bg-color: #2a2723;
+  --praecipio-tile-a: #4a463f;
+  --praecipio-tile-b: #55504a;
+  --praecipio-card-bg: #3d3934;
+  --praecipio-card-fg: var(--praecipio-neutral-gray-light);
+}
+[data-md-color-scheme="slate"] {
+  --md-primary-fg-color: var(--praecipio-prime-teal);
+  --md-accent-fg-color: var(--praecipio-prime-orange);
+  --md-typeset-a-color: var(--praecipio-teal-tint-40);
+  --md-default-bg-color: #1b1916; /* warm near-black, not blue-slate */
+  --praecipio-tile-a: #35322d;
+  --praecipio-tile-b: #403c36;
+  --praecipio-card-bg: #262320;
+  --praecipio-card-fg: var(--praecipio-neutral-gray-light);
+}
+.md-typeset h1, .md-typeset h2, .md-typeset h3,
+.md-typeset h4, .md-typeset h5, .md-typeset h6 {
+  font-family: var(--praecipio-font-heading);
+}
+/* restrained brand pop: accent rule under page titles */
+.md-typeset h1 {
+  padding-bottom: 0.25em;
+  border-bottom: 3px solid var(--praecipio-prime-orange);
+  display: inline-block;
+}

package/dist/praecipio.css

@@ -0,0 +1,55 @@
+/* Praecipio brand tokens — generated by @praecipio/brand; do not edit. */
+:root {
+  --praecipio-prime-orange: #c84f09;
+  --praecipio-prime-teal: #054950;
+  --praecipio-prime-maroon: #6a1933;
+  --praecipio-prime-navy: #2b3f60;
+  --praecipio-accent-peach: #ffbe7a;
+  --praecipio-accent-mint: #92e5b7;
+  --praecipio-accent-lavender: #b699e1;
+  --praecipio-accent-cyan: #39d3d3;
+  --praecipio-accent-coral: #dd7b6c;
+  --praecipio-accent-steel: #6eabb3;
+  --praecipio-accent-mauve: #a4809c;
+  --praecipio-accent-slate: #4f8299;
+  --praecipio-neutral-black: #000000;
+  --praecipio-neutral-ink: #332e27;
+  --praecipio-neutral-gray-dark: #7a6e67;
+  --praecipio-neutral-gray: #9e968d;
+  --praecipio-neutral-gray-light: #c5b9ac;
+  --praecipio-neutral-gray-faint: #d6d1ca;
+  --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: 'Freight Sans Pro', 'Nunito Sans', system-ui, sans-serif;
+  --praecipio-font-body: 'Nunito Sans', system-ui, sans-serif;
+}

package/dist/praecipio.json

@@ -0,0 +1,74 @@
+{
+ "orange": {
+  "hex": "#C84F09",
+  "tier": "prime"
+ },
+ "teal": {
+  "hex": "#054950",
+  "tier": "prime"
+ },
+ "maroon": {
+  "hex": "#6A1933",
+  "tier": "prime"
+ },
+ "navy": {
+  "hex": "#2B3F60",
+  "tier": "prime"
+ },
+ "peach": {
+  "hex": "#FFBE7A",
+  "tier": "accent"
+ },
+ "mint": {
+  "hex": "#92E5B7",
+  "tier": "accent"
+ },
+ "lavender": {
+  "hex": "#B699E1",
+  "tier": "accent"
+ },
+ "cyan": {
+  "hex": "#39D3D3",
+  "tier": "accent"
+ },
+ "coral": {
+  "hex": "#DD7B6C",
+  "tier": "accent"
+ },
+ "steel": {
+  "hex": "#6EABB3",
+  "tier": "accent"
+ },
+ "mauve": {
+  "hex": "#A4809C",
+  "tier": "accent"
+ },
+ "slate": {
+  "hex": "#4F8299",
+  "tier": "accent"
+ },
+ "black": {
+  "hex": "#000000",
+  "tier": "neutral"
+ },
+ "ink": {
+  "hex": "#332E27",
+  "tier": "neutral"
+ },
+ "gray-dark": {
+  "hex": "#7A6E67",
+  "tier": "neutral"
+ },
+ "gray": {
+  "hex": "#9E968D",
+  "tier": "neutral"
+ },
+ "gray-light": {
+  "hex": "#C5B9AC",
+  "tier": "neutral"
+ },
+ "gray-faint": {
+  "hex": "#D6D1CA",
+  "tier": "neutral"
+ }
+}

package/dist/react/index.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+
+declare function SwatchGrid(): react.JSX.Element;
+
+declare function Combinator({ assetBase }: {
+    assetBase: string;
+}): react.JSX.Element;
+
+declare function Sampler(): react.JSX.Element;
+
+export { Combinator, Sampler, SwatchGrid };