brand-kit

NoTambourine brand assets and guidance for design, decks, and copy. Use the stylesheets, fonts, and logo together. Read SKILL.md for the relevant guidance.

Correct a brand value here. Every other copy is downstream.

scripts/build-logo.py holds the mark's path data and the wordmark's type parameters, and writes every file under logo/. It traces the wordmark out of fonts/nunito-latin-var.woff2, so the outlines cannot drift from the face the stylesheets load. Change the logo by editing that script and re-running it:

./scripts/build-logo.py    # needs rsvg-convert on PATH

The raster half shells out to rsvg-convert, which ships in librsvg: brew install librsvg on macOS or Linux, the GTK runtime on Windows. The vector half runs without it.

The monogram uses the lockup's first two letters with the same face, size, and position. The letters lose detail at 16px; use favicon.svg for browser scaling.

lockup-text.svg overruns its viewBox in librsvg and resvg, which apply letter-spacing differently than a browser does. That is why the outlined lockup.svg is the default and the source of every raster.

Everything in logo/export/ is cut from the SVGs above, so treat it as output: regenerate it, never retouch it.

logo/site.webmanifest names its icons relative to itself, so it works wherever logo/ is served as a unit.

<link rel="icon" href="/logo/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/logo/export/favicon.ico" sizes="32x32" />
<link rel="apple-touch-icon" href="/logo/export/apple-touch-icon.png" />
<link rel="manifest" href="/logo/site.webmanifest" />

Install the package and import its stylesheets from node_modules. Keep copied assets tied to the installed version.

npm install @notambourine/brand-kit

There is no exports map, so import or copy any shipped path directly:

import "@notambourine/brand-kit/tokens.css";

cp -R node_modules/@notambourine/brand-kit/{fonts,logo} public/

tokens.css declares the @font-face rules and every var() the other two read, so load it first and serve fonts/ beside it. The paths inside it are relative to the CSS file, so inlining it into a <style> block breaks the faces.

A surface with its own faces and base layer imports vars.css alone and writes var() against the semantic aliases. Neither system needs anything from this kit beyond the custom properties.

import "@notambourine/brand-kit/vars.css";

const styles = stylex.create({
  card: { backgroundColor: "var(--bg-card)", padding: "var(--sp-6)" },
});

Tailwind claims the --font-* and --ease-* namespaces for its own utilities, which is why those two groups ship a --nt-* primitive under the alias: a Tailwind surface reads the primitive. StyleX hashes the names it generates and collides with neither.

Two StyleX-specific traps. Bridging through stylex.defineVars breaks .theme-light, because StyleX declares those properties on :root and a custom property resolves where it is declared, so a .theme-light subtree still inherits the dark value; a raw var() string resolves at the element and themes correctly. And StyleX outranks the element styles in elements.css only while useCSSLayers is off - turn layers on and an unlayered h1 wins, so import into a layer StyleX orders itself against:

@import "@notambourine/brand-kit/tokens.css" layer(base);

The package ships the stylesheets, fonts/, logo/, and SKILL.md. The logo build script and hello-world.html stay in the repo. Pin an exact version and bump it on purpose; a caret range moves the brand under a consumer with no diff to review.

Consumers today:

A var(--x) that reads a token this repo stopped declaring falls through to its fallback and the page still renders, so a bump can go wrong quietly. Check three things in the consumer's CI: the font bytes hash against fonts/, every color is one this kit defines, and every var() reads a property it still declares. notambourine/share's npm run brand is the reference implementation.

Install dependencies with npm ci. Run npm run format before sharing documents or exporting them. Markdown and MDX are included, along with HTML and JSON/YAML. Review rendered output after formatting.

Update version in package.json and the lockfile, then merge to main. The publish workflow releases versions that are not already on npm and tags the published commit. Formatting must pass before the package is packed or published.

Publishing uses npm trusted publishing with provenance.

MIT for the stylesheets and SKILL.md. The faces in fonts/ are SIL Open Font License; see fonts/OFL.txt.