1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
# Brand Bench
A client-side brand identity generator. Describe a project and get a complete
brand package — positioning, tone of voice, color palette, typography system,
logo concepts, taglines, and usage examples — instantly in the browser.
No backend. No accounts. Everything runs locally and persists in `localStorage`.
## Features
- **Template generation** — instant, offline-capable brand packages tailored by
category (developer tool, creative studio, SaaS product, etc.)
- **AI generation** — connect your local [Ollama](https://ollama.com) instance
for LLM-powered output; cancellable mid-stream
- **Multiple packages** — create, rename, duplicate, and switch between brand
packages in tabs; each package is independently persisted
- **Inline editing** — click any field in the preview to edit it directly
- **Section locking** — lock sections before regenerating so they stay unchanged
across runs
- **Undo / redo** — full edit history per package (`⌘Z` / `⌘⇧Z`)
- **Color palette** — editable swatches with a native color picker
- **Typography system** — curated font pairings per category with an 8-level
type scale
- **Export** — download as Markdown, JSON, or a self-contained HTML guidelines page
## Getting started
```bash
npm install
npm run dev
```
Open `http://localhost:5173`.
To build for production:
```bash
npm run build # outputs to dist/
npm run preview # serve the build locally
```
## AI with Ollama
Brandbench can generate brand packages using a locally running Ollama model.
1. [Install Ollama](https://ollama.com/download) and pull a model:
```bash
ollama pull llama3.2 # recommended default
ollama pull mistral # good alternative
ollama pull gemma3 # another option
```
2. Make sure Ollama is running:
```bash
ollama serve
```
3. If you're running Ollama on a non-default port or a different host, set the
`OLLAMA_ORIGINS` environment variable to allow browser requests:
```bash
OLLAMA_ORIGINS="*" ollama serve
```
4. Open Settings (⚙) in the app, enable AI, set your base URL
(`http://localhost:11434` by default), select a model, and click **Test
connection**.
Larger models produce better-structured output. If generation fails with a JSON
error, try a bigger model. Generation typically takes 15–60 seconds depending on
hardware.
## Project structure
```
src/
engine/
generator.ts # Template-based brand package generator
aiGenerator.ts # Ollama integration
hooks/
useWorkspace.ts # Per-package state, generate, undo/redo
usePackages.ts # Multi-package tabs and localStorage slots
useSettings.ts # Ollama settings persistence
components/
InputPanel.tsx # Project details form
PreviewPanel.tsx # Brand package preview with toolbar
BrandDoc.tsx # Full brand document (sections, palette, type scale)
PackageSwitcher.tsx # Tab bar with rename/duplicate/delete
SettingsPanel.tsx # AI settings drawer
lib/
sanitize.ts # Defensive coercion for AI output fields
export.ts # Markdown / JSON / HTML export formatters
types.ts # All shared TypeScript interfaces
```
## Tech stack
- [React 18](https://react.dev) + [TypeScript](https://www.typescriptlang.org)
- [Vite](https://vitejs.dev)
- No UI library — plain CSS with custom properties
## License
MIT
|
