@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