@cueplusplus/brand-tokens 0.13.0

package/BRAND.md

@@ -0,0 +1,133 @@
+# CUE++ brand — seed
+
+The CUE++ brand has never had a repository. It has a *de facto* home — the marketing site —
+where the ramp, the type stack, the `//` motif and the marks have been consistent for long
+enough to count as decisions. This package is those decisions, lifted out and named, so that
+the next surface that needs them does not have to read someone else's Tailwind classes to
+find out what the brand is.
+
+It is a **seed**, in two senses:
+
+- It is deliberately small. Colour, type, one ornament, three animations, four marks. No
+  components, no layout, no build step.
+- It is meant to move. `cueplusplus/brand-design-system` exists and is empty; when it is
+  filled, this package is what it starts from. Until then it lives here because here is
+  where it gets used and tested.
+
+## What this is not
+
+It is **not** the product theme. Product surfaces consume `@cueplusplus/tokens` and the `cue`
+preset, which is this brand *translated* into the semantic contract — most visibly, the
+product ramp starts at `#0a0a0a` rather than the marketing brand's pure `#000`, because a
+console UI needs elevation and pure black has nowhere to go. Where the two disagree, the
+theme wins for product and this package wins for brand. There is no build coupling between
+them, on purpose: the `cue` theme's token files carry a comment pointing here, and that is the
+whole relationship.
+
+Importing `brand.css` paints nothing. Every rule is either a custom property on `:root` or a
+`.brand-*` utility you have to ask for. The one exception is the reduced-motion clamp, which
+is global and meant to be.
+
+## Provenance
+
+Read out of `cue++/site` at commit `79b5bf8` on **2026-08-18**, read-only. Nothing in this
+package is generated from that repository at build time; it was transcribed once, and these
+are the paths to re-read if it needs re-transcribing.
+
+| What | Source |
+| --- | --- |
+| White-alpha ramp | `src/**/*.tsx` — a census of every `white/<n>` Tailwind class (~19 distinct alphas, ~700 uses) plus the literal `rgba(255,255,255,…)` in `src/app/globals.css` |
+| Brand black / white | `src/app/globals.css` — `body { background-color: #000; color: #fff }` |
+| JetBrains Mono stack | `src/app/layout.tsx` (`next/font/google`, `--font-mono`) + `tailwind.config.ts` (both `sans` and `mono` point at it) |
+| Eyebrow treatment | `src/app/page.tsx:112`, `src/app/products/page.tsx:74`, `src/app/faq/page.tsx:22`, `src/components/services-approach.tsx:91` and ~20 more — all `text-[10px] uppercase tracking-[0.3em] text-violet-400` prefixed with a literal `// ` |
+| Motion keyframes | `src/app/globals.css` — `@keyframes float / slide-up / nudge-x`; the `float` timing from its one call site, `src/app/page.tsx:94` |
+| Reduced-motion clamp | `src/app/globals.css`, the `@media (prefers-reduced-motion: reduce)` block |
+| Scrollbar + selection | `src/app/globals.css`, the `::-webkit-scrollbar*` and `::selection` rules |
+| Wordmark (light/dark) | `external-assets/CUE++ VIsualPack/{cue++,dark cue++}.svg` — the light one is byte-identical to `public/logo.svg` |
+| Plussie (light/dark) | `external-assets/CUE++ VIsualPack/{plussie,dark plussie}.svg` |
+| Voice | `docs/brand-voice.md` — **not** copied here; it is prose, it is maintained there, and it is the authority on how CUE++ writes about itself. Read it before writing brand copy. |
+
+### What was regularised on the way in
+
+Transcription is not photocopying, and three things changed. They are listed here so the next
+person can disagree with them on the evidence.
+
+1. **The ramp was snapped to a grid.** The site reaches for 19 distinct white alphas, several
+   of them used once (`white/65`, `white/85`, `rgba(255,255,255,0.022)`). The package declares
+   15 steps — 5-point increments to `a60`, then decades — which covers every alpha with more
+   than a handful of uses. The one-offs round to a neighbour.
+2. **Utility classes were namespaced, keyframes were not.** The site's `.animate-slide-up` and
+   `.scrollbar-hide` became `.brand-animate-slide-up` and `.brand-scrollbar-hide`, because a
+   published package that claims `.animate-*` will collide with somebody's Tailwind plugin.
+   The keyframe *names* stayed `float` / `slide-up` / `nudge-x`: an `animation` shorthand
+   quotes a keyframe name literally, so renaming them would change the token values that are
+   the point of shipping them.
+3. **The scrollbar and selection rules became opt-in.** The site styles the document
+   scrollbar and `::selection` globally, which is correct for a site and wrong for a package —
+   importing a stylesheet should not repaint an app's chrome. They are `.brand-scrollbar`,
+   `.brand-scrollbar-hide` and `.brand-selection` here. Apply them at the root of a brand
+   surface to get the site's behaviour back.
+
+The site's fourth animation, `sparkle`, was left behind: it belongs to one component on one
+page rather than to the brand.
+
+## The editorial accents
+
+The site uses violet, sky, amber and emerald as *editorial* colour — section accents on
+marketing pages. Only the eyebrow violet (`--brand-eyebrow-accent`, Tailwind `violet-400`
+`#a78bfa`) is seeded, and it carries a standing rule from the design-system spec (§3):
+
+> the site's violet/sky/amber/emerald are editorial accents and must NOT become semantic
+> status colors.
+
+If a brand surface needs more of that palette, add it here as `--brand-editorial-*`. Do not
+add it to a theme.
+
+## Contents
+
+```
+src/brand.css     the tokens + the opt-in utilities
+src/index.ts      the token names, class names and asset specifiers, typed
+assets/           cueplusplus-wordmark{,-dark}.svg · plussie{,-dark}.svg
+```
+
+### Reading the mark names
+
+`-dark` names the **ink, not the ground** — the convention the source visual pack uses.
+
+| File | Ink | Put it on |
+| --- | --- | --- |
+| `cueplusplus-wordmark.svg` | white | a dark ground |
+| `cueplusplus-wordmark-dark.svg` | black | a light ground |
+| `plussie.svg` | white disc, `#1E1E1E` glyph | a dark ground |
+| `plussie-dark.svg` | black disc, white glyph | a light ground |
+
+Both wordmarks are drawn on a `0 0 778 367` artboard, both Plussies on `0 0 367 367`. The
+`#1E1E1E` glyph inside the light badge is the only non-monochrome value in the identity —
+it stops the badge reading as a hole punched in the page — and it is exported as
+`--brand-plussie-ink`.
+
+## Usage
+
+```css
+@import "@cueplusplus/brand-tokens/brand.css";
+```
+
+```tsx
+import { BRAND_ASSETS } from "@cueplusplus/brand-tokens";
+
+<p className="brand-eyebrow">Work with us</p>          {/* → // WORK WITH US */}
+<img src={BRAND_ASSETS.wordmark} alt="CUE++" />
+```
+
+```css
+.hairline { border: 1px solid var(--brand-white-a10); }
+.caption  { color: var(--brand-white-a40); font-family: var(--brand-font-mono); }
+```
+
+## When the brand repo happens
+
+Move `src/`, `assets/` and this file across, keep the package name, and replace this package
+with a dependency on the published one. The tests in `test/` move with it — they are the
+transcription's proof, and they are worth more in the repo that owns the brand than in the one
+that borrowed it.

