10 — Brand kit (`@framework/brand`)

Princípio

Um lugar para rebrandar: nome, domínios, cores, tipografia, logos, favicons, tokens de tema, SEO default e shell de email vivem em packages/brand. Apps consomem — não duplicam.

packages/brand (editar no fork)
    ├── config.ts / brand-data.json   → identidade + domínios + SEO
    ├── assets/                       → logos, favicons, og-image
    ├── theme.css                     → tokens shadcn (HSL)
    └── helpers (metadata, email, tailwind preset)
           ↓
    @framework/ui  →  apps/app, apps/backoffice
    imports diretos → apps/website, apps/service

O que o pacote exporta

Expand table full width

Design guide (dev)

pnpm dev:brand    # http://localhost:6007 — catálogo visual
pnpm build:brand  # dist-guide/

---

Obrigatoriedade — quando deve usar @framework/brand

Use o pacote (nunca hardcode) nestes casos:

Expand table full width

Gate de revisão (PR/commit mental)

Antes de mergear código que toca identidade, pergunte:

1. Existe string com nome do produto, domínio *.forestbit.io ou hex da paleta fora de packages/brand?
2. Existe logo/favicon copiado manualmente para public/ sem passar por assets/?
3. O CSS de tema foi duplicado em apps/*/src/index.css em vez de importar @framework/ui/styles.css?

Se sim em qualquer item → corrigir para usar @framework/brand.

---

Quando não é obrigatório (e o que fica fora)

Expand table full width

---

Uso por app

apps/app e apps/backoffice (Vite + React)

import { APP_NAME, BrandLogo, getThemeStorageKey } from '@framework/brand'

Expand table full width

Assets em public/brand/ e public/favicon.* são gerados no dev/build — não editar à mão.

apps/website (Next.js)

import { getBrandMetadata, getNextFontOptions } from '@framework/brand'
import { brandConfig } from '@framework/brand/config'

Expand table full width

apps/service (NestJS)

import { APP_NAME, getAppUrl, resolveEmailBrand, wrapEmailContent } from '../../lib/brand'

Expand table full width

Após editar config.ts, rodar:

pnpm --filter @framework/brand sync-brand-data

@framework/ui

• Importa @framework/brand/theme.css em src/index.css
• Não duplicar tokens :root / .dark no UI ou nos apps

---

Anti-padrões (proibidos após centralização)

Expand table full width

---

Fluxo de rebrand (fork)

Ordem recomendada — detalhe em PLAYBOOK Fase 0:

1. Editar packages/brand/src/config.ts e packages/brand/assets/
2. pnpm rebrand:sync (env examples + cloud/dokploy)
3. Copiar .env.example → .env nos apps; preencher secrets
4. i18n: editar src/locales/ no Cursor
5. Validar: pnpm dev:brand, pnpm dev, metadata e logos nos 4 apps

Não rebrandar app por app copiando assets ou cores.

Checklist detalhado: specs/001-setup-initial/checklists/requirements.md.

---

Relação com outras docs

Expand table full width

Links relacionados

• packages/brand/README.md
• specs/001-setup-initial/spec.md
• product/04 — Setup / rebrand