@boxofrules/assets

Every approved Box Of Rules asset, in one place, with a manifest that says what each one is and where it goes. Logos for Box Of Rules and each product, the fonts, the colour and type tokens, favicon sets, and every picture of every plugin at every shipped version. If you are putting a Box Of Rules logo or plugin image on a page, a listing, a README, a post or an email, it comes from here. Nothing is drawn, cropped, recoloured or "approximated": manifest.json names the file for the job.

The same files are served from https://cdn.boxofrules.com (see below), so you do not need npm to use them.

What is in it

marks/<product>/        logos: full, icon, logotype, card, as SVG + transparent PNG (1024 px long edge)
                        every PNG/JPG here and in products/ also has <name>.min.<ext> and <name>.webp beside it
products/plugins/<slug>/<version>/   that release's pictures, never changed once published
products/plugins/<slug>/latest/      a copy of the current release: the folder to link
products/music/<slug>/cover.jpg      a single or EP's cover art, one canonical square image
badges/<owner>/         third-party badges (iLok Enabled), each under its owner's terms: badges/LICENCE.md
fonts/                  Oswald (variable, 200 to 700), Barlow 400 to 700, Unbounded 700, as woff2, with their OFL texts
css/tokens.css          colours, type and per-product scopes as CSS custom properties
css/fonts.css           the @font-face rules for fonts/
tokens.json             the same tokens for scripts, og-card builders and docs
web/<product>/          favicon.ico/svg/png, apple-touch-icon, PWA icons, site.webmanifest, head.html
manifest.json           every mark and product image with its use, and each product's typography
index.js                tokens, manifest, mark(), product() and musicCover() resolvers, --check

Products and their folders: box-of-rules, accounts (the "My Box Of" account hub), plugins (plugins.boxofrules.com), box-of-synths, synth-directory, waveform-analyser.

Vocabulary, the same for every product: full = sign + wordmark, icon = the sign alone, logotype = the wordmark alone, card = the full logo padded to 5:3 for og and social. Colour is a suffix: full-blue.svg, icon-white.png.

Plugins shipped so far, each with its interface shot (ui.png), galleries, bundle icon, Anagram block, og card, home band and release post where they exist:

Slug	Plugin	Current	Page
box-of-bass	Box Of Bass	1.2.2	plugins.boxofrules.com/plugins/box-of-bass
picking-fingers	Picking Fingers	1.1.0	plugins.boxofrules.com/plugins/picking-fingers
focus	Focus	1.0.1	plugins.boxofrules.com/plugins/focus
br108	BR108	1.0.0	plugins.boxofrules.com/plugins/br108

Music — the Box Of Rules band's released singles, one canonical square cover each (products/music/<slug>/cover.jpg), slugs matching the releases table on boxofrules.com:

Slug	Release	Type
tax-wealth-not-work	Tax Wealth, Not Work	Single
real-fake-paradise	Real Fake Paradise (Elias Kopp ft. Box Of Rules)	Single
regrets-whats-next	Regrets (What's Next?)	Single
bulls-on-parade	Bulls On Parade	Single

The debut EP Drums. Vocals. Bass is not yet in the kit: it is still a draft release on the site with no artwork published.

The rules

1. Box Of Rules blue leads every public Box Of Rules visual. Amber is the accent. marks/box-of-rules/full-blue.svg is the default mark; white on ink or coal only when blue fails contrast; black for print.
2. One sign. Every product icon carries the Box Of Rules sign, the exact path from marks/box-of-rules/icon-*.svg, never a redraw. Products differ by colour and by what sits around the sign: plugins puts it on the amber waveform in violet; Box Of Synths in a ring of dots in moss green #5FD08A, never blue; Synth.Directory and Waveform Analyser have their own icons and use the Box Of Rules full logo in their headers.
3. Plugin pictures come from products/. Link latest/ unless you are documenting a specific release; then link that version's folder, which never changes. No screenshots of your own. On a web page use the .webp with the .min as fallback; the original is for print and press. Music covers follow the same rule: products/music/<slug>/cover.jpg, the canonical release artwork, never a crop, a recolour, or a screenshot of a streaming page.
4. Fonts: Oswald for headings, Barlow for everything else, on every site (Syne was tried on 19 Sep and dropped on 20 Sep). Two exceptions: plugins.boxofrules.com headings are Unbounded, and synth.directory is Barlow throughout. The manifest's typography section states each product's faces. Anton is retired.
5. Name and tagline: "Box Of Rules", capital O, always. Tagline "Digitally Analogue". No em dashes in public copy.
6. Favicons are generated, never drawn: web/<product>/ comes from the product's icon via tools/web-icons.py.
7. Masters live with James. This package is the distributable copy; a change to a master is a version bump here, never an edit in a site.

Using it

From the CDN

Every release is at https://cdn.boxofrules.com/v<version>/... (immutable, cached a year: use these in emails and anywhere a URL must never change) and https://cdn.boxofrules.com/latest/... (cached an hour). Paths are the repo's:

https://cdn.boxofrules.com/latest/marks/box-of-rules/full-blue.svg
https://cdn.boxofrules.com/latest/css/tokens.css
https://cdn.boxofrules.com/latest/manifest.json

Plugin pictures have their own stable home at the root of the CDN, versioned by the plugin, not by this package:

https://cdn.boxofrules.com/products/plugins/box-of-bass/latest/ui.png     the current release (cached an hour)
https://cdn.boxofrules.com/products/plugins/box-of-bass/1.2.2/ui.png      that release, never changes

That is the URL for a plugin image anywhere: our own sites, a listing, an email, a review.

CORS allows the Box Of Rules domains, so the fonts load cross-origin on our sites.

From npm

npm install @boxofrules/assets

import { tokens, manifest, mark, product } from '@boxofrules/assets';
mark('box-of-synths', 'full, green');          // absolute path of that SVG, or throws
product('box-of-bass', 'ui.png');              // the current release's interface shot
product('box-of-bass', 'og.jpg', '1.2.2');     // that release's og card
tokens.colours.blue;                           // "#69AFBF"

npx @boxofrules/assets --check confirms every file the manifest names exists. Maintainers: npm run images regenerates the .min and .webp siblings, npm run web-icons the favicon sets, npm run publish-cdn -- v1.2.0 pushes a version to the CDN.

• Box Of Rules sites pin the package in package.json, copy marks/, fonts/, css/ and web/<product>/ into public/ at build (npm run assets in each site), set <html data-brand="<product>"> and take colours and fonts from the tokens. Never a font file or a mark of their own.
• Emails, og cards, third-party pages, docs: link the CDN, versioned.
• Anywhere else: copy the exact file the manifest names.

For agents

Read manifest.json before touching any logo, image or font. mark(), product() and musicCover() throw rather than guess. If the manifest does not cover the surface, ask James rather than inventing.

Versioning

Semver, tagged v<version>. A patch is a file fixed, a minor is something added (a product, a plugin release, a form), a major is a rename or a removal. Every tag is published to the CDN by the publish-cdn workflow. CHANGELOG.md says what moved.

Adding a plugin release: copy the previous version folder to products/plugins/<slug>/<version>/, replace the pictures, update latest/ and the manifest's current, bump the minor.

Adding a music release: add products/music/<slug>/cover.jpg, run npm run images for its .min/.webp siblings, and add the slug to the manifest's products.music, bump the minor.

Licence

Marks, icons and plugin imagery: all rights reserved, usable unmodified to refer to Box Of Rules and its products. Third-party badges (badges/): their owners' terms, see badges/LICENCE.md. Fonts: OFL. Tokens, stylesheets and code: MIT. Detail in LICENSE.md.