@booleanpress/brand

The brand chrome every site of a BooleanPress product shares: the logo, the header bar and the footer, plus each product's identity. One package serves every product: BooleanSMTP today, BooleanDesk, BooleanSupport and the rest as they arrive. Each product is one entry under brands/, and the same three components render any of them.

---
import BrandHeader from '@booleanpress/brand/header';
import BrandFooter from '@booleanpress/brand/footer';
import { booleansmtp } from '@booleanpress/brand';
---

<BrandHeader brand={booleansmtp} layout="site">
  <nav slot="nav" aria-label="Main">…</nav>
  <Fragment slot="end">…theme switch, buttons…</Fragment>
</BrandHeader>

<main>…</main>

<BrandFooter brand={booleansmtp} />

A @booleanpress/nimbus docs site does not use the components directly: it sets brand: booleansmtp in its site config and nimbus renders them.

What belongs to the product, and what to the site

| Decided by | What | Where | | --- | --- | --- | | The product (the same on all of its sites) | Name, logo artwork (square mark, light and dark wordmark), home page, accent colours, footer content (tagline, columns, legal line) | brands/<id>/index.ts, a Brand object | | The site | Header layout (site or docs), navigation, search, buttons, where the logo links | Props and slots on BrandHeader; the nimbus site config | | This package (the same for every product) | How the logo, header and footer are drawn: spacing, type, the light/dark swap, how links back to the current site are written | components/ |

So a second product changes content, never code: its own brands/<id>/ entry, rendered by the same components. A new kind of layout (a third header layout, say) is a change to a component, available to every product at once.

The components

• BrandLogo (@booleanpress/brand/logo): the product's wordmark, light or dark artwork to match the page's theme (data-mode="dark" from nimbus, or the dark class). Props: brand, href (default: the product's home), height (default 30).

• BrandHeader (@booleanpress/brand/header): the sticky header bar. Layouts:

  • site (default): a marketing site. Content in the page box (--bp-page-max / --bp-page-gutter), the nav slot after the logo, the end slot on the right. 4rem tall.
  • docs: a documentation site with a sidebar. Full width; on desktop the logo block is as wide as the sidebar (--nb-sidebar-width). 3.5rem tall, the height nimbus offsets its sticky sidebar by. boxed puts it in the page box, its first and last items on the gutters of a site bar above it; from 64rem the host's --bpb-nav-offset moves the nav slot right.

  Slots: nav, end, logo (replaces the logo). With no brand, fallbackName is shown as text. sticky: false lets the bar scroll away; as: "div" renders a bar that is not the page's banner landmark.

• ProductHeader (@booleanpress/brand/product-header): the product's own site header, the site layout with brand.nav, a call to action (cta, brand.download by default) and a phone menu (menuLinks are added to it); slot end for controls before the button. The same bar on the product's marketing site and, through nimbus's productHeader, above its docs.

• BrandFooter (@booleanpress/brand/footer): the product's footer, identical on all its sites. A link that points at the site rendering it is written root-relative and marked aria-current="page" on its own page.

The components style themselves (no Tailwind classes, so a host needs no @source entry for this package) and read the host's colour tokens: nimbus's --nb-*, or a shadcn-style site's --foreground, --background, --surface, --border, --link. Both switch in dark mode, so the components do too.

Colours

Brand.theme holds the product's accent (primary, hover, focus ring) for light and dark. nimbus applies it on <html> as its --bp-primary-* custom properties, so a docs site takes its product's colours from here. brandThemeStyle(brand) returns that declaration list for any other host that wants it. A site with its own design tokens (booleansmtp.com) keeps those tokens in step with the brand's theme itself.

Adding a product

1. Logo files. Add the product to BRANDS in the docs repository's scripts/brand-logos.mjs: its id and the paths of its master wide wordmark (transparent PNG, dark ink on transparent) and square mark. Run pnpm brand:logos. It writes brands/<id>/wordmark-light.png (trimmed to the artwork, 120px tall), wordmark-dark.png (the dark ink turned near-white, the brand colour kept) and mark.png. If the product's brand colour is not blue, adjust isBrandColour in the script so the dark variant keeps that colour.
2. The definition. Create brands/<id>/index.ts exporting a Brand, the way brands/booleansmtp/index.ts does: name, home URL, the three logo imports, theme, footer content (absolute URLs).
3. Export it from index.ts: export { booleandesk } from "./brands/booleandesk";.
4. Record it in CHANGELOG.md, bump version in package.json (a new product is a minor version), and release it (the docs repository's office/guides/publish-packages.md).
5. Use it on the product's sites: brand: booleandesk in a nimbus site config, or brand={booleandesk} on the components.

Products

| Export | Sites | | --- | --- | | booleansmtp | booleansmtp.com (BrandHeader site, BrandFooter), its documentation at booleansmtp.com/docs/ and developers.booleansmtp.com (through nimbus) |