brandspec 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +230 -0
- package/dist/cli.js +1516 -0
- package/dist/index.cjs +773 -0
- package/dist/index.d.cts +402 -0
- package/dist/index.d.ts +402 -0
- package/dist/index.js +718 -0
- package/package.json +61 -0
- package/schema/spec/assets.md +219 -0
- package/schema/spec/core.md +203 -0
- package/schema/spec/guidelines.md +110 -0
- package/schema/spec/tokens.md +389 -0
- package/schema/v0.1.0.yaml +201 -0
- package/workshop/SKILL.md +218 -0
- package/workshop/flow.md +181 -0
- package/workshop/phases/01-discovery.md +156 -0
- package/workshop/phases/02-concept.md +234 -0
- package/workshop/phases/03-visual.md +271 -0
- package/workshop/phases/04-documentation.md +99 -0
- package/workshop/templates/_workshop/decisions.yml +15 -0
- package/workshop/templates/_workshop/memo.md +23 -0
- package/workshop/templates/_workshop/position.yml +9 -0
- package/workshop/templates/_workshop/session.md +28 -0
- package/workshop/templates/brand.yaml +112 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 numtet
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="brandspec/assets/logo-horizontal-h80.png" height="40" alt="brandspec">
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
# brandspec
|
|
6
|
+
|
|
7
|
+
Define Brand Identity as code.
|
|
8
|
+
|
|
9
|
+
1. Brand workshop, facilitated by AI. Any model, four phases, structured decisions.
|
|
10
|
+
2. Conclusions and history in one format. `brand.yaml` — structured for machines, readable by humans.
|
|
11
|
+
3. Connects consistently to every use — CSS, Tailwind, Figma, Style Dictionary, AI consultation.
|
|
12
|
+
|
|
13
|
+
An open format built on [W3C Design Tokens](https://tr.designtokens.org/format/). MIT licensed.
|
|
14
|
+
|
|
15
|
+
| Component | Path | Role |
|
|
16
|
+
|-----------|------|------|
|
|
17
|
+
| **schema** | `schema/` | Specification — the definition of `brand.yaml` (JSON Schema + machine-friendly spec knowledge) |
|
|
18
|
+
| **workshop** | `workshop/` | Facilitation — AI-guided 4-phase process to create a brand identity |
|
|
19
|
+
| **cli** | `cli/` | Tooling — validate, generate, consult, push/pull |
|
|
20
|
+
|
|
21
|
+
## Quick Start
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
cd my-app
|
|
25
|
+
npx brandspec init # Creates brandspec/ directory
|
|
26
|
+
cd brandspec
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
This gives you:
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
my-app/
|
|
33
|
+
├── brandspec/
|
|
34
|
+
│ ├── brand.yaml # Brand definition (edit this)
|
|
35
|
+
│ ├── assets/ # Logo, symbol, favicon, etc.
|
|
36
|
+
│ └── _workshop/ # Workshop state (AI-resumable)
|
|
37
|
+
└── src/ # Your app source
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
From here, either edit `brand.yaml` directly or run the Workshop to build your brand with AI. Then generate tokens:
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
npx brandspec validate # Check against schema
|
|
44
|
+
npx brandspec generate --format tailwind # → output/theme.css
|
|
45
|
+
npx brandspec generate --format all # → output/tokens.css, theme.css, figma-tokens.json, style-dictionary/
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Workshop — Forge your brand with any AI
|
|
49
|
+
|
|
50
|
+
The Workshop is a structured 4-phase process that works with **any LLM**. Bring your own model — Claude, GPT, Gemini, or any API.
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
npx brandspec workshop start | pbcopy
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
Paste the prompt into your AI and start the session. The workshop asks your preferred language at the start and runs the entire session in it.
|
|
57
|
+
|
|
58
|
+
**4 phases → one `brand.yaml`:**
|
|
59
|
+
|
|
60
|
+
```
|
|
61
|
+
Discovery → Concept → Visual Identity → Documentation
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
The AI guides you through brand essence, personality, colors, typography. All decisions are recorded in `_workshop/decisions.yml` — resumable, auditable, model-independent.
|
|
65
|
+
|
|
66
|
+
**Resume a session:**
|
|
67
|
+
|
|
68
|
+
```bash
|
|
69
|
+
npx brandspec workshop resume | pbcopy
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
The resume prompt includes all previous decisions and current position — paste it into any AI to pick up where you left off.
|
|
73
|
+
|
|
74
|
+
## Consult — Brand-aligned AI in one command
|
|
75
|
+
|
|
76
|
+
Already have a `brand.yaml`? Turn any AI into a brand consultant:
|
|
77
|
+
|
|
78
|
+
```bash
|
|
79
|
+
npx brandspec consult
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
This prints a system prompt to stdout — paste it into any LLM (Claude, GPT, Gemini, etc.) and it will evaluate your copy, campaigns, ads, and design decisions against your brand identity. Pipe it directly:
|
|
83
|
+
|
|
84
|
+
```bash
|
|
85
|
+
npx brandspec consult | pbcopy # macOS — copy to clipboard
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
The prompt includes your brand's personality, voice principles, color palette, typography, logo system, and guidelines — everything the AI needs to stay on-brand.
|
|
89
|
+
|
|
90
|
+
## CLI
|
|
91
|
+
|
|
92
|
+
```
|
|
93
|
+
brandspec <command> [options]
|
|
94
|
+
|
|
95
|
+
Commands:
|
|
96
|
+
init Create a brandspec/ directory with templates
|
|
97
|
+
validate [path] Validate against schema (alias for lint)
|
|
98
|
+
lint [path] Lint brand.yaml (score, errors, warnings)
|
|
99
|
+
--json Machine-readable JSON output
|
|
100
|
+
--quiet Errors only
|
|
101
|
+
generate [path] Generate token files from brand.yaml
|
|
102
|
+
--format <fmt> css, tailwind, figma, sd, all (comma-separated)
|
|
103
|
+
--out <dir> Output directory (default: ./output)
|
|
104
|
+
|
|
105
|
+
consult [path] Print brand context for AI consultation
|
|
106
|
+
|
|
107
|
+
workshop start Print start prompt for AI workshop
|
|
108
|
+
workshop resume Print resume prompt for AI workshop
|
|
109
|
+
workshop status Show current workshop position
|
|
110
|
+
|
|
111
|
+
login Authenticate with brandspec.tools
|
|
112
|
+
--token <tok> Non-interactive (CI)
|
|
113
|
+
logout Remove saved credentials
|
|
114
|
+
push [org/brand] Push brandspec/ to brandspec.tools
|
|
115
|
+
--no-workshop Exclude _workshop/ files
|
|
116
|
+
pull [org/brand] Pull brandspec/ from brandspec.tools
|
|
117
|
+
--no-workshop Exclude _workshop/ files
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Format
|
|
121
|
+
|
|
122
|
+
```yaml
|
|
123
|
+
meta:
|
|
124
|
+
name: "Acme"
|
|
125
|
+
version: "1.0.0"
|
|
126
|
+
|
|
127
|
+
core:
|
|
128
|
+
essence: "Tools that get out of your way"
|
|
129
|
+
tagline: "Build, not configure"
|
|
130
|
+
personality: [precise, confident, minimal]
|
|
131
|
+
voice:
|
|
132
|
+
tone: [direct, helpful]
|
|
133
|
+
principles: ["Use active voice", "Skip the fluff"]
|
|
134
|
+
|
|
135
|
+
tokens:
|
|
136
|
+
colors:
|
|
137
|
+
primary:
|
|
138
|
+
$value: "oklch(0.65 0.18 250)"
|
|
139
|
+
$type: color
|
|
140
|
+
primary-foreground:
|
|
141
|
+
$value: "oklch(0.99 0.005 250)"
|
|
142
|
+
$type: color
|
|
143
|
+
background:
|
|
144
|
+
$value: "oklch(0.99 0.005 250)"
|
|
145
|
+
$type: color
|
|
146
|
+
foreground:
|
|
147
|
+
$value: "oklch(0.25 0.02 250)"
|
|
148
|
+
$type: color
|
|
149
|
+
# ... (see docs/examples/ for complete token set)
|
|
150
|
+
typography:
|
|
151
|
+
heading:
|
|
152
|
+
$value: "Inter, system-ui, sans-serif"
|
|
153
|
+
$type: fontFamily
|
|
154
|
+
body:
|
|
155
|
+
$value: "Inter, system-ui, sans-serif"
|
|
156
|
+
$type: fontFamily
|
|
157
|
+
|
|
158
|
+
assets:
|
|
159
|
+
- file: assets/logo-primary.svg
|
|
160
|
+
id: logo-primary
|
|
161
|
+
role: logo
|
|
162
|
+
variant: primary
|
|
163
|
+
description: "Primary logo for light backgrounds"
|
|
164
|
+
- file: assets/logo-inverse.svg
|
|
165
|
+
id: logo-inverse
|
|
166
|
+
role: logo
|
|
167
|
+
variant: inverse
|
|
168
|
+
- file: assets/symbol.svg
|
|
169
|
+
id: symbol
|
|
170
|
+
role: symbol
|
|
171
|
+
- file: assets/favicon.ico
|
|
172
|
+
id: favicon
|
|
173
|
+
role: favicon
|
|
174
|
+
|
|
175
|
+
guidelines:
|
|
176
|
+
logo-usage:
|
|
177
|
+
content: |
|
|
178
|
+
Use the primary logo on light backgrounds.
|
|
179
|
+
rules:
|
|
180
|
+
- id: logo-min-size
|
|
181
|
+
description: "Logo must meet minimum size requirements"
|
|
182
|
+
severity: error
|
|
183
|
+
applies_to: logo
|
|
184
|
+
criteria:
|
|
185
|
+
- "Digital: minimum 120px width"
|
|
186
|
+
- "Print: minimum 25mm width"
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
Only `meta.name` is required. Everything else is opt-in.
|
|
190
|
+
|
|
191
|
+
### Logo System Patterns
|
|
192
|
+
|
|
193
|
+
The `assets` section uses `role` + `variant` to describe a logo system. Common roles:
|
|
194
|
+
|
|
195
|
+
| Role | Description |
|
|
196
|
+
|------|-------------|
|
|
197
|
+
| `logo` | Main logo (may include wordmark) |
|
|
198
|
+
| `symbol` | Icon/symbol mark (no text) |
|
|
199
|
+
| `wordmark` | Text-only logo |
|
|
200
|
+
| `icon` | Small icon (app icon, etc.) |
|
|
201
|
+
| `favicon` | Browser favicon |
|
|
202
|
+
|
|
203
|
+
Variants: `primary`, `inverse`, `monochrome`, `simplified`, etc. Custom roles are also allowed.
|
|
204
|
+
|
|
205
|
+
File naming convention: `{role}-{variant}.{ext}` (e.g., `logo-primary.svg`, `logo-inverse.svg`, `favicon.ico`).
|
|
206
|
+
|
|
207
|
+
Full asset spec: [`docs/assets.md`](docs/assets.md)
|
|
208
|
+
|
|
209
|
+
Full schema: [`schema/v0.1.0.yaml`](schema/v0.1.0.yaml) | Examples: [`docs/examples/`](docs/examples/)
|
|
210
|
+
|
|
211
|
+
> **Live example:** The [`brandspec/`](brandspec/) directory in this repository is brandspec's own brand definition — built with the Workshop.
|
|
212
|
+
|
|
213
|
+
## Exports
|
|
214
|
+
|
|
215
|
+
`brandspec generate --format <fmt>` produces files in `output/` (override with `--out`):
|
|
216
|
+
|
|
217
|
+
| Format | File | Description |
|
|
218
|
+
|--------|------|-------------|
|
|
219
|
+
| `css` | `tokens.css` | CSS custom properties (`--primary`, `--font-heading`, etc.) |
|
|
220
|
+
| `tailwind` | `theme.css` | Tailwind v4 `@theme` block |
|
|
221
|
+
| `figma` | `figma-tokens.json` | Figma Tokens plugin format |
|
|
222
|
+
| `sd` | `style-dictionary/` | Style Dictionary tokens + config |
|
|
223
|
+
|
|
224
|
+
Combine formats: `--format css,tailwind`. Use `--format all` to generate everything.
|
|
225
|
+
|
|
226
|
+
All outputs target **shadcn/ui + Tailwind v4** compatibility.
|
|
227
|
+
|
|
228
|
+
## License
|
|
229
|
+
|
|
230
|
+
MIT
|