@notambourine/brand-kit 1.3.0 → 1.5.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/README.md +88 -84
- package/SKILL.md +32 -12
- package/package.json +11 -3
- package/references/decks.md +22 -6
- package/references/visual.md +41 -16
- package/references/voice.md +99 -23
package/README.md
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
# brand-kit
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
NoTambourine brand assets and guidance for design, decks, and copy. Use the
|
|
4
|
+
stylesheets, fonts, and logo together. Read `SKILL.md` for the relevant
|
|
5
|
+
guidance.
|
|
6
6
|
|
|
7
7
|
Correct a brand value here. Every other copy is downstream.
|
|
8
8
|
|
|
9
|
-
| Link this
|
|
10
|
-
|
|
11
|
-
| `tokens.css`
|
|
12
|
-
| `vars.css`
|
|
9
|
+
| Link this | To get |
|
|
10
|
+
| ---------------- | ------------------------------------------------------------------ |
|
|
11
|
+
| `tokens.css` | The whole system: the faces, every value, and styled bare HTML. |
|
|
12
|
+
| `vars.css` | The values alone, for a surface with its own faces and base layer. |
|
|
13
13
|
| `components.css` | `.nt-btn`, `.nt-card`, `.nt-nav`, and the rest, all `var()`-based. |
|
|
14
|
-
| `deck.css`
|
|
15
|
-
| `logo/`
|
|
14
|
+
| `deck.css` | The Marpit slide theme, 1280x720. Load `vars.css` on the page too. |
|
|
15
|
+
| `logo/` | The mark, the lockup, the icons, and the rasters cut from them. |
|
|
16
16
|
|
|
17
17
|
## Logo
|
|
18
18
|
|
|
@@ -25,32 +25,30 @@ stylesheets load. Change the logo by editing that script and re-running it:
|
|
|
25
25
|
./scripts/build-logo.py # needs rsvg-convert on PATH
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
-
The raster half shells out to `rsvg-convert`, which ships in librsvg:
|
|
29
|
-
install librsvg` on macOS or Linux, the GTK runtime on Windows. The vector
|
|
30
|
-
runs without it.
|
|
28
|
+
The raster half shells out to `rsvg-convert`, which ships in librsvg:
|
|
29
|
+
`brew install librsvg` on macOS or Linux, the GTK runtime on Windows. The vector
|
|
30
|
+
half runs without it.
|
|
31
31
|
|
|
32
32
|
### Vector
|
|
33
33
|
|
|
34
|
-
| File
|
|
35
|
-
|
|
36
|
-
| `logo/lockup.svg`
|
|
37
|
-
| `logo/lockup-white.svg`
|
|
38
|
-
| `logo/lockup-ink.svg`
|
|
39
|
-
| `logo/lockup-text.svg`
|
|
40
|
-
| `logo/monogram.svg`
|
|
41
|
-
| `logo/monogram-white.svg`, `logo/monogram-ink.svg` | The same two reversals.
|
|
42
|
-
| `logo/mark.svg`
|
|
43
|
-
| `logo/mark-white.svg`, `logo/mark-ink.svg`
|
|
44
|
-
| `logo/favicon.svg`
|
|
45
|
-
| `logo/icon.svg`
|
|
46
|
-
| `logo/icon-square.svg`
|
|
47
|
-
| `logo/icon-maskable.svg`
|
|
48
|
-
|
|
49
|
-
The monogram
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
is the price of the monogram over a bare crescent; every browser that matters
|
|
53
|
-
reads `favicon.svg` and scales it instead.
|
|
34
|
+
| File | Use |
|
|
35
|
+
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
|
|
36
|
+
| `logo/lockup.svg` | Default. Mark plus wordmark, outlined, so it needs no font. |
|
|
37
|
+
| `logo/lockup-white.svg` | On dark, on pink, on a photo. |
|
|
38
|
+
| `logo/lockup-ink.svg` | One-color print or light backgrounds where pink lacks contrast. |
|
|
39
|
+
| `logo/lockup-text.svg` | The wordmark as live `<text>` over an inlined ten-glyph Nunito subset. Open this one to edit the type; ship `lockup.svg`. |
|
|
40
|
+
| `logo/monogram.svg` | Mark with `no` nested in the crescent, transparent, square. The short form: avatar, app icon, stamp. |
|
|
41
|
+
| `logo/monogram-white.svg`, `logo/monogram-ink.svg` | The same two reversals. |
|
|
42
|
+
| `logo/mark.svg` | Mark alone, no letters. Watermarks, a bullet, anywhere `no` would be read as a word. |
|
|
43
|
+
| `logo/mark-white.svg`, `logo/mark-ink.svg` | The same two reversals. |
|
|
44
|
+
| `logo/favicon.svg` | Browser tab: monogram on the dark tile, cut tight so 16px survives. |
|
|
45
|
+
| `logo/icon.svg` | App tile, rounded corners, opaque. |
|
|
46
|
+
| `logo/icon-square.svg` | App tile, square edges, for iOS and anything else that masks the icon itself. |
|
|
47
|
+
| `logo/icon-maskable.svg` | Android maskable: full bleed, monogram inside the 80% safe circle. |
|
|
48
|
+
|
|
49
|
+
The monogram uses the lockup's first two letters with the same face, size, and
|
|
50
|
+
position. The letters lose detail at 16px; use `favicon.svg` for browser
|
|
51
|
+
scaling.
|
|
54
52
|
|
|
55
53
|
`lockup-text.svg` overruns its viewBox in librsvg and resvg, which apply
|
|
56
54
|
`letter-spacing` differently than a browser does. That is why the outlined
|
|
@@ -61,16 +59,16 @@ reads `favicon.svg` and scales it instead.
|
|
|
61
59
|
Everything in `logo/export/` is cut from the SVGs above, so treat it as output:
|
|
62
60
|
regenerate it, never retouch it.
|
|
63
61
|
|
|
64
|
-
| File
|
|
65
|
-
|
|
66
|
-
| `favicon.ico` (16, 32, 48)
|
|
67
|
-
| `favicon-16x16.png`, `favicon-32x32.png`, `favicon-48x48.png`
|
|
68
|
-
| `apple-touch-icon.png` (180)
|
|
69
|
-
| `icon-192.png`, `icon-512.png`
|
|
70
|
-
| `icon-maskable-512.png`
|
|
62
|
+
| File | Cut from |
|
|
63
|
+
| ------------------------------------------------------------------------------------- | ------------------------------------ |
|
|
64
|
+
| `favicon.ico` (16, 32, 48) | `favicon.svg` |
|
|
65
|
+
| `favicon-16x16.png`, `favicon-32x32.png`, `favicon-48x48.png` | `favicon.svg` |
|
|
66
|
+
| `apple-touch-icon.png` (180) | `icon-square.svg` |
|
|
67
|
+
| `icon-192.png`, `icon-512.png` | `icon.svg` |
|
|
68
|
+
| `icon-maskable-512.png` | `icon-maskable.svg` |
|
|
71
69
|
| `monogram-256.png`, `monogram-512.png`, `monogram-1024.png`, `monogram-white-512.png` | `monogram.svg`, `monogram-white.svg` |
|
|
72
|
-
| `mark-256.png`, `mark-512.png`, `mark-1024.png`, `mark-white-512.png`
|
|
73
|
-
| `lockup-1024.png`, `lockup-2048.png`, `lockup-white-1024.png`, `lockup-ink-1024.png`
|
|
70
|
+
| `mark-256.png`, `mark-512.png`, `mark-1024.png`, `mark-white-512.png` | `mark.svg`, `mark-white.svg` |
|
|
71
|
+
| `lockup-1024.png`, `lockup-2048.png`, `lockup-white-1024.png`, `lockup-ink-1024.png` | the three lockups |
|
|
74
72
|
|
|
75
73
|
### Wire it up
|
|
76
74
|
|
|
@@ -78,16 +76,16 @@ regenerate it, never retouch it.
|
|
|
78
76
|
`logo/` is served as a unit.
|
|
79
77
|
|
|
80
78
|
```html
|
|
81
|
-
<link rel="icon" href="/logo/favicon.svg" type="image/svg+xml"
|
|
82
|
-
<link rel="icon" href="/logo/export/favicon.ico" sizes="32x32"
|
|
83
|
-
<link rel="apple-touch-icon" href="/logo/export/apple-touch-icon.png"
|
|
84
|
-
<link rel="manifest" href="/logo/site.webmanifest"
|
|
79
|
+
<link rel="icon" href="/logo/favicon.svg" type="image/svg+xml" />
|
|
80
|
+
<link rel="icon" href="/logo/export/favicon.ico" sizes="32x32" />
|
|
81
|
+
<link rel="apple-touch-icon" href="/logo/export/apple-touch-icon.png" />
|
|
82
|
+
<link rel="manifest" href="/logo/site.webmanifest" />
|
|
85
83
|
```
|
|
86
84
|
|
|
87
85
|
## Consume it
|
|
88
86
|
|
|
89
|
-
Install
|
|
90
|
-
|
|
87
|
+
Install the package and import its stylesheets from `node_modules`. Keep copied
|
|
88
|
+
assets tied to the installed version.
|
|
91
89
|
|
|
92
90
|
```bash
|
|
93
91
|
npm install @notambourine/brand-kit
|
|
@@ -103,15 +101,16 @@ import "@notambourine/brand-kit/tokens.css";
|
|
|
103
101
|
cp -R node_modules/@notambourine/brand-kit/{fonts,logo} public/
|
|
104
102
|
```
|
|
105
103
|
|
|
106
|
-
`tokens.css` declares the `@font-face` rules and every `var()` the other two
|
|
107
|
-
load it first and serve `fonts/` beside it. The paths inside it are
|
|
108
|
-
file, so inlining it into a `<style>` block breaks the
|
|
104
|
+
`tokens.css` declares the `@font-face` rules and every `var()` the other two
|
|
105
|
+
read, so load it first and serve `fonts/` beside it. The paths inside it are
|
|
106
|
+
relative to the CSS file, so inlining it into a `<style>` block breaks the
|
|
107
|
+
faces.
|
|
109
108
|
|
|
110
109
|
### With Tailwind or StyleX
|
|
111
110
|
|
|
112
111
|
A surface with its own faces and base layer imports `vars.css` alone and writes
|
|
113
|
-
`var()` against the semantic aliases. Neither system needs anything from this
|
|
114
|
-
beyond the custom properties.
|
|
112
|
+
`var()` against the semantic aliases. Neither system needs anything from this
|
|
113
|
+
kit beyond the custom properties.
|
|
115
114
|
|
|
116
115
|
```js
|
|
117
116
|
import "@notambourine/brand-kit/vars.css";
|
|
@@ -121,55 +120,60 @@ const styles = stylex.create({
|
|
|
121
120
|
});
|
|
122
121
|
```
|
|
123
122
|
|
|
124
|
-
Tailwind claims the `--font-*` and `--ease-*` namespaces for its own utilities,
|
|
125
|
-
is why those two groups ship a `--nt-*` primitive under the alias: a
|
|
126
|
-
reads the primitive. StyleX hashes the names it generates and
|
|
123
|
+
Tailwind claims the `--font-*` and `--ease-*` namespaces for its own utilities,
|
|
124
|
+
which is why those two groups ship a `--nt-*` primitive under the alias: a
|
|
125
|
+
Tailwind surface reads the primitive. StyleX hashes the names it generates and
|
|
126
|
+
collides with neither.
|
|
127
127
|
|
|
128
|
-
Two StyleX-specific traps. Bridging through `stylex.defineVars` breaks
|
|
129
|
-
because StyleX declares those properties on `:root` and a custom
|
|
130
|
-
where it is declared, so a `.theme-light` subtree still
|
|
131
|
-
`var()` string resolves at the element and themes
|
|
132
|
-
element styles in `elements.css` only while
|
|
133
|
-
an unlayered `h1` wins, so import
|
|
128
|
+
Two StyleX-specific traps. Bridging through `stylex.defineVars` breaks
|
|
129
|
+
`.theme-light`, because StyleX declares those properties on `:root` and a custom
|
|
130
|
+
property resolves where it is declared, so a `.theme-light` subtree still
|
|
131
|
+
inherits the dark value; a raw `var()` string resolves at the element and themes
|
|
132
|
+
correctly. And StyleX outranks the element styles in `elements.css` only while
|
|
133
|
+
`useCSSLayers` is off - turn layers on and an unlayered `h1` wins, so import
|
|
134
|
+
into a layer StyleX orders itself against:
|
|
134
135
|
|
|
135
136
|
```css
|
|
136
137
|
@import "@notambourine/brand-kit/tokens.css" layer(base);
|
|
137
138
|
```
|
|
138
139
|
|
|
139
|
-
The package ships the stylesheets, `fonts/`, `logo/`, and `SKILL.md`. The logo
|
|
140
|
-
script and `hello-world.html` stay in the repo. Pin an exact version and
|
|
141
|
-
purpose; a caret range moves the brand under a consumer with no diff
|
|
140
|
+
The package ships the stylesheets, `fonts/`, `logo/`, and `SKILL.md`. The logo
|
|
141
|
+
build script and `hello-world.html` stay in the repo. Pin an exact version and
|
|
142
|
+
bump it on purpose; a caret range moves the brand under a consumer with no diff
|
|
143
|
+
to review.
|
|
142
144
|
|
|
143
145
|
Consumers today:
|
|
144
146
|
|
|
145
|
-
|
|
|
146
|
-
|
|
147
|
-
| `notambourine/claude`
|
|
148
|
-
| `notambourine/share`
|
|
149
|
-
| `notambourine/notambourine.com` | The site's stylesheet.
|
|
147
|
+
| | |
|
|
148
|
+
| ------------------------------- | -------------------------------------------------------------------------------------- |
|
|
149
|
+
| `notambourine/claude` | Ships it as the `/nt-brand:system` skill. |
|
|
150
|
+
| `notambourine/share` | Serves `tokens.css` and `deck.css` from its own origin; a self-only CSP forbids a CDN. |
|
|
151
|
+
| `notambourine/notambourine.com` | The site's stylesheet. |
|
|
150
152
|
|
|
151
153
|
## Gate a consumer
|
|
152
154
|
|
|
153
155
|
A `var(--x)` that reads a token this repo stopped declaring falls through to its
|
|
154
|
-
fallback and the page still renders, so a bump can go wrong quietly. Check three
|
|
155
|
-
in the consumer's CI: the font bytes hash against `fonts/`, every color
|
|
156
|
-
defines, and every `var()` reads a property it still declares.
|
|
157
|
-
`npm run brand` is the reference implementation.
|
|
156
|
+
fallback and the page still renders, so a bump can go wrong quietly. Check three
|
|
157
|
+
things in the consumer's CI: the font bytes hash against `fonts/`, every color
|
|
158
|
+
is one this kit defines, and every `var()` reads a property it still declares.
|
|
159
|
+
`notambourine/share`'s `npm run brand` is the reference implementation.
|
|
158
160
|
|
|
159
|
-
##
|
|
161
|
+
## Format documents
|
|
160
162
|
|
|
161
|
-
|
|
163
|
+
Install dependencies with `npm ci`. Run `npm run format` before sharing
|
|
164
|
+
documents or exporting them. Markdown and MDX are included, along with HTML and
|
|
165
|
+
JSON/YAML. Review rendered output after formatting.
|
|
162
166
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
167
|
+
## Release
|
|
168
|
+
|
|
169
|
+
Update `version` in `package.json` and the lockfile, then merge to main. The
|
|
170
|
+
publish workflow releases versions that are not already on npm and tags the
|
|
171
|
+
published commit. Formatting must pass before the package is packed or
|
|
172
|
+
published.
|
|
166
173
|
|
|
167
|
-
|
|
168
|
-
No token lives in this repo, and npm attaches a provenance attestation tying the
|
|
169
|
-
published tarball to that workflow run. The workflow fails if the tag and the manifest
|
|
170
|
-
disagree.
|
|
174
|
+
Publishing uses npm trusted publishing with provenance.
|
|
171
175
|
|
|
172
176
|
## License
|
|
173
177
|
|
|
174
|
-
MIT for the stylesheets and `SKILL.md`. The faces in `fonts/` are SIL Open Font
|
|
175
|
-
see `fonts/OFL.txt`.
|
|
178
|
+
MIT for the stylesheets and `SKILL.md`. The faces in `fonts/` are SIL Open Font
|
|
179
|
+
License; see `fonts/OFL.txt`.
|
package/SKILL.md
CHANGED
|
@@ -1,24 +1,44 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: system
|
|
3
|
-
description:
|
|
3
|
+
description:
|
|
4
|
+
Build or review NoTambourine-branded surfaces, decks, and copy. Use for brand
|
|
5
|
+
styling, color questions, positioning, and copy audits before shipping.
|
|
4
6
|
---
|
|
5
7
|
|
|
6
8
|
# NoTambourine brand
|
|
7
9
|
|
|
8
|
-
Apply the brand without padding. Keep the design restrained and the work
|
|
10
|
+
Apply the brand without padding. Keep the design restrained and the work
|
|
11
|
+
concrete.
|
|
9
12
|
|
|
10
13
|
## Read only what the task needs
|
|
11
14
|
|
|
12
|
-
- For visual design or styling, read [visual rules](references/visual.md),
|
|
13
|
-
-
|
|
14
|
-
- For
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
- For visual design or styling, read [visual rules](references/visual.md),
|
|
16
|
+
including locked-surface font and logo traps.
|
|
17
|
+
- For writing or auditing anything clients or the public see, read
|
|
18
|
+
[voice and copy audit](references/voice.md). Lead with its core framing and
|
|
19
|
+
use its supporting headline for existing systems.
|
|
20
|
+
- For slide authoring or export, read [deck guidance](references/decks.md). Load
|
|
21
|
+
visual or voice guidance only when designing slides or writing/reviewing their
|
|
22
|
+
copy.
|
|
23
|
+
- For a color, type, spacing, or component value, inspect the relevant CSS
|
|
24
|
+
directly. Do not load prose references for a value lookup.
|
|
25
|
+
- For installation, asset selection, logo regeneration, or consumer integration,
|
|
26
|
+
read the relevant section of [README.md](README.md).
|
|
17
27
|
|
|
18
28
|
## Source of truth
|
|
19
29
|
|
|
20
|
-
Treat `notambourine/brand-kit` as canonical. Read values from its CSS and
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
30
|
+
Treat `notambourine/brand-kit` as canonical. Read values from its CSS and
|
|
31
|
+
artwork from its assets. Correct brand values here, never by syncing a
|
|
32
|
+
downstream copy back in. Update consumer pins after a correction; a consumer's
|
|
33
|
+
limited theme support does not narrow the brand system.
|
|
34
|
+
|
|
35
|
+
Use semantic CSS aliases. Reach for primitives only when no alias fits or the
|
|
36
|
+
consumer integration requires it; consult README for framework exceptions. Never
|
|
37
|
+
hardcode colors outside renderer `var()` fallbacks.
|
|
38
|
+
|
|
39
|
+
Fetch fuller doctrine only when needed: `http://notambourine.com/llms.txt`
|
|
40
|
+
indexes the public documents; `AGENTS.md` covers positioning and citation rules,
|
|
41
|
+
`SOUL.md` beliefs, and `CULTURE.md` working practices. Use the local voice
|
|
42
|
+
reference for current messaging. Do not infer internal policy from omissions in
|
|
43
|
+
the public cuts. Keep client material unpublished; `/reports/` and `/pog/` are
|
|
44
|
+
disallowed to agents.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@notambourine/brand-kit",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.5.0",
|
|
4
|
+
"description": "NoTambourine brand assets and guidance for design, decks, and copy",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -18,6 +18,11 @@
|
|
|
18
18
|
],
|
|
19
19
|
"author": "NoTambourine LLC",
|
|
20
20
|
"type": "module",
|
|
21
|
+
"scripts": {
|
|
22
|
+
"format": "prettier --write \"**/*.{md,mdx,html,json,yml,yaml}\"",
|
|
23
|
+
"format:check": "prettier --check \"**/*.{md,mdx,html,json,yml,yaml}\"",
|
|
24
|
+
"prepack": "npm run format:check"
|
|
25
|
+
},
|
|
21
26
|
"//": "No exports map: consumers import stylesheets and logo files by path, and their vendor scripts walk fonts/ and logo/ whole. A map would restate the tree and go stale the first time a file is added.",
|
|
22
27
|
"files": [
|
|
23
28
|
"*.css",
|
|
@@ -31,5 +36,8 @@
|
|
|
31
36
|
},
|
|
32
37
|
"sideEffects": [
|
|
33
38
|
"*.css"
|
|
34
|
-
]
|
|
39
|
+
],
|
|
40
|
+
"devDependencies": {
|
|
41
|
+
"prettier": "3.9.6"
|
|
42
|
+
}
|
|
35
43
|
}
|
package/references/decks.md
CHANGED
|
@@ -1,13 +1,29 @@
|
|
|
1
1
|
# Deck guidance
|
|
2
2
|
|
|
3
|
-
Explain the client's system with typographic concept diagrams built from brand
|
|
3
|
+
Explain the client's system with typographic concept diagrams built from brand
|
|
4
|
+
tokens. Do not substitute photography or icons for a chart.
|
|
4
5
|
|
|
5
|
-
Use this slide grammar: numbered eyebrow, lowercase display headline with one
|
|
6
|
+
Use this slide grammar: numbered eyebrow, lowercase display headline with one
|
|
7
|
+
emphasized word, short body, uppercase sublabel, concept diagram, running
|
|
8
|
+
footer. Use `.eyebrow` for both labels and write their source in sentence case.
|
|
9
|
+
Let the theme apply uppercase.
|
|
6
10
|
|
|
7
|
-
Use one `lead` cover per deck. Use `divider` for later section breaks. Select
|
|
11
|
+
Use one `lead` cover per deck. Use `divider` for later section breaks. Select
|
|
12
|
+
existing theme classes for other slide shapes; inspect `deck.css` for their
|
|
13
|
+
behavior. Never add a deck-local `<style>` block or hand-picked brand values.
|
|
14
|
+
Shared decks are immutable artifacts, so embedded overrides cannot receive later
|
|
15
|
+
brand corrections.
|
|
8
16
|
|
|
9
|
-
Feed Markdown through Marpit. Separate slides with `---`, enable numbering with
|
|
17
|
+
Feed Markdown through Marpit. Separate slides with `---`, enable numbering with
|
|
18
|
+
`<!-- paginate: true -->`, and select a slide variant with
|
|
19
|
+
`<!-- _class: lead -->`. Use Marpit's `footer:` directive for the running
|
|
20
|
+
footer.
|
|
10
21
|
|
|
11
|
-
Load `tokens.css` on the containing page with `deck.css`. The theme reads the
|
|
22
|
+
Load `tokens.css` on the containing page with `deck.css`. The theme reads the
|
|
23
|
+
document root; its color fallbacks do not provide font faces or logo data. Do
|
|
24
|
+
not mistake a deck that renders for one whose assets loaded.
|
|
12
25
|
|
|
13
|
-
Keep the supplied lockup so an exported PDF identifies itself without the share
|
|
26
|
+
Keep the supplied lockup so an exported PDF identifies itself without the share
|
|
27
|
+
page. Marpit's `![bg]` slides hide corner furniture, including that lockup;
|
|
28
|
+
account for the loss when choosing that layout. Use the logo data URI variables
|
|
29
|
+
for offline output, never retype the brand name in display type.
|
package/references/visual.md
CHANGED
|
@@ -1,25 +1,50 @@
|
|
|
1
1
|
# Visual rules
|
|
2
2
|
|
|
3
|
-
Keep confident type, one decisive pink, and enough air to make the work clear.
|
|
3
|
+
Keep confident type, one decisive pink, and enough air to make the work clear.
|
|
4
|
+
Read exact values and component behavior from the CSS.
|
|
4
5
|
|
|
5
|
-
- Default to dark. Use light surfaces deliberately and rarely, such as print,
|
|
6
|
-
|
|
7
|
-
-
|
|
8
|
-
|
|
9
|
-
-
|
|
10
|
-
|
|
11
|
-
- Use
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
|
|
15
|
-
-
|
|
6
|
+
- Default to dark. Use light surfaces deliberately and rarely, such as print,
|
|
7
|
+
press pages, or a one-off email. Never use pure white as a surface.
|
|
8
|
+
- Use pink as the only accent, with one pink CTA per screen. Mint supports
|
|
9
|
+
structure, status, and supporting icons; never use it for a CTA.
|
|
10
|
+
- Do not use gradients. One radial halo behind a hero lockup is the sole
|
|
11
|
+
exception; it must read as lighting.
|
|
12
|
+
- Use flat, geometric, two-color imagery. No stock photography, AI imagery, or
|
|
13
|
+
hand-drawn textures. Ask for real assets when needed.
|
|
14
|
+
- Keep corners consistent within a component. Use full card borders, never
|
|
15
|
+
colored left stripes.
|
|
16
|
+
- Keep hover stationary. No parallax or looping animation. Preserve visible
|
|
17
|
+
focus rings when customizing controls.
|
|
18
|
+
- Use Lucide SVG icons with rounded caps and a 1.75px stroke: 20px in
|
|
19
|
+
nav/buttons, 24px in features, 16px in inputs. No emoji in UI chrome or icon
|
|
20
|
+
fonts.
|
|
21
|
+
- Use existing logo artwork; never redraw it. Follow README for asset selection
|
|
22
|
+
and regeneration. Reserve `--font-wordmark` for the lockup, never headings.
|
|
23
|
+
Monospace body is the practitioner signal; preserve it.
|
|
24
|
+
- Emphasize one word per headline with `<em>`; preserve the supplied drawn
|
|
25
|
+
italic.
|
|
26
|
+
- Keep body copy in one column, at most about 640px wide. Use two or three
|
|
27
|
+
columns for card grids, one on mobile, never four. Leave generous space
|
|
28
|
+
between blocks.
|
|
29
|
+
- Make nav the only sticky element. No sticky CTAs, chat bubbles, or cookie
|
|
30
|
+
banners.
|
|
16
31
|
|
|
17
32
|
## Locked surfaces
|
|
18
33
|
|
|
19
|
-
Never substitute a Google Fonts import, including in mocks. It sends a referrer
|
|
34
|
+
Never substitute a Google Fonts import, including in mocks. It sends a referrer
|
|
35
|
+
to a third party and violates a self-only CSP.
|
|
20
36
|
|
|
21
|
-
When a surface cannot load local fonts, choose the degradation explicitly.
|
|
37
|
+
When a surface cannot load local fonts, choose the degradation explicitly.
|
|
38
|
+
Inline a supported face as a data URI when the surface warrants the bytes;
|
|
39
|
+
always inline the wordmark subset when using live wordmark text. Otherwise use
|
|
40
|
+
the fallback stacks from `vars.css` knowingly. Email clients and artifact hosts
|
|
41
|
+
may reject font loading even when a page works locally.
|
|
22
42
|
|
|
23
|
-
Inlining CSS moves relative font resolution to the HTML location. Preserve that
|
|
43
|
+
Inlining CSS moves relative font resolution to the HTML location. Preserve that
|
|
44
|
+
relationship or embed the faces; copying styles alone is insufficient. Use
|
|
45
|
+
README for normal package integration.
|
|
24
46
|
|
|
25
|
-
A self-only CSP requires assets served from the consumer's origin or permitted
|
|
47
|
+
A self-only CSP requires assets served from the consumer's origin or permitted
|
|
48
|
+
embedded data, not a CDN. For a deck theme with no slide element to attach
|
|
49
|
+
artwork to, use the supplied logo data URI variables. A PDF or offline snapshot
|
|
50
|
+
cannot rely on an origin to retrieve artwork.
|
package/references/voice.md
CHANGED
|
@@ -1,47 +1,112 @@
|
|
|
1
1
|
# Voice and copy audit
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Lead public pages and introductions with:
|
|
4
|
+
|
|
5
|
+
> Ship the systems your business needs next.
|
|
6
|
+
|
|
7
|
+
For existing systems, use:
|
|
8
|
+
|
|
9
|
+
> Improve the systems that run your business.
|
|
10
|
+
|
|
11
|
+
Follow with what we will deliver and what the client can do once it ships. Write
|
|
12
|
+
plainly and warmly. Use humor only when it makes the point clearer.
|
|
4
13
|
|
|
5
14
|
## Positioning and offers
|
|
6
15
|
|
|
7
|
-
Position NoTambourine as senior
|
|
16
|
+
Position NoTambourine as senior engineers who join the client's team, use AI
|
|
17
|
+
throughout delivery, and own the work from business goal to shipped system. Name
|
|
18
|
+
the software, data, or infrastructure needed to reach that goal. Keep the time
|
|
19
|
+
between a decision and working software short.
|
|
20
|
+
|
|
21
|
+
Treat AI as a working capability. Explain where it speeds up delivery, automates
|
|
22
|
+
work, improves a product, or helps a team use its information. Name the result,
|
|
23
|
+
not the novelty. Do not make broad claims about transformation or intelligence.
|
|
24
|
+
|
|
25
|
+
Show engineers working with product managers, operators, designers, and domain
|
|
26
|
+
experts. Credit clear priorities, sound decisions, and close coordination for
|
|
27
|
+
delivery speed. Never claim that eliminating a role, planning, documentation, or
|
|
28
|
+
meetings makes a team fast.
|
|
8
29
|
|
|
9
|
-
Define fit by the
|
|
30
|
+
Define fit by the result and the responsibility we will take. Mention
|
|
31
|
+
private-equity experience when relevant, but keep general positioning open to
|
|
32
|
+
any ownership structure. The name means no padding.
|
|
10
33
|
|
|
11
|
-
|
|
34
|
+
Use this introduction:
|
|
12
35
|
|
|
13
|
-
>
|
|
36
|
+
> Ship the systems your business needs next. NoTambourine brings senior
|
|
37
|
+
> engineers into your team to own delivery and build with AI.
|
|
14
38
|
|
|
15
|
-
|
|
39
|
+
For a meta description or short directory listing, use:
|
|
16
40
|
|
|
17
|
-
|
|
41
|
+
> Senior engineers using AI inside your team to ship the systems your business
|
|
42
|
+
> needs next.
|
|
18
43
|
|
|
19
|
-
|
|
20
|
-
|
|
44
|
+
Give clear reasons to call: launching a product, improving a core system,
|
|
45
|
+
automating routine work, or connecting systems and data. Describe the shipped
|
|
46
|
+
change in daily terms. A file arrives automatically. An order moves between
|
|
47
|
+
systems. A team releases an update. A customer gets a useful answer. Support
|
|
48
|
+
claims about growth, time saved, reliability, or delivery speed with client
|
|
49
|
+
evidence.
|
|
21
50
|
|
|
22
|
-
|
|
51
|
+
Keep public positioning open to a new ambition or an existing constraint. Ask
|
|
52
|
+
what the client wants to accomplish, why now, and what will change after it
|
|
53
|
+
ships. In proposals, connect each constraint to its business consequence and the
|
|
54
|
+
work required.
|
|
55
|
+
|
|
56
|
+
Use these offer names:
|
|
57
|
+
|
|
58
|
+
- **Assessment:** Choose what to build or change next. Review the systems,
|
|
59
|
+
workflows, and priorities, then set the delivery plan.
|
|
60
|
+
- **Embedded:** Add senior engineers who build with AI to your team. We own
|
|
61
|
+
delivery and ship the systems your business needs next.
|
|
62
|
+
|
|
63
|
+
Use "Start a conversation" for the primary invitation. Ask what the reader wants
|
|
64
|
+
to ship and when. Discuss fit before asking them to choose an engagement.
|
|
23
65
|
|
|
24
66
|
## Register and evidence
|
|
25
67
|
|
|
26
|
-
- Address marketing readers as "you". In client deliverables, use "we" for the
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
-
|
|
30
|
-
|
|
68
|
+
- Address marketing readers as "you". In client deliverables, use "we" for the
|
|
69
|
+
client's organization with us inside it. Name the parties in proposals and
|
|
70
|
+
SOWs. Never use "I" as the author's voice.
|
|
71
|
+
- Keep sales material out of client deliverables. Explain the client's system,
|
|
72
|
+
the decisions to make, and the work to ship.
|
|
73
|
+
- Show the objective, what shipped, and what the client can now do. Use client
|
|
74
|
+
numbers when available. Otherwise use a verifiable before and after. Share
|
|
75
|
+
client evidence only with permission.
|
|
76
|
+
- Name who joins and owns delivery. Promise direct access to that person. Cover
|
|
77
|
+
our estimating mistakes within the agreed scope.
|
|
78
|
+
- Describe constraints without blaming the people who built the system.
|
|
31
79
|
|
|
32
80
|
## Names and mechanics
|
|
33
81
|
|
|
34
|
-
Use `NoTambourine` in human-facing sentences. Reserve `notambourine` for
|
|
82
|
+
Use `NoTambourine` in human-facing sentences. Reserve `notambourine` for
|
|
83
|
+
technical slugs, paths, URLs, domains, GitHub organizations, npm names, and CSS
|
|
84
|
+
classes. Use `NoTambourine LLC` only in contracts, at most twice: one
|
|
85
|
+
Definitions anchor and the signature block. Reject `Notambourine` and
|
|
86
|
+
`No Tambourine`. Cite the public `AGENTS.md` for disputed naming flags.
|
|
35
87
|
|
|
36
|
-
Preserve `Senior engineers. No tambourine.` as a standalone signature: tagline,
|
|
88
|
+
Preserve `Senior engineers. No tambourine.` as a standalone signature: tagline,
|
|
89
|
+
slide, sign-off, or footer. The instrument is lowercase. This is the only
|
|
90
|
+
permitted spaced form.
|
|
37
91
|
|
|
38
|
-
Use sentence case for headlines, buttons, navigation, and labels. Reserve
|
|
92
|
+
Use sentence case for headlines, buttons, navigation, and labels. Reserve
|
|
93
|
+
uppercase for pink eyebrows; decks also use it for sublabels. Follow deck
|
|
94
|
+
guidance for lowercase display headlines. Vary sentence length. Cut
|
|
95
|
+
throat-clearing, superlatives, exclamation marks, and clever phrasing that
|
|
96
|
+
delays the point.
|
|
39
97
|
|
|
40
|
-
Use ASCII punctuation: hyphens and straight quotes/apostrophes.
|
|
98
|
+
Use ASCII punctuation: hyphens and straight quotes/apostrophes. Do not use em/en
|
|
99
|
+
dashes, curly quotes, or single-character ellipses. The interpunct may separate
|
|
100
|
+
a name, role, and company: `Tom Fuertes · Principal · NoTambourine`.
|
|
41
101
|
|
|
42
102
|
## Audit before shipping
|
|
43
103
|
|
|
44
|
-
Audit anything clients or strangers see: pages, email, decks, proposals, SOWs,
|
|
104
|
+
Audit anything clients or strangers see: pages, email, decks, proposals, SOWs,
|
|
105
|
+
READMEs, and release notes. Search for candidates, then judge them in context.
|
|
106
|
+
|
|
107
|
+
The opening should name the work and our responsibility. Remove assumed pain,
|
|
108
|
+
unearned urgency, decorative language, and claims that could describe any
|
|
109
|
+
agency. Keep technical constraints when they explain a decision or result.
|
|
45
110
|
|
|
46
111
|
```sh
|
|
47
112
|
rg -n 'notambourine|Notambourine|No\s+Tambourine|NoTambourine LLC' <file>
|
|
@@ -52,8 +117,19 @@ rg -ni "this matters|it's worth noting|it is worth noting|needless to say|at the
|
|
|
52
117
|
rg -n '!(\s|$)|\bI\b' <file>
|
|
53
118
|
```
|
|
54
119
|
|
|
55
|
-
Check legal-name occurrences against the contract limit. Ignore technical slugs
|
|
120
|
+
Check legal-name occurrences against the contract limit. Ignore technical slugs
|
|
121
|
+
and code when judging wordmark hits. Ignore literal technical uses such as "a
|
|
122
|
+
robust error path" and `I` in quotations, identifiers, or names.
|
|
123
|
+
|
|
124
|
+
Cut puffery and keep evidence. Replace claims of importance with the
|
|
125
|
+
consequence. Cut participle tails at the comma. Narrow grand claims to something
|
|
126
|
+
a client can verify. If a sentence keeps its meaning after a phrase is cut, cut
|
|
127
|
+
the phrase.
|
|
56
128
|
|
|
57
|
-
|
|
129
|
+
Keep three fixtures even when they match a search flag: the signature, factual
|
|
130
|
+
lines such as "Two engineers, six weeks, one shipped feature", and one pink
|
|
131
|
+
`<em>` in a headline.
|
|
58
132
|
|
|
59
|
-
|
|
133
|
+
Format source documents with the repository's pinned Prettier before sharing or
|
|
134
|
+
exporting them. Review the rendered document, especially slide breaks and
|
|
135
|
+
tables.
|