@notambourine/brand-kit 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 NoTambourine LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,146 @@
+# brand-kit
+
+The NoTambourine brand's golden set: `tokens.css`, `components.css`, `deck.css`, the
+font binaries, the logo in `logo/`, and `SKILL.md`, which is the written system behind
+them - color, type, spacing, component recipes, and voice.
+
+Correct a brand value here. Every other copy is downstream.
+
+| Link this | To get |
+|---|---|
+| `tokens.css` | The whole system: the faces, every value, and styled bare HTML. |
+| `vars.css` | The values alone, for a surface with its own faces and base layer. |
+| `components.css` | `.nt-btn`, `.nt-card`, `.nt-nav`, and the rest, all `var()`-based. |
+| `deck.css` | The Marpit slide theme, 1280x720. Load `vars.css` on the page too. |
+| `logo/` | The mark, the lockup, the icons, and the rasters cut from them. |
+
+## Logo
+
+`scripts/build-logo.py` holds the mark's path data and the wordmark's type
+parameters, and writes every file under `logo/`. It traces the wordmark out of
+`fonts/nunito-latin-var.woff2`, so the outlines cannot drift from the face the
+stylesheets load. Change the logo by editing that script and re-running it:
+
+```bash
+./scripts/build-logo.py    # needs rsvg-convert on PATH
+```
+
+The raster half shells out to `rsvg-convert`, which ships in librsvg: `brew
+install librsvg` on macOS or Linux, the GTK runtime on Windows. The vector half
+runs without it.
+
+### Vector
+
+| File | Use |
+|---|---|
+| `logo/lockup.svg` | Default. Mark plus wordmark, outlined, so it needs no font. |
+| `logo/lockup-white.svg` | On dark, on pink, on a photo. |
+| `logo/lockup-ink.svg` | One-color print, fax-grade output, a light background that fights pink. |
+| `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`. |
+| `logo/monogram.svg` | Mark with `no` nested in the crescent, transparent, square. The short form: avatar, app icon, stamp. |
+| `logo/monogram-white.svg`, `logo/monogram-ink.svg` | The same two reversals. |
+| `logo/mark.svg` | Mark alone, no letters. Watermarks, a bullet, anywhere `no` would be read as a word. |
+| `logo/mark-white.svg`, `logo/mark-ink.svg` | The same two reversals. |
+| `logo/favicon.svg` | Browser tab: monogram on the dark tile, cut tight so 16px survives. |
+| `logo/icon.svg` | App tile, rounded corners, opaque. |
+| `logo/icon-square.svg` | App tile, square edges, for iOS and anything else that masks the icon itself. |
+| `logo/icon-maskable.svg` | Android maskable: full bleed, monogram inside the 80% safe circle. |
+
+The monogram is the lockup truncated to its first two letters, not a second
+drawing: same face, same size, same origin, so the `n` nests into the crescent's
+mouth exactly as it does in the full lockup. At 16px the letters go soft, which
+is the price of the monogram over a bare crescent; every browser that matters
+reads `favicon.svg` and scales it instead.
+
+`lockup-text.svg` overruns its viewBox in librsvg and resvg, which apply
+`letter-spacing` differently than a browser does. That is why the outlined
+`lockup.svg` is the default and the source of every raster.
+
+### Raster
+
+Everything in `logo/export/` is cut from the SVGs above, so treat it as output:
+regenerate it, never retouch it.
+
+| File | Cut from |
+|---|---|
+| `favicon.ico` (16, 32, 48) | `favicon.svg` |
+| `favicon-16x16.png`, `favicon-32x32.png`, `favicon-48x48.png` | `favicon.svg` |
+| `apple-touch-icon.png` (180) | `icon-square.svg` |
+| `icon-192.png`, `icon-512.png` | `icon.svg` |
+| `icon-maskable-512.png` | `icon-maskable.svg` |
+| `monogram-256.png`, `monogram-512.png`, `monogram-1024.png`, `monogram-white-512.png` | `monogram.svg`, `monogram-white.svg` |
+| `mark-256.png`, `mark-512.png`, `mark-1024.png`, `mark-white-512.png` | `mark.svg`, `mark-white.svg` |
+| `lockup-1024.png`, `lockup-2048.png`, `lockup-white-1024.png`, `lockup-ink-1024.png` | the three lockups |
+
+### Wire it up
+
+`logo/site.webmanifest` names its icons relative to itself, so it works wherever
+`logo/` is served as a unit.
+
+```html
+<link rel="icon" href="/logo/favicon.svg" type="image/svg+xml">
+<link rel="icon" href="/logo/export/favicon.ico" sizes="32x32">
+<link rel="apple-touch-icon" href="/logo/export/apple-touch-icon.png">
+<link rel="manifest" href="/logo/site.webmanifest">
+```
+
+## Consume it
+
+Install it and read the bytes out of `node_modules`. Do not copy a stylesheet into a
+consumer; a copy drifts and nothing fails when it does.
+
+```bash
+npm install @notambourine/brand-kit
+```
+
+There is no `exports` map, so import or copy any shipped path directly:
+
+```js
+import "@notambourine/brand-kit/tokens.css";
+```
+
+```bash
+cp -R node_modules/@notambourine/brand-kit/{fonts,logo} public/
+```
+
+`tokens.css` declares the `@font-face` rules and every `var()` the other two read, so
+load it first and serve `fonts/` beside it. The paths inside it are relative to the CSS
+file, so inlining it into a `<style>` block breaks the faces.
+
+The package ships the stylesheets, `fonts/`, `logo/`, and `SKILL.md`. The logo build
+script and `hello-world.html` stay in the repo. Pin an exact version and bump it on
+purpose; a caret range moves the brand under a consumer with no diff to review.
+
+Consumers today:
+
+| | |
+|---|---|
+| `notambourine/claude` | Ships it as the `/nt-brand:system` skill. |
+| `notambourine/share` | Serves `tokens.css` and `deck.css` from its own origin; a self-only CSP forbids a CDN. |
+| `notambourine/notambourine.com` | The site's stylesheet. |
+
+## Gate a consumer
+
+A `var(--x)` that reads a token this repo stopped declaring falls through to its
+fallback and the page still renders, so a bump can go wrong quietly. Check three things
+in the consumer's CI: the font bytes hash against `fonts/`, every color is one this kit
+defines, and every `var()` reads a property it still declares. `notambourine/share`'s
+`npm run brand` is the reference implementation.
+
+## Release
+
+Bump `version` in `package.json`, land it, then tag the merge commit:
+
+```bash
+git tag v1.0.1 && git push origin v1.0.1
+```
+
+`.github/workflows/npm-publish.yml` publishes the tag through npm trusted publishing.
+No token lives in this repo, and npm attaches a provenance attestation tying the
+published tarball to that workflow run. The workflow fails if the tag and the manifest
+disagree.
+
+## License
+
+MIT for the stylesheets and `SKILL.md`. The faces in `fonts/` are SIL Open Font License;
+see `fonts/OFL.txt`.

