@growthpath/brand-kit

Brand Kit is the public framework-neutral design foundation for GrowthPath-owned websites. It owns the type scale, spacing, shapes, background, material, shadows, glows, and site chrome. Each consumer supplies fonts, logos, copy, opaque palette values, and the page width and gutter its site reads at.

Exports

• foundation.css: semantic Tailwind v4 utilities and equivalent CSS properties
• chrome.css: public-site navigation, buttons, footer, theme switch, and skip link
• ambient: deterministic background shapes
• contrast: WCAG contrast arithmetic for consumer contract tests
• brand-template.css: a copy-only scaffold for a consumer's palette

Workspace imports resolve ambient and contrast to TypeScript source. Published imports resolve compiled files in dist. The release workflow applies publishConfig.exports to a staged manifest before packing because npm does not use that field as a manifest override.

Install

bun add @growthpath/brand-kit@^0.3.2
cp "$(node -p 'require.resolve("@growthpath/brand-kit/brand-template.css")')" src/styles/brand.css

Import the shared runtime before the consumer's palette:

@import 'tailwindcss';
@import '@growthpath/brand-kit/foundation.css';
@import '@growthpath/brand-kit/chrome.css';
@import './brand.css';

The public packages follow one 0.x compatibility rule. A breaking export or token change requires a minor bump. A compatible addition or fix requires a patch bump.

Verify and release

bun run --filter @growthpath/brand-kit lint
bun run --filter @growthpath/brand-kit typecheck
bun run --filter @growthpath/brand-kit test
bun run --filter @growthpath/brand-visuals test

The Brand Visuals test packs both public packages and builds the clean external fixture. Releases use the manual workflow and operator steps in docs/ops/package-releases.md.