# @tkawen/brand

Single source of truth for the TKAWEN visual brand system across every TKAWEN product.

## What's in this repo

```
.
├── BRAND.md                 ← full brand spec (philosophy, geometry math, usage rules)
├── products.config.mjs      ← single source of truth for palettes / wordmarks
├── generate.mjs             ← regenerates every SVG from config
├── export-rasters.mjs       ← SVG → PNG (favicons, touch icons, OG masters)
├── export-og.mjs            ← composes 1200×630 Open Graph images per product
├── package-kit.mjs          ← zips everything into site/tkawen-brand-kit.zip
│
├── parent/                  ← TKAWEN parent (3-layer mark · 4 variants)
├── products/{slug}/         ← per-product 2-layer marks (4 variants each × 10 products)
├── exports/{slug}/          ← per-product PNGs, ICOs, OG images (12 files each × 11 brands)
├── tokens/                  ← CSS + JSON design tokens (colors, typography, spacing)
├── icons/                   ← iconography spec + utilities (Lucide-based)
└── site/                    ← brand.tkawen.com static site + downloadable kit zip
```

## Build

```bash
npm install
npm run build       # generate.mjs + export-rasters.mjs + export-og.mjs
npm run build:kit   # package-kit.mjs
```

## Adding a new product (1 line of config, then `npm run build`)

Open `products.config.mjs`, append to `PRODUCTS`:

```js
{
  slug: 'newproduct',
  name: 'New Product',
  wordmark: ['new', 'product'],
  back:  ['#…', '#…', '#…'],   // 3-stop gradient (light → mid → dark)
  front: ['#…', '#…', '#…'],
  accentInk: '#…',              // wordmark color on light surface
  accentInverse: '#…',          // wordmark color on dark surface
}
```

Then `npm run build` — every SVG, PNG, ICO, and OG image lands automatically.

## Migration to a live product (one-time)

In each TKAWEN product repo:

1. Replace existing logo files with the equivalents from `products/{slug}/` and `exports/{slug}/`.
2. Drop in `tokens/index.css` to pick up colors, typography, spacing, motion.
3. Adopt `icons/icons.css` and replace any non-Lucide icon usage.
4. Add the unified TKAWEN footer block (BRAND.md §6).
5. Verify favicons/OG meta tags reference the new files.

## Spec ownership

- **Visual:** Yaakoub Hartem (CEO) + future brand designer
- **Code:** any senior frontend engineer in TKAWEN
- **Pull requests:** open against `D:/F/tkawen-brand` repo, must include before/after preview HTML

## Public site

`https://brand.tkawen.com` ← serves the asset distribution + brand kit zip download.