package/SKILL.md

@@ -0,0 +1,303 @@
+---
+name: system
+description: NoTambourine brand system - colors, type, spacing, component recipes, voice, and the audit that checks work against them. Use when building or styling anything NoTambourine-branded (site, landing page, mock, prototype, deck, email, README banner, slide), when asked for "the brand colors"/"brand tokens"/"our pink", when a design needs to match notambourine.com, or when checking copy before it ships to a client - wordmark forms, ASCII punctuation, sentence case, and AI tells. Ships tokens.css, components.css, and a Marpit deck theme to drop straight in.
+---
+
+# NoTambourine brand
+
+A boutique skunkworks engineering agency, working as a hands-on operating partner inside
+the client's org. The client's growth is capped by their tech: a legacy commerce stack, a
+revenue-share SaaS, a roadmap nobody can staff for. **Value creation is the deliverable,
+and trust is earned by shipping.** A CEO who wants the culture to change gets that from
+work landing in prod, not from a workshop. Scope holds, so the estimate is worth
+something. AI at the keyboard is why a small team can price this way; it is not what the
+client buys.
+
+The name carries the style, not the positioning. A tambourine is what you add when there
+is nothing left to add, so **NoTambourine = no padding**. That is why the design is
+confident type, one decisive pink, lots of air, no decoration.
+
+Fuller doctrine is published, so fetch it rather than reconstructing it. Every path below
+returns `text/plain` over plain HTTP with no auth, no signup, and no redirect - `curl` or
+`wget` one directly. This file stands alone when the machine is offline.
+
+| Fetch | For |
+|---|---|
+| `notambourine.com/llms.txt` | The index. Start here when you do not know which file you want. |
+| `notambourine.com/AGENTS.md` | What the firm does, who it serves, and the citation rules. |
+| `notambourine.com/SOUL.md` | What NoTambourine believes. The beliefs this design serves. |
+| `notambourine.com/CULTURE.md` | How the team works. Async-first, one operator per workstream. |
+
+`SOUL.md` and `CULTURE.md` are public cuts of longer internal documents, so absence from
+them is not evidence of anything. Client material is unpublished and stays that way -
+`robots.txt` disallows `/reports/` and `/pog/` for every agent.
+
+## Use the files
+
+Two stylesheets cover ~80% of any build, and a third renders a deck. Copy them next to
+your output, or inline them.
+
+| File | What it does |
+|---|---|
+| `tokens.css` | The whole system in one link: `fonts.css`, `vars.css`, `elements.css`. Load first and `h1`, `p`, `a`, `code`, `.eyebrow`, `.display`, `.lede` all come styled. |
+| `vars.css` | Every value as a CSS var, and nothing else. What a surface with its own faces and its own base layer imports. |
+| `fonts.css` | The six `@font-face` blocks, pointed at `./fonts/`. |
+| `elements.css` | The base element styles: bare `h1`, `p`, `a`, `code` on brand with no classes. |
+| `components.css` | `.nt-btn`, `.nt-badge`, `.nt-chip`, `.nt-input`, `.nt-card`, `.nt-nav`, `.nt-switch`/`.nt-check`/`.nt-radio`. All `var()`-based. |
+| `deck.css` | Marpit slide theme, 1280x720. Every value a `var()` off `tokens.css`. See "Decks" below for how to feed it markdown. |
+| `fonts/` | Six woff2: Nunito, Hanken Grotesk, JetBrains Mono, roman and italic each. Latin subset, variable, SIL OFL 1.1 (`fonts/OFL.txt`). Plus `nunito-wordmark-800.woff2`, a ten-glyph static subset for the lockup alone - 1.5 KB against Nunito's 39 KB, so a PDF or an offline snapshot inlines it as a data URI. |
+| `logo/` | The mark, the monogram, the three lockup colorways, the favicon and app tiles, and `export/` rasters cut from them. `scripts/build-logo.py` writes all of it. |
+| `hello-world.html` | Working page using both stylesheets. Start here for a mock; open it to eyeball the brand. |
+
+```html
+<link rel="stylesheet" href="tokens.css">
+<link rel="stylesheet" href="components.css">
+```
+
+**Copy the whole skill directory, not the stylesheets alone.** `tokens.css` pulls in
+`fonts.css`, which declares `@font-face` against `./fonts/`, so type is wired up with
+no network and no third party - a mock renders on brand from `file://` on a plane.
+Those paths resolve against the CSS file, so inlining the CSS into a `<style>` block
+instead means `fonts/` has to sit beside the HTML.
+
+A surface that already ships its own faces and its own base layer imports `vars.css`
+alone. It gets every value and none of the opinions, and there is still one copy of
+each number.
+
+Never swap that for a Google Fonts `@import`. It sends the visited URL to Google as a
+`Referer` and blocks a self-only CSP, which is why the site deleted its own. A mock is
+the artifact most likely to graduate into a real page, so it carries the same rule.
+
+### Fonts on a locked-down surface
+
+Some surfaces cannot load `./fonts/` at all: a claude.ai artifact, an email client, a
+README banner. There the faces fall back silently and the brand degrades without a
+decision. Make it a decision:
+
+- Inline the face as a data URI in the `@font-face` `src`: `base64 -i fonts/<file>.woff2`
+  emits the payload. The wordmark subset is 1.5 KB, so inline it always; a full face runs
+  30-40 KB, so inline one only when the surface is worth the bytes.
+- Where inlining is not worth it, the fallback stacks in `vars.css` are the brand's
+  degraded form: `system-ui` for display, `ui-monospace` for body. Ship them knowingly.
+  The Google Fonts rule above holds here too.
+
+## Non-negotiables
+
+These are the rules that get broken. Check your output against them.
+
+- **Dark by default.** Page is `var(--bg)` (#0B0B0C), cards `var(--bg-card)` (#141416).
+  Pure white is never a surface. `class="theme-light"` is opt-in and rare - print, a press
+  page, a one-off email.
+- **One pink.** `#E75A7C` is the only accent. One pink CTA per screen. Mint (`#58C9B9`) is
+  structural - borders, status dots, supporting icons - **never** a CTA.
+- **No gradients.** Not on sections, not on buttons, not on heroes. One radial halo behind
+  a hero lockup is the sole exception, and it must read as lighting.
+- **No stock photography, no AI imagery, no hand-drawn textures.** Imagery is flat,
+  geometric, two-color. Ask for real assets before papering over.
+- **Pill buttons** (`--r-pill`), 14px cards (`--r-md`). Never mix a sharp and a round
+  corner in one component.
+- **No colored-left-border cards.** Full borders, not stripes.
+- **Press scales to 0.97, hover does not move.** Hover darkens fill or lifts shadow. No
+  translate, no scale on hover, no parallax, no looping animation.
+- **No emoji in UI chrome, no icon fonts.** Icons are Lucide SVG, 1.75px stroke, rounded
+  caps - 20px in nav/buttons, 24px in features, 16px in inputs.
+- **Never redraw the logo; link a file out of `logo/`.** The lockup is `notambourine` set
+  in Nunito 800 beside the tambourine mark. Ship `logo/lockup.svg`, or its `-white` and
+  `-ink` reversals. Where the lockup will not fit - an avatar, an app icon, a stamp - use
+  `logo/monogram.svg`, the mark with `no` nested in the crescent; `logo/mark.svg` drops
+  the letters for a watermark or a bullet. `logo/lockup-text.svg` keeps the wordmark as
+  live `<text>` over an inlined ten-glyph Nunito subset - open that one to edit the type,
+  and re-run `scripts/build-logo.py` rather than hand-patching an outline.
+  `--font-wordmark` exists for the lockup and nothing else; a heading that reaches for it
+  is a bug.
+- **One pink word per headline**, via `<em>` - pink *and* italic. Hanken Grotesk ships a
+  drawn italic, so emphasis carries both and never a browser-faked skew.
+- **Every interactive element keeps a visible focus ring.** `tokens.css` ships it
+  (2px accent, 4px offset). Don't `outline: none` without replacing it.
+
+## Voice
+
+Concise, warm, playful - in that order.
+
+- **Register follows the artifact.** Site and marketing copy says **you** to the reader.
+  A client deliverable (deck, plan, README) says **we**, meaning the client's org with us
+  inside it. A proposal or SOW names the parties. Never "I".
+- **A client deliverable does not sell.** No logo wall, no team slide, no methodology.
+  Explain the client's own system back to them and let the restraint be the credential.
+- **Proof is a count, not an adjective.** Use the client's own numbers, before and after.
+  Reach for an adjective only where no number exists.
+- **Name the mess without blaming anyone for it.** The client lived every decision that
+  built it. Copy that indicts them loses the room.
+- **Four wordmark forms, and only four.** `NoTambourine` in every human-facing sentence.
+  `notambourine` is the technical slug, correct only in a path, URL, domain, GitHub org,
+  npm name, or CSS class. `NoTambourine LLC` is the legal entity and appears twice at most
+  in a contract - the signature block and one Definitions anchor - and nowhere else.
+  `Notambourine` is not a valid form. The same rules are published for outside agents at
+  `notambourine.com/AGENTS.md`, so a disputed flag has a public citation.
+- **Sentence case everywhere** - headlines, buttons, nav, labels. "Get started", not
+  "Get Started". The lockup renders lowercase.
+- **ALL CAPS has one job:** the pink eyebrow above a heading, tracked `+0.08em`. Never a
+  button, never body.
+- Five to twelve word sentences. No throat-clearing, no superlatives, no exclamation
+  marks in body.
+- **ASCII punctuation, with one unicode exception.** Hyphen, straight quote, straight
+  apostrophe. No em dash, no en dash, no curly quote, no single-character ellipsis. The
+  site source ships zero of each, and an em dash is the most reported AI tell in
+  marketing copy. The interpunct stays, because the brand uses it as a separator:
+  `Tom Fuertes · Principal · NoTambourine`.
+- **Yes:** "Senior engineers. No tambourine." · "Two engineers, six weeks, one shipped
+  feature." · "Tell us what you're building. We'll write back the same day."
+- **No:** "Unlock your team's full potential with our proven 7-phase framework!" ·
+  "results-driven, agile-first, AI-powered engineering studio"
+
+### Public copy carries no AI tells
+
+Read anything a stranger sees for these tells: hero, section body, email, deck,
+proposal, README. NoTambourine sells the absence of padding, so padded copy argues
+against the pitch. Four tells land hardest in consultancy copy:
+
+- Puffery adjectives. "Boutique" is specific and true; "proven", "world-class",
+  "results-driven", "battle-tested" are not. Cut the adjective and keep the number.
+- Importance-flagging. "This matters." "Speed is not a footnote." Show the consequence
+  instead.
+- The participle tail. "We ship in six weeks, ensuring your roadmap stays on track." Cut
+  at the comma.
+- Grandiose scope. "changes how you build", "the future of engineering". Scope it to a
+  claim a client could hold you to.
+
+Three brand fixtures read as tells and must survive the read:
+
+- **"Senior engineers. No tambourine."** A tailing negation plus a two-beat fragment,
+  both tells on their own. The line carries the name and the positioning, so it stays.
+- **A three-item line whose items are facts.** "Two engineers, six weeks, one shipped
+  feature" spends all three slots on numbers. A three-item line spending them on
+  adjectives is the tell.
+- **The single pink `<em>` in a headline.** Typographic emphasis, not the boldface tic.
+
+## Type and layout
+
+- **Headings** Hanken Grotesk 700, negative tracking - a serif holds a headline at 400
+  and a sans goes limp, so the weight is what reads as deliberate. 800 is the hero's, so
+  `.display` stays distinct from an ordinary `h1`. **Wordmark** Nunito 800, untracked,
+  the lockup only. **Accent** JetBrains Mono 600 for eyebrows, buttons, badges, nav.
+  **Body and mono** JetBrains Mono 400. Monospace body is the practitioner signal; it is
+  the point, not an accident. Every face is variable across its full axis, so no weight
+  here is ever synthesized.
+- **The rounded lockup carries the play; the headings stay sober.** The reader is a PE
+  operating partner, so only the lockup gets to be warm.
+- Body runs `1.7` leading and `+0.01em` tracking. Monospace at a sans's 1.55 reads cramped.
+- Tracking tightens as size grows: `--ls-tight` (-0.02em) is the floor, and `--ls-display`
+  (-0.03em) is what hero type above ~56px wants. Zero on body, +0.08em on ALL-CAPS eyebrows.
+- `text-wrap: balance` on headings, `pretty` on paragraphs. Always.
+- Body copy is a single column, max ~640px. Never full-viewport.
+- Card grids are 2 or 3 columns, single on mobile. Never 4.
+- 4pt grid. `--sp-16` between big blocks, `--sp-6` inside a card, `--sp-2` label-to-field.
+  When unsure, add room.
+- The nav is the only sticky element. No sticky CTAs, chat bubbles, or cookie banners.
+
+## Audit copy against all of the above
+
+Run this over anything a client or a stranger sees before it ships: deck, proposal, SOW,
+cover email, README, landing page, release note. The greps are a first pass that finds
+candidates. Every hit needs the rules above to judge it, which is why they live in one
+file with them.
+
+```bash
+# Wordmark: lowercase in prose, outside code, paths, and URLs
+grep -nE '(^|[^/.\-_a-z`])notambourine([^/.\-_a-z`]|$)' <file>
+
+# Sentence case: never a valid form
+grep -n 'Notambourine' <file>
+
+# Legal entity, 2x max (signature block + Definitions anchor)
+grep -nc 'NoTambourine LLC' <file>
+
+# Em dash, en dash, curly quotes, single-char ellipsis. Interpunct deliberately absent.
+perl -CSD -ne 'print "$.:$_" if /[\x{2014}\x{2013}\x{2018}\x{2019}\x{201C}\x{201D}\x{2026}]/' <file>
+
+# Puffery adjectives
+grep -niE '\b(proven|world-class|battle-tested|results-driven|cutting-edge|best-in-class|seamless|robust|leverage|synergy|holistic|bespoke)\b' <file>
+
+# Participle tails: cut the sentence at the comma
+grep -niE ',\s+(ensuring|enabling|allowing|helping|driving|empowering|delivering|providing)\b' <file>
+
+# Importance-flagging and throat-clearing
+grep -niE "\b(this matters|it's worth noting|it is worth noting|needless to say|at the end of the day|in today's)\b" <file>
+
+# Exclamation marks in body, and first person
+grep -nE '!(\s|$)' <file>
+grep -nE '\bI\b' <file>
+```
+
+Perl rather than `grep -P` for the punctuation pass. Stock macOS `grep` is BSD and
+rejects `-P`, so that flag only works where someone installed GNU grep. Escapes rather
+than literal characters, so this file stays ASCII and never trips its own check.
+
+Across a directory, or a staged diff so a flag lands on work in progress:
+
+```bash
+grep -rnE '(^|[^/.\-_a-z`])notambourine([^/.\-_a-z`]|$)' <dir>/ --include='*.md'
+
+git diff --cached | grep -nE '^\+.*[^/.\-_a-z`]notambourine[^/.\-_a-z`]'
+git diff --cached | perl -CSD -ne 'print if /^\+.*[\x{2014}\x{2013}\x{2018}\x{2019}\x{201C}\x{201D}\x{2026}]/'
+```
+
+Then read for the two tells no grep finds: **grandiose scope**, and a **three-item line
+spending its slots on adjectives** rather than numbers. Leave the three fixtures above
+alone - they read as tells and stay.
+
+**Ignore:** the slug in frontmatter, paths, URLs, CSS classes, npm names, GH remotes, and
+anything inside a code fence or backticks (the wordmark pattern already excludes them). A
+puffery word used literally about a thing rather than as a boast - "a robust error path".
+`I` inside a quotation, a code identifier, or a name.
+
+**Judge a hit two ways.** For the wordmark: would a client reading this expect the
+wordmark or the slug? A path, URL, or identifier is the slug, so ignore it. For
+everything else: would cutting this weaken the claim? If the sentence survives the cut,
+the words were padding.
+
+## Where truth lives
+
+**`notambourine/brand-kit` is the golden set.** `tokens.css`, `components.css`, and
+`deck.css` here are the brand's only corrected copy. Read a value from this file, correct
+a value in this file, and never sync one in. Anything that disagrees with it is downstream
+and stale, however it renders.
+
+A surface that cannot fetch at runtime pins this repo and reads the bytes out of the
+checkout - `share.notambourine.com` serves `tokens.css` and `deck.css` from its own origin,
+because a self-only CSP forbids a CDN. A pinned checkout is not a fork: the pin names one
+commit, and the consumer's CI fails when a `var()` reads a token this repo stopped
+declaring. Correct the value here and bump the pin.
+
+This skill is the complete system, so nothing has to be looked up elsewhere. It carries
+both themes: dark surfaces by default, and the light primitives behind `.theme-light`
+(`--nt-ink`, `--nt-white`, `--nt-line`, the pink and mint tints, `--nt-paper-warm`).
+A shipping surface may render dark only. That is a choice it made, not a shorter system.
+
+Every stylesheet here is native CSS with no build step, so they load into a plain HTML file,
+a Worker, an email template, or a React app unchanged. Write against the semantic layer -
+`--bg`, `--bg-card`, `--fg1`/`2`/`3`, `--fg-mute`, `--accent`, `--accent-fg`,
+`--accent-text`, `--support`, `--line`, `--sp-*`, `--r-*`, `--shadow-*`, `--ring-accent`,
+`--font-*`. It is the stable API and it
+survives a theme swap. The `--nt-*` primitives beneath it are the raw palette; reach past
+the alias to one only when no alias covers what you need, and never inline a literal
+color - `.theme-light` only works because no component hardcodes one. A `var()` fallback
+is the one place a literal is correct, and `deck.css` uses them: a renderer can receive
+that theme without `tokens.css` beside it, and the deck still comes out on brand.
+
+## Decks
+
+Grammar first: numbered eyebrow → lowercase display headline with one pink `<em>` word →
+short body → ALL-CAPS sublabel → typographic concept diagram → running footer. Every
+"image" is a diagram built from the same tokens. No photography, no icons standing in for
+a chart.
+
+`deck.css` is the theme that renders it. Markdown in, slides out, through Marpit: `---`
+splits a slide, `<!-- _class: lead -->` centers a title slide, `<!-- paginate: true -->`
+turns on slide numbers. Load `tokens.css` on the page too - `deck.css` declares no
+`:root`, so it reads its colors and faces from whatever the document root defines, and a
+brand correction reaches a deck with no second edit.
+
+`share.notambourine.com` runs this theme in its browser renderer and its PDF export, so a
+deck shared from there and a deck built by hand come out the same. It serves these bytes
+from a pinned checkout of this repo; correct a value here.

package/components.css

@@ -0,0 +1,186 @@
+/* =========================================================
+   NoTambourine: component recipes
+   ---------------------------------------------------------
+   The ~80% of UI you actually build: button, badge, chip,
+   input, card, nav, switch/check/radio.
+
+   Native CSS, no build step, no framework. Every color, radius,
+   space, and duration is a var() from tokens.css, so load that
+   first and a theme swap carries the whole file. Bare px survives
+   only where it is component geometry - a 20px checkbox, a 40x24
+   switch - never where a token exists.
+
+   For sections (hero, pricing, feature row, footer) and the deck
+   language, see SKILL.md.
+   ========================================================= */
+
+/* --- Button: pill is the default shape --------------------- */
+.nt-btn {
+  font-family: var(--font-accent);
+  font-weight: var(--fw-semibold);
+  font-size: var(--fs-small);
+  letter-spacing: 0.01em;
+  padding: var(--sp-3) 22px;
+  border: 0;
+  border-radius: var(--r-pill);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-2);
+  white-space: nowrap;
+  /* Named props, not `all`: the focus outline must land instantly, and
+     transform rides its own shorter beat for the press snap. */
+  transition: background var(--dur-2) var(--ease-out),
+              color var(--dur-2) var(--ease-out),
+              border-color var(--dur-2) var(--ease-out),
+              box-shadow var(--dur-2) var(--ease-out),
+              transform var(--dur-1) var(--ease-out);
+}
+.nt-btn--sm { padding: var(--sp-2) 14px; font-size: var(--fs-caption); }
+.nt-btn--lg { padding: var(--sp-4) 28px; font-size: var(--fs-body); }
+
+/* One pink CTA per screen. Hover lifts the shadow rather than darkening
+   the fill: ink text on the press tone lands at 4.3:1 and fails AA. */
+.nt-btn--primary   { background: var(--accent); color: var(--fg-on-pink); box-shadow: var(--shadow-accent); }
+.nt-btn--primary:hover { box-shadow: var(--shadow-pink); }
+.nt-btn--secondary { background: transparent; color: var(--fg1); border: 1px solid var(--fg1); }
+.nt-btn--secondary:hover { background: var(--fg1); color: var(--bg); }
+.nt-btn--ghost     { background: transparent; color: var(--fg1); }
+.nt-btn--ghost:hover { background: var(--accent-soft); color: var(--accent-text); }
+.nt-btn--inverse   { background: var(--fg1); color: var(--bg); }
+.nt-btn:disabled   { background: var(--bg-raised); color: var(--fg-mute); cursor: not-allowed; box-shadow: none; }
+
+/* Scale only on press, never on hover. The one playful beat. */
+.nt-btn:active:not(:disabled) { transform: scale(0.97); }
+
+/* --- Badge -------------------------------------------------- */
+.nt-badge {
+  font-family: var(--font-accent);
+  font-size: var(--fs-badge);
+  font-weight: var(--fw-semibold);
+  letter-spacing: 0.04em;
+  padding: var(--sp-1) var(--sp-3);
+  border-radius: var(--r-pill);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+.nt-badge--pink    { background: var(--accent-soft); color: var(--accent-fg); }
+.nt-badge--mint    { background: var(--support-soft); color: var(--support-fg); }
+.nt-badge--ink     { background: var(--fg1); color: var(--bg); }
+.nt-badge--outline { background: transparent; color: var(--fg2); border: 1px solid var(--line); }
+.nt-badge__dot     { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+
+/* --- Filter chip -------------------------------------------- */
+.nt-chip {
+  font-family: var(--font-accent);
+  font-size: var(--fs-label);
+  font-weight: var(--fw-medium);
+  padding: 6px var(--sp-3);
+  border-radius: var(--r-pill);
+  border: 1px solid var(--line);
+  background: var(--bg-card);
+  color: var(--fg1);
+  cursor: pointer;
+}
+.nt-chip[aria-pressed="true"] { background: var(--fg1); color: var(--bg); border-color: var(--fg1); }
+
+/* --- Input -------------------------------------------------- */
+.nt-field { display: flex; flex-direction: column; gap: 6px; }
+.nt-field > label { font-family: var(--font-accent); font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--fg1); }
+.nt-field .nt-hint { font-size: var(--fs-caption); color: var(--fg3); }
+.nt-field .nt-err  { font-size: var(--fs-caption); color: var(--accent-fg); }
+
+.nt-input {
+  font-family: var(--font-body);
+  /* Never below 1rem: iOS Safari auto-zooms a focused input under 16px. */
+  font-size: var(--fs-body);
+  color: var(--fg1);
+  padding: var(--sp-3) 14px;
+  border-radius: var(--r-md);
+  border: 1px solid var(--line);
+  background: var(--bg-input);
+  outline: none;
+  transition: border-color var(--dur-2), box-shadow var(--dur-2);
+}
+.nt-input::placeholder { color: var(--fg-mute); }
+.nt-input:focus        { border-color: var(--accent); box-shadow: var(--ring-accent); }
+.nt-input[aria-invalid="true"] { border-color: var(--accent); }
+.nt-input:disabled     { background: var(--bg-card); color: var(--fg-mute); cursor: not-allowed; }
+
+/* --- Card: full border, never a colored left stripe -------- */
+.nt-card {
+  background: var(--bg-card);
+  border: 1px solid var(--line-soft);
+  border-radius: var(--r-md);
+  padding: var(--sp-6);
+  box-shadow: var(--shadow-1);
+  transition: background var(--dur-2), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2);
+}
+/* Hover lifts the shadow. No translate, no scale. */
+.nt-card--hover:hover { background: var(--bg-raised); box-shadow: var(--shadow-2); }
+/* A pink/mint border is a feature: callouts, active step, selected tier. */
+.nt-card--accent  { border-color: var(--accent); }
+.nt-card--support { border-color: var(--support); }
+
+/* --- Nav: frosted, the only sticky element on a page ------- */
+.nt-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-6);
+  padding: var(--sp-4) var(--sp-6);
+  background: var(--bg-veil);
+  backdrop-filter: blur(18px);
+  border-bottom: 1px solid var(--line);
+}
+/* Nunito 800, and untracked, so the text lockup matches logo.svg glyph
+   for glyph. The only place --font-wordmark is allowed. */
+.nt-nav__brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--accent);
+                 font-family: var(--font-wordmark); font-weight: var(--fw-black); font-size: 17px;
+                 letter-spacing: normal; }
+.nt-nav__links { display: flex; gap: 22px; margin-left: var(--sp-4); }
+.nt-nav__links a { font-family: var(--font-accent); font-size: var(--fs-label); font-weight: var(--fw-medium);
+                   color: var(--fg3); padding: 6px 0; border-bottom: 1.5px solid transparent; }
+.nt-nav__links a:hover        { color: var(--fg1); border-bottom-color: transparent; }
+.nt-nav__links a[aria-current] { color: var(--fg1); border-bottom-color: var(--accent); }
+
+/* --- Switch / checkbox / radio ------------------------------ */
+.nt-switch {
+  width: 40px; height: 24px; flex-shrink: 0; cursor: pointer; position: relative;
+  border-radius: var(--r-pill); border: 1px solid var(--line);
+  background: var(--bg-input); transition: background var(--dur-2);
+}
+.nt-switch::after { content: ''; position: absolute; top: 3px; left: 3px;
+                    width: 16px; height: 16px; border-radius: 50%; background: var(--fg3);
+                    transition: left var(--dur-2), background var(--dur-2); }
+.nt-switch[aria-checked="true"]        { background: var(--accent); border-color: var(--accent); }
+.nt-switch[aria-checked="true"]::after { left: 21px; background: var(--fg-on-pink); }
+
+/* Put .nt-check/.nt-radio on a <button>: it tabs and clicks natively,
+   where a span needs tabindex and key handling bolted on. */
+.nt-check {
+  width: 20px; height: 20px; flex-shrink: 0; padding: 0; cursor: pointer;
+  appearance: none;
+  border-radius: var(--r-xs); border: 1.5px solid var(--fg3); background: var(--bg-card);
+  display: inline-flex; align-items: center; justify-content: center;
+}
+.nt-check[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
+.nt-check svg { display: none; }
+.nt-check[aria-checked="true"] svg { display: block; }
+
+.nt-radio {
+  width: 20px; height: 20px; flex-shrink: 0; position: relative; padding: 0;
+  cursor: pointer; appearance: none;
+  border-radius: 50%; border: 1.5px solid var(--fg3); background: var(--bg-card);
+}
+.nt-radio[aria-checked="true"]        { border-color: var(--accent); }
+.nt-radio[aria-checked="true"]::after { content: ''; position: absolute; inset: 3px;
+                                        border-radius: 50%; background: var(--accent); }
+
+/* Row wrapper for a toggle + its label */
+.nt-toggle-row {
+  display: flex; align-items: center; gap: 14px;
+  padding: var(--sp-3) 14px;
+  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-raised);
+}