Brand Studio
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.
Products
| Product | Location | Current status |
|---|
| Brand Studio UI | packages/ui | 113 typed React components for apps, AI agents, effects, story pages and product pages |
| Brand Studio plugin | plugins/brand-studio | Brand Studio skills (brand-design, take-apart, check-visual, post-video, aesthetic-websites) 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.
Run
Requires Node.js 22.12 or newer and npm.
npm install
npm run dev
Open the local URL printed by Vite.
npm run check:brand
npm test
npm run build
npm run typecheck
License
Source code is MIT. Third-party assets keep their own terms; see the PROVENANCE.md file next to each.