package/CHANGELOG.md

@@ -0,0 +1,251 @@
+# @cueplusplus/brand-tokens
+
+## 0.13.0
+
+### Patch Changes
+
+- eb59eaf: **`@cueplusplus/brand-tokens` ships compiled JavaScript instead of TypeScript source.**
+
+  Its main export pointed at `./src/index.ts`. Inside this repository that was invisible — every
+  consumer reads it through TypeScript — but an installed package cannot assume that. Node refuses it
+  outright (`ERR_UNSUPPORTED_NODE_MODULES_TYPE_STRIPPING`: "Stripping types is currently unsupported
+  for files under node_modules"), and a bundler only handles it if you have opted this dependency into
+  transpilation — `transpilePackages` in Next.js, or equivalent. Anyone who had not was met with an
+  import error for a module that is nothing but string constants.
+
+  The entry is now `dist/index.mjs` with `dist/index.d.mts` beside it, built by tsdown the way every
+  other published package here is built. **Nothing about the module changed** — the same nine exports,
+  the same names, the same values; the types are unchanged because they are generated from the same
+  source.
+
+  `brand.css` and `assets/` are untouched and still ship verbatim: `@cueplusplus/brand-tokens/brand.css`
+  and `@cueplusplus/brand-tokens/assets/*` resolve exactly as before. The stylesheet remains the source
+  of truth, and this module remains its typed index.
+
+  If you were already importing this package successfully, nothing changes for you. If you were working
+  around it with a transpilation rule, you can drop the rule.
+
+- b1c2f25: **Every package now ships the licence it declares.** All sixteen have said `"license": "MIT"` in
+  their manifest since they were first published, and none of them carried the text. Installing one
+  gave you a licence field and nothing to read; anyone auditing their dependency tree found a package
+  that claimed a licence it did not include. Each package root now holds the MIT notice, and npm packs
+  a root `LICENSE` whether or not `files` lists it, so it is in the tarball you install.
+
+  `@cueplusplus/ui` additionally ships `NOTICE.md`, the third-party notice for the assistant-ui code
+  vendored into its elements. That one is not automatic — `files` had to name it — and it is byte-for-byte
+  the notice that already sat beside the source it covers, because a notice that travels without the
+  bytes it describes is not a notice.
+
+  Nothing else about these packages changed: same exports, same versions of every dependency, same
+  registry. If you are upgrading only for this, the diff you receive is licence text.
+
+## 0.12.0
+
+## 0.11.1
+
+## 0.11.0
+
+## 0.10.0
+
+### Patch Changes
+
+- 64b4bab: Every package manifest's `repository` field now names `cueplusplus/cue-ui`, following the
+  repository's rename from an earlier working title.
+
+  **Nothing to do.** No code, no exports, no types, and no package name: the scope is the
+  organisation, not the repository, so every specifier you already import is the one you keep
+  importing. What moves is metadata — GitHub Packages matches a package to a repository through that
+  field, so from this release the "source" link on each package's registry page, and the repository
+  the next publish is attributed to, name `cue-ui`. The `directory` beside it is unchanged, so each
+  link still lands on that package rather than on the monorepo root.
+
+  If you have a bookmark or a script pointing at the old URL, GitHub's rename redirect answers it;
+  updating it to `https://github.com/cueplusplus/cue-ui` is tidiness rather than repair.
+
+## 0.9.0
+
+### Patch Changes
+
+- cf80a87: No published behaviour changes. These packages gain a `lint` script and its two
+  dev dependencies, because `pnpm lint` now runs ESLint over every package that
+  holds source rather than resolving to an empty task graph, and a package with no
+  script is a package the gate is silently green about.
+- 5eb0da2: The ten colour presets leave `@cueplusplus/tokens` and become packages of their
+  own. `@cueplusplus/ui/styles.css` now ships the blank base instead of a palette,
+  so a theme is something you install, import and register — the same way a
+  third-party theme always should have been, and now is.
+
+  `@cueplusplus/tokens` keeps the two axes it actually owns: the five density
+  rungs and the eight font pairings, plus the contracts, `base.json` and the
+  primitives a theme source aliases. It emits `axes.css` and no colour at all.
+  Each preset is `@cueplusplus/theme-<name>` — `cue`, `dusk`, `hivehub`, `luma`,
+  `quotamate`, `requestport`, `signal`, `snuffle`, `terminal`, `venu` — carrying
+  the stylesheet it always carried, byte for byte: nothing about any shipped
+  palette moved, and a frozen snapshot of what `tokens@0.8.0` emitted is committed
+  so that stays checkable rather than merely asserted.
+
+  ## Migrating
+
+  **The unattributed default stops being `cue`.** An app that imports
+  `@cueplusplus/ui/styles.css` and registers nothing now paints the blank base.
+  Nothing errors and nothing falls back: a `data-theme` value is styled by
+  whichever stylesheet declares it, and with no theme package imported, none does.
+
+  Ten custom properties move in dark and seven in light. Measured on a root
+  stamped `data-theme="cue"`, which is what every `ThemeProvider` stamped before
+  this release and still stamps, so this is the delta for an app that changes
+  nothing:
+
+  | token                                                | dark: `cue` → blank base                                                | light: `cue` → blank base      |
+  | ---------------------------------------------------- | ----------------------------------------------------------------------- | ------------------------------ |
+  | `--cue-accent`                                       | `#ffffff` → `#8a93a6`                                                   | `#0a0a0a` → `#3f4759`          |
+  | `--cue-accent-hover`                                 | `rgba(255,255,255,0.85)` → `#9aa3b6`                                    | `rgba(0,0,0,0.85)` → `#333a4a` |
+  | `--cue-accent-soft`                                  | follows `--cue-accent`: it is a 14% `color-mix` of it                   | same                           |
+  | `--cue-focus`                                        | `#ffffff` → `#8a93a6`                                                   | `#0a0a0a` → `#3f4759`          |
+  | `--cue-font-theme-mono`                              | JetBrains Mono → nothing; the base declares no theme mono               | same as dark                   |
+  | `--cue-font-mono`                                    | resolves through the line above, so JetBrains Mono → the platform stack | same as dark                   |
+  | `--cue-fg`                                           | `#f5f5f7` → `#f5f5f5`                                                   | unchanged                      |
+  | `--cue-hair`, `--cue-hair-strong`, `--cue-row-hover` | follow `--cue-fg`: each is a `color-mix` of it (6%, 12%, 3.5%)          | unchanged                      |
+  | `--cue-accent-fg`                                    | unchanged                                                               | `#fcfcfc` → `#ffffff`          |
+
+  The last four rows are the ones an eye catches and a list of "the accent and the
+  focus ring" would not have mentioned: four of the ten dark changes and the one
+  light change are tokens no theme file names directly, because they are mixes of
+  two that do.
+
+  To get `cue` back, exactly as it was:
+
+  ```bash
+  pnpm add @cueplusplus/theme-cue
+  ```
+
+  ```css
+  @import "@cueplusplus/ui/styles.css";
+  @import "@cueplusplus/theme-cue/theme.css";
+  ```
+
+  ```tsx
+  import cue from "@cueplusplus/theme-cue";
+
+  <ThemeProvider themes={[cue]} theme="cue">
+    {children}
+  </ThemeProvider>;
+  ```
+
+  The import order is load-bearing: a `[data-theme]` block and the base's bare
+  `:root` tie at (0,1,0), so the one declared later wins. Importing the theme
+  before `styles.css` paints the blank base over it. Importing the package from
+  its root, rather than the `manifest.json` subpath, also closes `ThemeName` to
+  the themes you installed, so a misspelt `theme=` is a type error.
+
+  Then the rest:
+
+  - **`@cueplusplus/tokens/theme.css` is a deprecated alias** of `axes.css` for
+    one minor. It still resolves and still delivers the geometry and type axes, so
+    a stylesheet naming it keeps building — it simply carries no palette. Change
+    the line to `@cueplusplus/tokens/axes.css`, or drop it: `ui/styles.css` already
+    brings the axes in through `@cueplusplus/theme-base/base.css`.
+  - **Gone from `@cueplusplus/tokens`:** the `themes/*.css` and
+    `registry/theme-*.json` subpaths, and the `THEMES`, `ThemeName`,
+    `THEME_SUPPORTS_LIGHT` and `DEFAULT_THEME` exports. `ThemeName` now comes from
+    `@cueplusplus/theme-base` (re-exported by `@cueplusplus/ui`) and widens with
+    each theme package installed, rather than naming the ten that happened to be
+    compiled in; whether a theme ships a light block is `supportsLight` on its own
+    `manifest.json`; and there is no default palette to name, because the library
+    contains none.
+  - **`@cueplusplus/tokens`' root entry is now `dist/tokens.js`**, with
+    `dist/tokens.d.ts` beside it, where it used to be the TypeScript source
+    `dist/tokens.ts`. The import specifier, the exported names and their values
+    are unchanged — `import { DENSITIES } from "@cueplusplus/tokens"` is the same
+    line it was — but the file behind it is one Node can execute. It could not
+    before: Node refuses to strip types for anything under `node_modules`, so the
+    package worked in a workspace and failed from a registry install, taking
+    `@cueplusplus/theme-base` and the `cue-theme` CLI with it. If you added
+    `@cueplusplus/tokens` to your bundler's transpile list to work around that
+    (Next.js' `transpilePackages`, or the equivalent), take it out.
+  - **`@cueplusplus/tokens` gains `base.json`'s `fonts.handshake`**: the three
+    literals of the monospace resolution (`font-pairing-mono`, `font-theme-mono`,
+    and the `var()` that resolves them), published as data so a theme built
+    anywhere spells them the same way this build does.
+  - **`@cueplusplus/ui`'s `THEME_NAME_PATTERN` and `RESOLVED_MONO` are now
+    re-exports** of `@cueplusplus/theme-base`'s. Same names, same values, one
+    definition instead of three.
+  - **`/r/tokens.json`'s `themes` are objects**, not strings:
+    `{ name, package, supportsLight, densities }`. A consumer reading the registry
+    for a theme list wants to know which package delivers it.
+  - **Every published tarball now carries a `README.md`.** On a registry the
+    package page _is_ the README, and `tokens`, `ui` and `brand-tokens` shipped
+    without one; `packages/release/test/publishable-packages.test.mjs` holds all
+    fifteen to it now, beside the same check for `CHANGELOG.md`.
+  - **`@cueplusplus/ui` depends on `@cueplusplus/theme-base@^1`**, a range rather
+    than a pin, deliberately: two copies of `theme-base` in one tree would break
+    the type registry, because a theme's `declare module` augments one copy while
+    `ui`'s re-exported `ThemeName` resolves against the other, and neither errors.
+
+## 0.8.0
+
+## 0.7.0
+
+## 0.6.0
+
+## 0.5.0
+
+## 0.4.0
+
+## 0.3.0
+
+### Minor Changes
+
+- 31e3607: Ship the linked RequestPort preset release across tokens, UI, and brand tokens.
+
+  The release adds the typed RequestPort preset and its generated dark, light, and
+  system selectors; system SSR, prepaint, provider, and portal behavior; the
+  `persistPreferences={false}` and authoritative prepaint options contracts; the
+  typed `fontFamilies` provider/portal override; the deterministic package
+  manifest and companion checksums; and the accessible `TableScrollRegion`.
+
+  All three linked tarballs receive the same minor version and changelog entry.
+  The Version Packages path regenerates the package manifest after applying those
+  versions and rejects stale or nondeterministic output before publication.
+
+## 0.2.0
+
+### Patch Changes
+
+- 6ce0c7d: The release notes now ship inside the package.
+
+  `files` was `dist` alone, so the `CHANGELOG.md` this repository writes on every
+  release stayed in a private git repository and reached nobody: `npm pack` left it
+  out, and the tarball a consumer installs from GitHub Packages carried the code
+  with no record of what had changed in it. Anyone asking "what moved between the
+  version I have and the version I am upgrading to" had to have access to the
+  source repository to find out.
+
+  `CHANGELOG.md` is now on the `files` allowlist of all three published packages,
+  so it lands in `node_modules/@cueplusplus/<package>/CHANGELOG.md` beside the code
+  it describes. `packages/release` has the test that keeps it there.
+
+  No code changes and no API changes — the same `dist`, plus one file.
+
+  The same notes are published, alongside the CUE++ agent skills' own, at
+  <https://skills.cueplusplus.com/releases>.
+
+## 0.1.0
+
+### Minor Changes
+
+- First release of the CUE++ design system.
+
+  `@cueplusplus/tokens` ships eight theme presets (`cue`, `terminal`, `signal`, `venu`, `hivehub`,
+  `dusk`, `luma`, `snuffle`) in dark and light, three density levels (`ultra-compact`, `normal`,
+  `large`), and the Tailwind v4 `@theme inline` mapping — colour scoped to `[data-theme]`, geometry to
+  `[data-density]`, never mixed.
+
+  `@cueplusplus/ui` ships 146 components on Base UI: the core entry plus the `/layout`, `/forms`,
+  `/overlays`, `/chrome`, `/instruments`, `/chat`, `/theming`, `/configurator`, `/color`, `/date`
+  subpaths and the four opt-in ones (`/charts`, `/dmx`, `/midi`, `/flow`) whose heavy dependencies stay
+  optional peers. `ThemeProvider`, the density islands, `createTheme()` with its contrast report and the
+  floating `ThemeConfigurator` come with it.
+
+  `@cueplusplus/brand-tokens` ships the CUE++ brand layer — the white-alpha ramp, the mono stack, the
+  eyebrow and motion treatments, and the wordmark and Plussie marks.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 CUE++ contributors
+
+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,76 @@
+# @cueplusplus/brand-tokens
+
+The CUE++ brand itself, transcribed out of the marketing site and dated, for whoever is building a
+CUE++-branded surface rather than a product screen: the white-alpha ramp, the monochrome ground,
+the JetBrains Mono stack, the `//` eyebrow motif, the motion keyframes and the four brand marks.
+
+This is **not** a product dependency and it is not a theme. `@cueplusplus/theme-cue` is the
+product translation of this brand; this package is the brand as it was found, kept so that the
+translation can be argued with. It is a seed for the (currently empty) brand repository.
+
+## Install
+
+The `@cueplusplus` scope is served by **GitHub Packages**, not npmjs.com, and GitHub Packages
+authenticates *every* install. That is two settings, in two places, and the split is not
+cosmetic — pnpm ignores an env-expanded credential in a project `.npmrc` and the install fails
+with `401`.
+
+Commit the scope routing, and nothing else, at the root of your project:
+
+```ini
+# .npmrc
+@cueplusplus:registry=https://npm.pkg.github.com
+```
+
+Then write the credential once, at the **user** level, where pnpm reads it from. It is a
+**classic** personal access token with `read:packages` — GitHub Packages accepts neither
+fine-grained PATs nor OIDC:
+
+```sh
+pnpm config set //npm.pkg.github.com/:_authToken ghp_…
+```
+
+```sh
+pnpm add @cueplusplus/brand-tokens
+```
+
+No peers and no dependencies.
+
+CI, Vercel and the token's expiry are in
+[`docs/CONSUMING.md` §1](https://github.com/cueplusplus/cue-ui/blob/main/docs/CONSUMING.md#1-registry-access).
+
+## Quick start
+
+The stylesheet is the source of truth and the only thing that emits CSS; the module gives you the
+*names*. Import both — nothing here resolves without the sheet, and the sheet paints nothing by
+itself until you use one of its custom properties or opt-in classes.
+
+```ts
+import "@cueplusplus/brand-tokens/brand.css";
+import { BRAND_ASSETS, BRAND_WHITE_ALPHA_RAMP } from "@cueplusplus/brand-tokens";
+
+const hairline = `1px solid var(${BRAND_WHITE_ALPHA_RAMP[1]})`; // --brand-white-a10
+const wordmark = BRAND_ASSETS.wordmark; // the white-ink mark, for a dark ground
+```
+
+A repo test asserts both directions of that correspondence, so a token added to the sheet and
+forgotten in the index — or the reverse — fails the build rather than a consumer's `var()`.
+
+## What it ships
+
+| subpath | what it is |
+| --- | --- |
+| `@cueplusplus/brand-tokens` | the typed index: `BRAND_STYLESHEET`, `BRAND_WHITE_ALPHA_RAMP`, `BRAND_TOKENS`, `BRAND_CLASSES`, `BRAND_ASSETS`, and a type per set |
+| `./brand.css` | the stylesheet: every `--brand-*` custom property, the keyframes, and seven opt-in utility classes |
+| `./assets/*` | the four marks as SVG — `cueplusplus-wordmark.svg`, `cueplusplus-wordmark-dark.svg`, `plussie.svg`, `plussie-dark.svg` |
+
+`BRAND_ASSETS` names each mark by its import specifier, so the four rows above are reachable by
+key rather than by retyping a path. "Dark" names the **ink**, not the ground: the unsuffixed marks
+are drawn for a dark ground, the `-dark` marks for a light one.
+
+## Where the rest is
+
+- The reasoning, the provenance of every value and the date it was taken: [`BRAND.md`](./BRAND.md), which ships beside this file
+- Installing and using it from another project: [`docs/CONSUMING.md`](https://github.com/cueplusplus/cue-ui/blob/main/docs/CONSUMING.md)
+- The product translation of this brand: <https://ui.cueplusplus.com/docs/theming>
+- What changed in the version you have: `node_modules/@cueplusplus/brand-tokens/CHANGELOG.md`

package/assets/cueplusplus-wordmark-dark.svg

@@ -0,0 +1,6 @@
+<svg width="778" height="367" viewBox="0 0 778 367" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M778 183.5C778 284.844 698.492 367 600.413 367C502.335 367 422.826 284.844 422.826 183.5C422.826 82.1558 502.335 0 600.413 0C698.492 0 778 82.1558 778 183.5ZM478.899 236.4V197.004H440.773V170.343H478.899V130.947H504.701V170.343H542.827V197.004H504.701V236.4H478.899ZM588.834 197.004V236.4H614.636V197.004H652.762V170.343H614.636V130.947H588.834V170.343H550.707V197.004H588.834Z" fill="black"/>
+<path d="M136.396 160.524H103.981C103.389 156.289 102.18 152.529 100.354 149.241C98.5289 145.903 96.1853 143.064 93.3237 140.723C90.4621 138.382 87.1564 136.588 83.4067 135.343C79.7063 134.098 75.6852 133.475 71.3434 133.475C63.4986 133.475 56.6652 135.443 50.8433 139.378C45.0213 143.263 40.5069 148.942 37.2999 156.414C34.0929 163.836 32.4894 172.852 32.4894 183.463C32.4894 194.372 34.0929 203.537 37.2999 210.96C40.5562 218.382 45.0953 223.986 50.9173 227.772C56.7392 231.557 63.4739 233.45 71.1214 233.45C75.4138 233.45 79.3856 232.878 83.0366 231.732C86.737 230.586 90.018 228.917 92.8796 226.726C95.7413 224.484 98.1095 221.769 99.9844 218.581C101.909 215.393 103.241 211.757 103.981 207.672L136.396 207.821C135.557 214.845 133.461 221.62 130.106 228.145C126.8 234.621 122.335 240.424 116.71 245.555C111.135 250.636 104.474 254.671 96.7281 257.66C89.0312 260.599 80.323 262.068 70.6033 262.068C57.0846 262.068 44.9967 258.98 34.3396 252.803C23.7318 246.626 15.3443 237.685 9.17695 225.978C3.05898 214.272 0 200.1 0 183.463C0 166.775 3.10832 152.578 9.32497 140.872C15.5416 129.166 23.9785 120.25 34.6356 114.122C45.2927 107.946 57.2819 104.857 70.6033 104.857C79.3856 104.857 87.5264 106.103 95.0259 108.593C102.575 111.084 109.26 114.72 115.082 119.502C120.904 124.235 125.64 130.038 129.291 136.912C132.992 143.786 135.36 151.657 136.396 160.524Z" fill="black"/>
+<path d="M249.036 106.949H281.081V206.327C281.081 217.485 278.441 227.249 273.162 235.617C267.932 243.986 260.605 250.511 251.182 255.194C241.758 259.827 230.78 262.143 218.248 262.143C205.667 262.143 194.665 259.827 185.241 255.194C175.817 250.511 168.491 243.986 163.261 235.617C158.031 227.249 155.416 217.485 155.416 206.327V106.949H187.461V203.562C187.461 209.391 188.719 214.571 191.236 219.104C193.801 223.637 197.403 227.199 202.041 229.789C206.679 232.379 212.081 233.675 218.248 233.675C224.465 233.675 229.868 232.379 234.456 229.789C239.094 227.199 242.671 223.637 245.187 219.104C247.753 214.571 249.036 209.391 249.036 203.562V106.949Z" fill="black"/>
+<path d="M303.486 259.976V106.949H405.617V133.624H335.532V170.088H400.362V196.763H335.532V233.301H405.913V259.976H303.486Z" fill="black"/>
+</svg>

package/assets/cueplusplus-wordmark.svg

@@ -0,0 +1,6 @@
+<svg width="778" height="367" viewBox="0 0 778 367" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M778 183.5C778 284.844 698.492 367 600.413 367C502.335 367 422.826 284.844 422.826 183.5C422.826 82.1558 502.335 0 600.413 0C698.492 0 778 82.1558 778 183.5ZM478.899 236.4V197.004H440.773V170.343H478.899V130.947H504.701V170.343H542.828V197.004H504.701V236.4H478.899ZM588.834 197.004V236.4H614.636V197.004H652.762V170.343H614.636V130.947H588.834V170.343H550.707V197.004H588.834Z" fill="white"/>
+<path d="M136.396 160.524H103.981C103.389 156.289 102.18 152.529 100.354 149.241C98.5289 145.903 96.1853 143.064 93.3237 140.723C90.4621 138.382 87.1564 136.588 83.4067 135.343C79.7063 134.098 75.6852 133.475 71.3434 133.475C63.4986 133.475 56.6652 135.443 50.8433 139.378C45.0213 143.263 40.5069 148.942 37.2999 156.414C34.0929 163.836 32.4894 172.852 32.4894 183.463C32.4894 194.372 34.0929 203.537 37.2999 210.96C40.5562 218.382 45.0953 223.986 50.9173 227.772C56.7392 231.557 63.4739 233.45 71.1214 233.45C75.4138 233.45 79.3856 232.877 83.0366 231.732C86.737 230.586 90.018 228.917 92.8796 226.726C95.7413 224.484 98.1095 221.769 99.9844 218.581C101.909 215.393 103.241 211.757 103.981 207.672L136.396 207.821C135.557 214.845 133.461 221.62 130.106 228.145C126.8 234.621 122.335 240.424 116.71 245.555C111.135 250.636 104.474 254.671 96.7281 257.66C89.0312 260.599 80.323 262.068 70.6033 262.068C57.0846 262.068 44.9967 258.98 34.3396 252.803C23.7318 246.626 15.3443 237.684 9.17695 225.978C3.05898 214.272 0 200.1 0 183.463C0 166.775 3.10832 152.578 9.32497 140.872C15.5416 129.166 23.9785 120.249 34.6356 114.122C45.2927 107.946 57.2819 104.857 70.6033 104.857C79.3856 104.857 87.5264 106.102 95.0259 108.593C102.575 111.084 109.26 114.72 115.082 119.502C120.904 124.235 125.64 130.038 129.291 136.912C132.992 143.786 135.36 151.657 136.396 160.524Z" fill="white"/>
+<path d="M249.036 106.949H281.081V206.327C281.081 217.485 278.441 227.249 273.162 235.617C267.932 243.986 260.605 250.511 251.182 255.194C241.758 259.826 230.78 262.143 218.248 262.143C205.667 262.143 194.665 259.826 185.241 255.194C175.817 250.511 168.491 243.986 163.261 235.617C158.031 227.249 155.416 217.485 155.416 206.327V106.949H187.461V203.562C187.461 209.39 188.719 214.571 191.236 219.104C193.801 223.637 197.403 227.199 202.041 229.789C206.679 232.379 212.081 233.674 218.248 233.674C224.465 233.674 229.868 232.379 234.456 229.789C239.094 227.199 242.671 223.637 245.187 219.104C247.753 214.571 249.036 209.39 249.036 203.562V106.949Z" fill="white"/>
+<path d="M303.486 259.976V106.949H405.617V133.624H335.532V170.088H400.362V196.763H335.532V233.301H405.913V259.976H303.486Z" fill="white"/>
+</svg>

package/assets/plussie-dark.svg

@@ -0,0 +1,5 @@
+<svg width="367" height="367" viewBox="0 0 367 367" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="183.5" cy="183.5" r="183.5" fill="black"/>
+<path d="M57.9395 236.4V130.947H84.6006V236.4H57.9395ZM18.5436 197.004V170.343H123.997V197.004H18.5436Z" fill="white"/>
+<path d="M171.535 236.4V130.947H198.196V236.4H171.535ZM132.139 197.004V170.343H237.592V197.004H132.139Z" fill="white"/>
+</svg>

package/assets/plussie.svg

@@ -0,0 +1,5 @@
+<svg width="367" height="367" viewBox="0 0 367 367" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="183.5" cy="183.5" r="183.5" fill="white"/>
+<path d="M57.9395 236.4V130.947H84.6006V236.4H57.9395ZM18.5436 197.004V170.343H123.997V197.004H18.5436Z" fill="#1E1E1E"/>
+<path d="M171.535 236.4V130.947H198.196V236.4H171.535ZM132.139 197.004V170.343H237.592V197.004H132.139Z" fill="#1E1E1E"/>
+</svg>

package/dist/index.d.mts

@@ -0,0 +1,80 @@
+//#region src/index.d.ts
+/**
+ * @cueplusplus/brand-tokens — the typed index of `brand.css`.
+ *
+ * The stylesheet is the source of truth; nothing here emits CSS. What this
+ * module gives a consumer is the *names*: the custom properties it can read
+ * with `var()` or `getComputedStyle`, and the import specifiers for the four
+ * brand marks. A repo test asserts both directions of the correspondence, so a
+ * token added to one file and forgotten in the other fails the build.
+ *
+ * ```ts
+ * import "@cueplusplus/brand-tokens/brand.css";
+ * import { BRAND_ASSETS, BRAND_WHITE_ALPHA_RAMP } from "@cueplusplus/brand-tokens";
+ * ```
+ */
+/** The stylesheet a consumer must import for any of these names to resolve. */
+declare const BRAND_STYLESHEET = "@cueplusplus/brand-tokens/brand.css";
+/**
+ * The white-alpha ink ladder, darkest to brightest.
+ *
+ * White at an opacity over the brand's black ground — the brand has no greys.
+ * `a10` is the hairline border, `a40` the default secondary ink, `a90` the
+ * brightest step short of pure white.
+ */
+declare const BRAND_WHITE_ALPHA_RAMP: readonly ["--brand-white-a05", "--brand-white-a10", "--brand-white-a15", "--brand-white-a20", "--brand-white-a25", "--brand-white-a30", "--brand-white-a35", "--brand-white-a40", "--brand-white-a45", "--brand-white-a50", "--brand-white-a55", "--brand-white-a60", "--brand-white-a70", "--brand-white-a80", "--brand-white-a90"];
+/** One step of the white-alpha ramp. */
+type BrandWhiteAlpha = (typeof BRAND_WHITE_ALPHA_RAMP)[number];
+/**
+ * Every custom property `brand.css` declares, grouped the way the sheet is.
+ *
+ * Grouped rather than flat because the groups are the contract: a brand surface
+ * takes the ramp wholesale, but picks one eyebrow treatment and one motion
+ * shorthand.
+ */
+declare const BRAND_TOKENS: {
+  /** Pure monochrome. The near-black product ramp belongs to the `cue` theme. */
+  readonly ground: readonly ["--brand-black", "--brand-white"];
+  /** The ink ladder — see {@link BRAND_WHITE_ALPHA_RAMP}. */
+  readonly whiteAlpha: readonly ["--brand-white-a05", "--brand-white-a10", "--brand-white-a15", "--brand-white-a20", "--brand-white-a25", "--brand-white-a30", "--brand-white-a35", "--brand-white-a40", "--brand-white-a45", "--brand-white-a50", "--brand-white-a55", "--brand-white-a60", "--brand-white-a70", "--brand-white-a80", "--brand-white-a90"];
+  /** One voice: `--brand-font-sans` is an alias of the mono stack, not a second face. */
+  readonly type: readonly ["--brand-font-mono", "--brand-font-sans"];
+  /** The `// SECTION` micro-label. The accent is editorial and never a status colour. */
+  readonly eyebrow: readonly ["--brand-eyebrow-size", "--brand-eyebrow-tracking", "--brand-eyebrow-transform", "--brand-eyebrow-prefix", "--brand-eyebrow-accent"];
+  /** `animation` shorthands for the `float` / `slide-up` / `nudge-x` keyframes. */
+  readonly motion: readonly ["--brand-motion-float", "--brand-motion-slide-up", "--brand-motion-nudge-x"];
+  /** Consumed by `.brand-scrollbar`; usable directly on a custom rail. */
+  readonly scrollbar: readonly ["--brand-scrollbar-size", "--brand-scrollbar-radius", "--brand-scrollbar-track", "--brand-scrollbar-thumb", "--brand-scrollbar-thumb-hover"];
+  /** Consumed by `.brand-selection`. */
+  readonly selection: readonly ["--brand-selection-bg", "--brand-selection-fg"];
+  /** Values that belong to the marks themselves rather than to a surface. */
+  readonly marks: readonly ["--brand-plussie-ink"];
+};
+/** Any custom property this package declares. */
+type BrandToken = (typeof BRAND_TOKENS)[keyof typeof BRAND_TOKENS][number];
+/** The utility classes `brand.css` ships. All opt-in; the sheet paints nothing by itself. */
+declare const BRAND_CLASSES: readonly ["brand-eyebrow", "brand-animate-float", "brand-animate-slide-up", "brand-animate-nudge-x", "brand-scrollbar", "brand-scrollbar-hide", "brand-selection"];
+/** A utility class from {@link BRAND_CLASSES}. */
+type BrandClass = (typeof BRAND_CLASSES)[number];
+/**
+ * The four brand marks, as import specifiers.
+ *
+ * Naming follows the source visual pack, where "dark" names the *ink*, not the
+ * ground: the unsuffixed marks are drawn for a dark ground (white wordmark,
+ * white Plussie disc), the `-dark` marks for a light one (black wordmark, black
+ * Plussie disc). Pick by the surface the mark sits on, not by the app's mode.
+ */
+declare const BRAND_ASSETS: {
+  /** CUE++ wordmark, white ink — for a dark ground. */
+  readonly wordmark: "@cueplusplus/brand-tokens/assets/cueplusplus-wordmark.svg";
+  /** CUE++ wordmark, black ink — for a light ground. */
+  readonly wordmarkDark: "@cueplusplus/brand-tokens/assets/cueplusplus-wordmark-dark.svg";
+  /** Plussie badge, white disc with `--brand-plussie-ink` glyph — for a dark ground. */
+  readonly plussie: "@cueplusplus/brand-tokens/assets/plussie.svg";
+  /** Plussie badge, black disc with a white glyph — for a light ground. */
+  readonly plussieDark: "@cueplusplus/brand-tokens/assets/plussie-dark.svg";
+};
+/** A key of {@link BRAND_ASSETS}. */
+type BrandAsset = keyof typeof BRAND_ASSETS;
+//#endregion
+export { BRAND_ASSETS, BRAND_CLASSES, BRAND_STYLESHEET, BRAND_TOKENS, BRAND_WHITE_ALPHA_RAMP, BrandAsset, BrandClass, BrandToken, BrandWhiteAlpha };

package/dist/index.mjs

@@ -0,0 +1,112 @@
+//#region src/index.ts
+/**
+* @cueplusplus/brand-tokens — the typed index of `brand.css`.
+*
+* The stylesheet is the source of truth; nothing here emits CSS. What this
+* module gives a consumer is the *names*: the custom properties it can read
+* with `var()` or `getComputedStyle`, and the import specifiers for the four
+* brand marks. A repo test asserts both directions of the correspondence, so a
+* token added to one file and forgotten in the other fails the build.
+*
+* ```ts
+* import "@cueplusplus/brand-tokens/brand.css";
+* import { BRAND_ASSETS, BRAND_WHITE_ALPHA_RAMP } from "@cueplusplus/brand-tokens";
+* ```
+*/
+/** The stylesheet a consumer must import for any of these names to resolve. */
+const BRAND_STYLESHEET = "@cueplusplus/brand-tokens/brand.css";
+/**
+* The white-alpha ink ladder, darkest to brightest.
+*
+* White at an opacity over the brand's black ground — the brand has no greys.
+* `a10` is the hairline border, `a40` the default secondary ink, `a90` the
+* brightest step short of pure white.
+*/
+const BRAND_WHITE_ALPHA_RAMP = [
+	"--brand-white-a05",
+	"--brand-white-a10",
+	"--brand-white-a15",
+	"--brand-white-a20",
+	"--brand-white-a25",
+	"--brand-white-a30",
+	"--brand-white-a35",
+	"--brand-white-a40",
+	"--brand-white-a45",
+	"--brand-white-a50",
+	"--brand-white-a55",
+	"--brand-white-a60",
+	"--brand-white-a70",
+	"--brand-white-a80",
+	"--brand-white-a90"
+];
+/**
+* Every custom property `brand.css` declares, grouped the way the sheet is.
+*
+* Grouped rather than flat because the groups are the contract: a brand surface
+* takes the ramp wholesale, but picks one eyebrow treatment and one motion
+* shorthand.
+*/
+const BRAND_TOKENS = {
+	/** Pure monochrome. The near-black product ramp belongs to the `cue` theme. */
+	ground: ["--brand-black", "--brand-white"],
+	/** The ink ladder — see {@link BRAND_WHITE_ALPHA_RAMP}. */
+	whiteAlpha: BRAND_WHITE_ALPHA_RAMP,
+	/** One voice: `--brand-font-sans` is an alias of the mono stack, not a second face. */
+	type: ["--brand-font-mono", "--brand-font-sans"],
+	/** The `// SECTION` micro-label. The accent is editorial and never a status colour. */
+	eyebrow: [
+		"--brand-eyebrow-size",
+		"--brand-eyebrow-tracking",
+		"--brand-eyebrow-transform",
+		"--brand-eyebrow-prefix",
+		"--brand-eyebrow-accent"
+	],
+	/** `animation` shorthands for the `float` / `slide-up` / `nudge-x` keyframes. */
+	motion: [
+		"--brand-motion-float",
+		"--brand-motion-slide-up",
+		"--brand-motion-nudge-x"
+	],
+	/** Consumed by `.brand-scrollbar`; usable directly on a custom rail. */
+	scrollbar: [
+		"--brand-scrollbar-size",
+		"--brand-scrollbar-radius",
+		"--brand-scrollbar-track",
+		"--brand-scrollbar-thumb",
+		"--brand-scrollbar-thumb-hover"
+	],
+	/** Consumed by `.brand-selection`. */
+	selection: ["--brand-selection-bg", "--brand-selection-fg"],
+	/** Values that belong to the marks themselves rather than to a surface. */
+	marks: ["--brand-plussie-ink"]
+};
+/** The utility classes `brand.css` ships. All opt-in; the sheet paints nothing by itself. */
+const BRAND_CLASSES = [
+	"brand-eyebrow",
+	"brand-animate-float",
+	"brand-animate-slide-up",
+	"brand-animate-nudge-x",
+	"brand-scrollbar",
+	"brand-scrollbar-hide",
+	"brand-selection"
+];
+/**
+* The four brand marks, as import specifiers.
+*
+* Naming follows the source visual pack, where "dark" names the *ink*, not the
+* ground: the unsuffixed marks are drawn for a dark ground (white wordmark,
+* white Plussie disc), the `-dark` marks for a light one (black wordmark, black
+* Plussie disc). Pick by the surface the mark sits on, not by the app's mode.
+*/
+const BRAND_ASSETS = {
+	/** CUE++ wordmark, white ink — for a dark ground. */
+	wordmark: "@cueplusplus/brand-tokens/assets/cueplusplus-wordmark.svg",
+	/** CUE++ wordmark, black ink — for a light ground. */
+	wordmarkDark: "@cueplusplus/brand-tokens/assets/cueplusplus-wordmark-dark.svg",
+	/** Plussie badge, white disc with `--brand-plussie-ink` glyph — for a dark ground. */
+	plussie: "@cueplusplus/brand-tokens/assets/plussie.svg",
+	/** Plussie badge, black disc with a white glyph — for a light ground. */
+	plussieDark: "@cueplusplus/brand-tokens/assets/plussie-dark.svg"
+};
+//#endregion
+export { BRAND_ASSETS, BRAND_CLASSES, BRAND_STYLESHEET, BRAND_TOKENS, BRAND_WHITE_ALPHA_RAMP };

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@cueplusplus/brand-tokens",
+  "version": "0.13.0",
+  "description": "CUE++ brand primitives extracted from the marketing site: the white-alpha ramp, the monochrome ground, the JetBrains Mono stack, the // eyebrow motif, the motion keyframes and the four brand marks.",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cueplusplus/cue-ui",
+    "directory": "packages/brand-tokens"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    },
+    "./brand.css": "./src/brand.css",
+    "./assets/*": "./assets/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src/brand.css",
+    "assets",
+    "BRAND.md",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "devDependencies": {
+    "eslint": "^9.17.0",
+    "publint": "^0.3.23",
+    "tsdown": "0.22.14",
+    "@repo/typescript-config": "0.0.0",
+    "@repo/eslint-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "check:publish": "publint",
+    "lint": "eslint . --max-warnings 0",
+    "test": "node --test \"test/*.test.mjs\""
+  }
+}

package/src/brand.css

@@ -0,0 +1,233 @@
+/**
+ * @cueplusplus/brand-tokens — the CUE++ brand, transcribed.
+ *
+ * Every value below was read out of the marketing site (cue++/site) rather than
+ * designed here; BRAND.md records the exact source file for each group and the
+ * date it was read. This sheet is a *seed*: it declares the brand's primitives
+ * and offers opt-in utilities, and it deliberately paints nothing. Importing it
+ * must never change how an app already looks.
+ *
+ *   @import "@cueplusplus/brand-tokens/brand.css";
+ *
+ * Product surfaces do not consume this file — they consume the `cue` theme in
+ * @cueplusplus/tokens, which is where these primitives were already translated
+ * into the semantic contract (near-black ramp instead of pure #000, and so on).
+ * This package exists for brand surfaces: marketing pages, decks, the marks.
+ */
+
+:root {
+  /* --- Ground ------------------------------------------------------------
+   * The marketing brand is pure monochrome. The near-black product ramp
+   * (#0a0a0a and up) belongs to the `cue` theme, not to the brand.
+   */
+  --brand-black: #000000;
+  --brand-white: #ffffff;
+
+  /* --- White-alpha ramp --------------------------------------------------
+   * The brand's entire ink ladder: white at an opacity, over black. The site
+   * reaches for ~19 distinct alphas; this is that usage regularised onto
+   * 5-point steps to 60, then decades. a10 is the hairline border, a40 the
+   * default secondary ink, a90 the brightest non-white text.
+   */
+  --brand-white-a05: rgba(255, 255, 255, 0.05);
+  --brand-white-a10: rgba(255, 255, 255, 0.10);
+  --brand-white-a15: rgba(255, 255, 255, 0.15);
+  --brand-white-a20: rgba(255, 255, 255, 0.20);
+  --brand-white-a25: rgba(255, 255, 255, 0.25);
+  --brand-white-a30: rgba(255, 255, 255, 0.30);
+  --brand-white-a35: rgba(255, 255, 255, 0.35);
+  --brand-white-a40: rgba(255, 255, 255, 0.40);
+  --brand-white-a45: rgba(255, 255, 255, 0.45);
+  --brand-white-a50: rgba(255, 255, 255, 0.50);
+  --brand-white-a55: rgba(255, 255, 255, 0.55);
+  --brand-white-a60: rgba(255, 255, 255, 0.60);
+  --brand-white-a70: rgba(255, 255, 255, 0.70);
+  --brand-white-a80: rgba(255, 255, 255, 0.80);
+  --brand-white-a90: rgba(255, 255, 255, 0.90);
+
+  /* --- Type --------------------------------------------------------------
+   * One voice: the site's Tailwind config points `sans` and `mono` at the same
+   * JetBrains Mono stack, so a consumer reaching for a sans gets the brand.
+   */
+  --brand-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --brand-font-sans: var(--brand-font-mono);
+
+  /* --- Eyebrow -----------------------------------------------------------
+   * The section-label motif: a 10px uppercase micro-label at 0.3em tracking,
+   * prefixed with a literal `// ` — the brand's one piece of ornament, read as
+   * a code comment. The accent is Tailwind violet-400 as the site uses it and
+   * is EDITORIAL ONLY: it must never become a semantic status colour (spec §3).
+   */
+  --brand-eyebrow-size: 10px;
+  --brand-eyebrow-tracking: 0.3em;
+  --brand-eyebrow-transform: uppercase;
+  --brand-eyebrow-prefix: "// ";
+  --brand-eyebrow-accent: #a78bfa;
+
+  /* --- Motion ------------------------------------------------------------
+   * Three `animation` shorthands, timings included, matching the keyframes
+   * below. Tokenised so a consumer can restyle the duration without forking
+   * the utility class.
+   */
+  --brand-motion-float: float 2.4s ease-in-out infinite;
+  --brand-motion-slide-up: slide-up 0.3s ease-out forwards;
+  --brand-motion-nudge-x: nudge-x 1.4s ease-in-out infinite;
+
+  /* --- Scrollbar ---------------------------------------------------------
+   * A 6px rail with no track and a white-alpha thumb that brightens on hover.
+   */
+  --brand-scrollbar-size: 6px;
+  --brand-scrollbar-radius: 3px;
+  --brand-scrollbar-track: transparent;
+  --brand-scrollbar-thumb: var(--brand-white-a10);
+  --brand-scrollbar-thumb-hover: var(--brand-white-a20);
+
+  /* --- Selection --------------------------------------------------------- */
+  --brand-selection-bg: var(--brand-white-a20);
+  --brand-selection-fg: var(--brand-white);
+
+  /* --- Marks -------------------------------------------------------------
+   * The one non-monochrome value in the identity: the "++" glyph inside the
+   * light Plussie badge is #1E1E1E, not #000 — it keeps the badge from reading
+   * as a hole punched in the page.
+   */
+  --brand-plussie-ink: #1E1E1E;
+}
+
+/* --- Eyebrow utility -----------------------------------------------------
+ * `<p class="brand-eyebrow">Work with us</p>` renders `// WORK WITH US`.
+ * The prefix lives in ::before so the motif never reaches the accessibility
+ * tree or a copy-paste.
+ */
+.brand-eyebrow {
+  font-family: var(--brand-font-mono);
+  font-size: var(--brand-eyebrow-size);
+  letter-spacing: var(--brand-eyebrow-tracking);
+  text-transform: var(--brand-eyebrow-transform);
+  color: var(--brand-eyebrow-accent);
+}
+
+.brand-eyebrow::before {
+  content: var(--brand-eyebrow-prefix);
+}
+
+/* --- Motion --------------------------------------------------------------
+ * Keyframes transcribed frame for frame. The names stay unprefixed because an
+ * `animation` shorthand quotes a keyframe name literally and the brand's
+ * shorthands are part of the contract; a consumer that already owns a `float`
+ * animation should import this sheet before its own.
+ */
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+  50% {
+    transform: translateY(6px);
+    opacity: 0.7;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes nudge-x {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(3px);
+  }
+}
+
+.brand-animate-float {
+  animation: var(--brand-motion-float);
+}
+
+.brand-animate-slide-up {
+  animation: var(--brand-motion-slide-up);
+}
+
+.brand-animate-nudge-x {
+  animation: var(--brand-motion-nudge-x);
+}
+
+/* --- Scrollbar utilities -------------------------------------------------
+ * Opt-in, unlike the site: `.brand-scrollbar` on the scroll container, or
+ * `.brand-scrollbar-hide` to remove the rail entirely. A package that styled
+ * ::-webkit-scrollbar globally would repaint the chrome of any app that merely
+ * imported it.
+ */
+.brand-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--brand-scrollbar-thumb) var(--brand-scrollbar-track);
+}
+
+.brand-scrollbar::-webkit-scrollbar {
+  width: var(--brand-scrollbar-size);
+  height: var(--brand-scrollbar-size);
+}
+
+.brand-scrollbar::-webkit-scrollbar-track {
+  background: var(--brand-scrollbar-track);
+}
+
+.brand-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--brand-scrollbar-thumb);
+  border-radius: var(--brand-scrollbar-radius);
+}
+
+.brand-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--brand-scrollbar-thumb-hover);
+}
+
+.brand-scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.brand-scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* --- Selection -----------------------------------------------------------
+ * Opt-in for the same reason: scoped to a `.brand-selection` ancestor rather
+ * than declared on a bare ::selection.
+ */
+.brand-selection::selection,
+.brand-selection ::selection {
+  background-color: var(--brand-selection-bg);
+  color: var(--brand-selection-fg);
+}
+
+/* --- Reduced motion ------------------------------------------------------
+ * The site's clamp, kept whole: the brand's position is that a reader who asks
+ * for less motion gets it everywhere, not only from the three animations this
+ * sheet happens to ship. This is the one rule here that reaches outside the
+ * `.brand-*` namespace, and it is deliberate.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .brand-animate-float,
+  .brand-animate-slide-up,
+  .brand-animate-nudge-x {
+    animation: none;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}