@notambourine/brand-kit 1.3.0 → 1.4.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 +100 -22
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.4.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,113 @@
|
|
|
1
1
|
# Voice and copy audit
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Lead public-facing pages and introductions with this core framing:
|
|
4
|
+
|
|
5
|
+
> Build the systems and ways of working your business needs next.
|
|
6
|
+
|
|
7
|
+
For a supporting headline about existing systems, use:
|
|
8
|
+
|
|
9
|
+
> Make your systems work harder for your business.
|
|
10
|
+
|
|
11
|
+
Follow each headline with the work we will deliver and its business value. Write
|
|
12
|
+
concisely, warmly, then playfully, in that order.
|
|
4
13
|
|
|
5
14
|
## Positioning and offers
|
|
6
15
|
|
|
7
|
-
Position NoTambourine as senior
|
|
16
|
+
Position NoTambourine as senior engineers who work inside the client's team and
|
|
17
|
+
take responsibility for delivery. Lead with the client's business goal and the
|
|
18
|
+
engineering work needed to reach it. Connect technical infrastructure with the
|
|
19
|
+
processes it supports. Show how better systems let a team handle more work
|
|
20
|
+
without adding manual steps. AI at the keyboard explains small-team economics;
|
|
21
|
+
it is not the offer.
|
|
22
|
+
|
|
23
|
+
Define fit by the intended result and the responsibility taken on. Mention
|
|
24
|
+
private-equity experience when relevant; keep general positioning open to any
|
|
25
|
+
ownership structure. The name means no padding.
|
|
8
26
|
|
|
9
|
-
|
|
27
|
+
Help referred readers confirm fit and explain the agency to colleagues. Keep the
|
|
28
|
+
signature beside a concrete explanation. Use this introduction:
|
|
10
29
|
|
|
11
|
-
|
|
30
|
+
> Build the systems and ways of working your business needs next. NoTambourine
|
|
31
|
+
> brings senior engineers into your team to lead delivery.
|
|
12
32
|
|
|
13
|
-
|
|
33
|
+
For a meta description or short directory listing, use:
|
|
14
34
|
|
|
15
|
-
|
|
35
|
+
> Senior engineers working inside your team to build the systems and ways of
|
|
36
|
+
> working your business needs next.
|
|
37
|
+
|
|
38
|
+
Give recognizable reasons to call: upgrading core systems, automating routine
|
|
39
|
+
work, or connecting systems so teams can act on current information. Connect
|
|
40
|
+
each to the work we can deliver. Describe infrastructure improvements through
|
|
41
|
+
the change in daily work: files arrive automatically, orders move between
|
|
42
|
+
systems, or a team can release updates more easily. Use examples that match the
|
|
43
|
+
engagement. Support claims of growth, time saved, or reliability with client
|
|
44
|
+
evidence.
|
|
45
|
+
|
|
46
|
+
Keep public positioning open to ambition as well as an existing constraint. In
|
|
47
|
+
discovery, ask what they want to accomplish, why now, and what successful
|
|
48
|
+
delivery would change. Name constraints once the client has described them or
|
|
49
|
+
the evidence establishes them. In a proposal, connect that specific constraint
|
|
50
|
+
to its business consequence and the work required.
|
|
16
51
|
|
|
17
52
|
Use these offer names and lead with outcomes:
|
|
18
53
|
|
|
19
|
-
- **Assessment:**
|
|
20
|
-
|
|
54
|
+
- **Assessment:** Decide what to build or change first. Review the technology
|
|
55
|
+
and working processes against your business priorities and choose the next
|
|
56
|
+
investment.
|
|
57
|
+
- **Embedded:** Put senior engineers inside your team to lead delivery. Build
|
|
58
|
+
the systems and ways of working your business needs next.
|
|
21
59
|
|
|
22
|
-
|
|
60
|
+
Use "Start a conversation" for the primary invitation. Ask what the reader wants
|
|
61
|
+
to accomplish and when. Discuss fit before asking them to choose an engagement.
|
|
23
62
|
|
|
24
63
|
## Register and evidence
|
|
25
64
|
|
|
26
|
-
- Address marketing readers as "you". In client deliverables, use "we" for the
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
-
|
|
30
|
-
|
|
65
|
+
- Address marketing readers as "you". In client deliverables, use "we" for the
|
|
66
|
+
client's organization with us inside it. Name the parties in proposals and
|
|
67
|
+
SOWs. Never use "I" as the author's voice.
|
|
68
|
+
- Do not sell in client deliverables: no logo wall, team slide, or methodology.
|
|
69
|
+
Explain their system back to them.
|
|
70
|
+
- Show the client's objective, what changed, and what they can now do. Use their
|
|
71
|
+
numbers when available, otherwise a verifiable before and after. Connect
|
|
72
|
+
delivered work to commercial and operational results when supported. Share
|
|
73
|
+
client evidence only with permission.
|
|
74
|
+
- Name who joins and takes responsibility for delivery. Express values as
|
|
75
|
+
commitments: direct access to the responsible person and covering our
|
|
76
|
+
estimating mistakes within agreed scope.
|
|
77
|
+
- Describe constraints without blaming the people who built the system. Explain
|
|
78
|
+
coordination without jokes about ceremony.
|
|
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 that treatment for sublabels. Follow
|
|
94
|
+
deck guidance for lowercase display headlines. Keep sentences short without
|
|
95
|
+
forcing a uniform rhythm. No throat-clearing, superlatives, or exclamation marks
|
|
96
|
+
in body copy.
|
|
39
97
|
|
|
40
|
-
Use ASCII punctuation: hyphens and straight quotes/apostrophes. No em/en dashes,
|
|
98
|
+
Use ASCII punctuation: hyphens and straight quotes/apostrophes. No em/en dashes,
|
|
99
|
+
curly quotes, or single-character ellipses. Permit the interpunct as a
|
|
100
|
+
separator, as in `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
|
+
Check the opening first. It should name work the reader wants done and explain
|
|
108
|
+
our responsibility. Remove assumed pain, unearned urgency, and claims that could
|
|
109
|
+
describe any agency. Keep technical constraints where they explain a specific
|
|
110
|
+
decision or result.
|
|
45
111
|
|
|
46
112
|
```sh
|
|
47
113
|
rg -n 'notambourine|Notambourine|No\s+Tambourine|NoTambourine LLC' <file>
|
|
@@ -52,8 +118,20 @@ rg -ni "this matters|it's worth noting|it is worth noting|needless to say|at the
|
|
|
52
118
|
rg -n '!(\s|$)|\bI\b' <file>
|
|
53
119
|
```
|
|
54
120
|
|
|
55
|
-
Check legal-name occurrences against the contract limit. Ignore technical slugs
|
|
121
|
+
Check legal-name occurrences against the contract limit. Ignore technical slugs
|
|
122
|
+
and code when judging wordmark hits; searches do not understand Markdown fences
|
|
123
|
+
or backticks. Ignore literal technical uses such as "a robust error path" and
|
|
124
|
+
`I` in quotations, identifiers, or names.
|
|
125
|
+
|
|
126
|
+
Cut puffery and keep evidence. Replace importance-flagging with the consequence.
|
|
127
|
+
Cut participle tails at the comma. Read manually for grandiose scope and
|
|
128
|
+
three-item adjective lists; narrow claims to something a client can hold us to.
|
|
129
|
+
If cutting words leaves the claim intact, remove them.
|
|
56
130
|
|
|
57
|
-
|
|
131
|
+
Preserve three fixtures even when they resemble padding: the signature, factual
|
|
132
|
+
three-item lines such as "Two engineers, six weeks, one shipped feature", and a
|
|
133
|
+
headline's single pink `<em>`. Typographic emphasis is not a boldface tic.
|
|
58
134
|
|
|
59
|
-
|
|
135
|
+
Format source documents with Prettier before sharing or exporting, including
|
|
136
|
+
Markdown. Use the repository's pinned version and configuration. Review the
|
|
137
|
+
rendered document after formatting, especially slide breaks and tables.
|