@repo/brand

@repo/brand is a small private package that holds the product identity for the whole monorepo: the product name, description, URLs, and the logo. Every app and package reads its branding from here, so a fork rebrands in one place instead of hunting through the web app, docs site, emails, and favicons.

Exports

The package exposes four entry points:

The brand object

import { brand } from '@repo/brand';

brand.name; // "Onyx"
brand.slug; // "onyx", for machine identifiers
brand.description; // "The TypeScript starter kit from jxd.dev"
brand.url; // deployed origin
brand.author; // { name, url }

Because it is plain TypeScript with no React or DOM dependencies, the brand object is imported by the CLI, React Email templates, and server code as well as the web app.

slug names everything the product writes that is not prose: the locale and consent cookies, the API key prefix, the log service, and the analytics SDK tag. Worker and Cloudflare resource names follow it by convention (<slug>-web, <slug>-db), but live in wrangler.jsonc, which cannot import TypeScript; renaming them is a step in Make it your own.

BrandMark

BrandMark renders the logo as an inline SVG built from polygons, sized by the parent through className:

import { BrandMark } from '@repo/brand/mark';

export function Header() {
  return <BrandMark className="size-6" />;
}

The optional size prop sets explicit dimensions instead, for renderers with no CSS layout: the OG image template passes size because satori measures SVG by its attributes.

React is a peer dependency, so only React consumers pay for this entry point.

Raw SVG

For places that need a file rather than a component, import the SVG directly. The favicon links in both apps' root routes do this:

import faviconUrl from '@repo/brand/logo.svg?url';

Rebranding a fork

Rebranding is a two-step change inside private/brand:

1. Edit the brand object in src/index.ts with your name, slug, description, and URLs.
2. Replace src/assets/logo.svg and the polygons in src/mark.tsx with your own logo.

The web app shell, docs site, emails, favicons, and OG images pick the changes up from here. For everything a rebrand does not cover, such as Cloudflare resource names, marketing content, and legal text, follow Make it your own.