This directory is the single source of truth for Streamplace's visual identity. Everything else — the Expo app icon and splash screen (and from those, every iOS and Android icon format via expo prebuild), favicons, the OG link banner, desktop ICO/ICNS icons, docs logos, the downloadable SVGs on /brand, and the logo components rendered in the app itself — is generated from these files by js/brand/generate.mjs and gitignored.

Run the generator with pnpm run brand from the repo root. It also runs automatically on pnpm install and before app, docs, and desktop builds.

White-labeling #

To ship your own identity, point the generator at your own flat directory of files, either of:

brand/custom/ — a gitignored sibling of this directory; if it contains a brand.json it takes precedence.
SP_BRAND_DIR=/path/to/your/brand — explicit override, wins over both.

The directory in git holds the generic open-source identity.

File contract #

Only two files are required; everything else is synthesized from the mark and brand.json colors when absent.

File	Required	Purpose
`brand.json`	yes	Name, wordmark text, colors, `monochrome` flag, optional `story` for the /brand guidelines page.
`mark.svg`	yes	The logo mark. Must declare a `viewBox`. If `monochrome` is true, use `fill="currentColor"` so the UI can tint it.
`icon.svg` / `icon.png`	no	Full-bleed square app icon art. Default: mark at 62% on `colors.iconBackground`.
`icon-foreground.svg` / `.png`	no	Android adaptive icon foreground (keep art in the inner ~66% safe zone). Default: mark at 45% on transparent.
`splash.svg` / `splash.png`	no	Splash screen logo, shown on `colors.splashBackground`. Default: mark at 50% on transparent.
`wordmark.svg`	no	Wordmark lettering for downloads/lockup. Default: SVG `<text>` of the wordmark string.
`linkbanner.svg` / `.png`	no	1200×630 OG/social card. Default: mark centered on `colors.bannerBackground`.

brand.json #

{
  "name": "Streamplace",
  "wordmark": "stream.place",
  "defaultSiteTitle": "My Streamplace Node",
  "monochrome": false,
  "colors": {
    "ink": "#0A0A0B",
    "paper": "#ffffff",
    "iconBackground": "#ffffff",
    "iconForeground": null,
    "adaptiveIconBackground": "#111113",
    "adaptiveIconForeground": null,
    "splashBackground": "#ffffff",
    "splashForeground": null,
    "tileBackground": "#111113",
    "tileForeground": "#ffffff",
    "tileHairline": "rgba(255,255,255,0.10)",
    "bannerBackground": null,
    "bannerForeground": null
  },
  "story": null
}

All colors are optional; *Foreground colors default to ink and only apply to monochrome marks (a multi-color mark renders as-is). wordmark is the text rendered next to the mark in the app's lockup — a . in it gets the accent treatment. defaultSiteTitle (default My <name> Node) is what an unbranded node calls itself in the nav until its operator sets a runtime siteTitle via the branding admin; a first-party brand points it at its own wordmark so its nodes show the styled wordmark with no runtime config. story optionally carries the mark's design story for the /brand guidelines screen (tagline, readings, geometry, specs, usage — see BrandStory in the generated js/app/assets/generated/brand.ts); sections without data are hidden.