The fourteen brand palettes

Swap the tokens, keep the motion. A component in this library never hard-codes a colour or a typeface; it takes a BrandTokens object and reads every fill, every label and every hairline out of it. That is the whole reason all 148 components carry a brand prop, and it is what lets one library produce video that looks like it was made for your brand rather than for a template store.

One exception, and it is deliberate: a colour that is not yours to choose. The handful of components that quote a platform read YouTube’s red from src/registry/platform.ts rather than from a palette, because a subscribe button that is not that red is not a subscribe button.

The strip below is one layout drawn once per palette. Same proportions, same type sizes, nothing changing but colour. It is markup rather than a render, and it uses only the five colours the catalog ships. A real component does the same thing with all fifteen fields.

A palette is a plain object you can author, diff and version, the same idea a closed tool exposes as an opaque design system setting, except here it sits in one file, is versioned with the code, and a change to it reads as a diff rather than as a support ticket. Adding a brand is one object with fifteen fields, and it touches no component.

The palettes

Each card shows the five colour roles the exported catalog carries, painted on that palette’s own canvas, because a swatch judged against the wrong background is a swatch you will pick wrongly.

Every field, and what it is for

A palette is more than colour: the type stack and the corner radius travel with it, which is why Press renders with a narrow display face and 2px corners while Signal rounds to 12. Fill in all fifteen and every component in the catalogue can render against it.

Eight of the fifteen leave the file. The catalog serialises the id, the name, the description, and five of the eight colours as a swatch: [bg, surface, ink, accent, accentAlt] which is enough to recognise a palette and not enough to render one. That is everything this page and registry.json know; a render reads the rest out of the module directly. The full object lives in src/registry/tokens.ts, which imports nothing and is therefore safe to read from server code. The three font fields are plain CSS stacks for the same reason: the actual font loading lives in src/registry/fonts.ts.

Using one

Set the prop. Nothing else in the call changes, and nothing about the timing changes: the same entrance, the same hold, the same exit, in somebody else’s colours.

{ id: "kinetic-headline", props: { headline: "Words, to videos", brand: "press" } }

The prop is a string rather than an enum, and all 148 components read it as BRANDS[brand] with a fallback palette named on the same line, Slate for most of them. An id that is not in BRANDS therefore renders in that fallback rather than stopping the render: a typo costs you a clip in the wrong colours, not a job that dies partway through a batch.

Authoring your own

Copy any existing entry, change the values, keep the keys. The id becomes a legal value of the brand prop on all 148 components the moment it exists, and the next npm run export carries the new swatch into registry.json for agents to read.

// src/registry/tokens.ts: a new entry in BRANDS
acme: {
  id: "acme",
  name: "Acme",
  description: "Warm dark with one orange. Product launches.",
  bg: "#0C0A09",
  surface: "#1A1614",
  ink: "#FAF6F2",
  inkMuted: "#9A8E85",
  accent: "#FF5A1F",
  accentInk: "#FFFFFF",
  accentAlt: "#4CC3FF",
  rule: "#2A2320",
  fontDisplay: DISPLAY,
  fontBody: BODY,
  fontMono: MONO,
  radius: 10,
},

Why Slate is the default

DEFAULT_BRAND is Slate, and 57 of the 148 components name it as their own default. It is cool dark editorial: it reads as an edit suite, which is the room this work is finished in. A dark neutral ground is also the safest thing to composite over: it sits behind a talking head or a screen recording without competing, and it leaves one accent to do all the work, which is the restraint accent is written for.

The cost of that default is visible in the catalogue: 97 of 148components render on a dark ground when you browse them, because every preview is rendered at that component’s own default. Paper, Press and Field are the corrective, and every component takes one, and a light version of any of them is a prop change, not a different component.