@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 public on npm and resolves there by default, so there is nothing to configure and no credential to supply — it installs like any other package.

pnpm add @cueplusplus/brand-tokens

No peers and no dependencies.

CI, Vercel and the token's expiry are in docs/CONSUMING.md §1.

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.

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, which ships beside this file
• Installing and using it from another project: 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