Brand Studio turns business facts and visitor purpose into a durable brand contract, then applies that contract across websites and other creative artifacts.
Live docs · Component catalogue · Examples · npm package
It combines a design workflow, an optional accessible React UI package and public examples in one workspace. The system preserves a brand's positioning, voice, typography, colour logic, imagery and signature devices without forcing every output into one visual template or package.
| Product | Location | Current status |
|---|---|---|
| Brand Studio UI | packages/ui | 98 typed React components for apps, AI agents, effects, story pages and product pages |
| Brand Studio plugin | plugins/brand-studio | Shared brand-design skill with Codex and Claude manifests |
| Showcase | apps/showcase | Interactive component library and completed brand studies |
| Docs | apps/docs | Public component docs: live previews in any demo brand, props and copyable code |
| Public examples | examples | Curated standalone proofs, currently focused on authored motion |
Install the published @brand-studio/ui package with npm, pnpm, Yarn or Bun. Browse the component documentation.
Requires Node.js 22.12 or newer and npm.
npm install
npm run devOpen the local URL printed by Vite.
npm run check:brand
npm test
npm run build
npm run typecheckSource code is MIT. Third-party assets keep their own terms; see the PROVENANCE.md file next to each.