/brand-compile

Compile brand tokens from brand.yaml into consumable formats.

What This Does

Reads brand.yaml from project root and produces:

• tokens.css — CSS custom properties (:root + .dark)
• theme.css — Tailwind 4 @theme inline with OKLCH values
• tokens.ts — TypeScript const export for Satori templates and Remotion

Process

1. Locate brand.yaml in the current project root
2. If no brand.yaml exists, check for brand-profile.yaml + design-tokens.json and offer to migrate:

   node ~/Development/brand-kit/dist/src/cli.js migrate --profile brand-profile.yaml --tokens design-tokens.json --out brand.yaml
   

3. Validate the schema:

   node ~/Development/brand-kit/dist/src/cli.js validate brand.yaml
   

4. Compile tokens:

   node ~/Development/brand-kit/dist/src/cli.js compile --out ./src/styles
   

5. Verify Tailwind @theme import exists in the project's CSS entry point (e.g., globals.css)
6. Run typecheck if TypeScript project: pnpm typecheck or npx tsc --noEmit

Output

Default output directory: ./brand-output/ Override with --out ./src/styles to place tokens where your project expects them.

brand-output/
  tokens.css    # CSS custom properties
  theme.css     # Tailwind 4 @theme inline
  tokens.ts     # TypeScript const export

Format Selection

• --format css — Only CSS custom properties
• --format tailwind — Only Tailwind 4 theme
• --format ts — Only TypeScript tokens
• --format all — All three (default)

Integration

After compiling, import in your project:

Tailwind 4 (recommended):

/* globals.css */
@import "tailwindcss";
@import "./theme.css";

Plain CSS:

@import "./tokens.css";

TypeScript (Satori/Remotion):

import { brand } from "./tokens.js";

Related Skills

• /brand-init — Create brand.yaml from scratch
• /brand-assets — Generate OG cards and social images
• /og-card — Legacy OG card generation (superseded by brand-assets)