Skip to main content
A site built anywhere (Next.js, Astro, Vite, plain HTML) stays on brand with two small packages. Both are MIT, unlike the AGPL core, so they go in client code with no copyleft obligation.

​
@artbucket/brand

Reads one release of a brand, as artbucket brand export wrote it, at build time and offline. It notes every rule and file the build asks for, and writes the manifest a deployment reads: the site’s lineage, its use check, and which releases rebuild it.
The manifest names the rules read (color.primary, or color.* for a group read whole), so a release that changes none of them calls no rebuild. all() and tokensCss() read every rule.

​
@artbucket/ui

Draws a brand’s rules with its own values: the palette (each color with the text the brand sets on it, its values for screen and print, and its contrast on white and black), the type specimen, the logos, dos and don’ts, the other rules and one rule’s value. A color’s values and the text set on it come from @artbucket/ui/swatch, the same functions a portal’s palette draws with, so a built site and a portal show the same numbers. As HTML strings, for any framework, on the server or in the browser:
As web components, reading a brand.json served beside its files:
<ab-type>, <ab-logos> and <ab-rules> work the same way; context picks a context’s values (dark-background). In React:
For a palette of your own design, the values without the markup:
colorValues gives hex, rgb, hsl, token, css (its custom property), cmyk (converted from the hex unless the rule’s spec states it, and marked so), pantone and ral, those the color has. swatchInk takes the color the rule’s spec pairs with it (pair), else black or white, whichever reads. @artbucket/ui/ui.css styles them; its colors follow the page unless --ab-line, --ab-tile, --ab-do and --ab-dont say otherwise.

​
Eject to code

artbucket site eject turns a brand’s pages, as readers see them in its release, into a guidelines site of its own, built with the kit:
Each page becomes src/pages/{page}.html (the home page index.html), in the brand’s order (src/pages/order.txt). Its sections keep their words, and the rules they show become the kit’s drawings ({{palette:color.primary}}, {{logos:logo.*}}), filled from the release at each build. The pictures they show are copied into src/public/assets. A section the kit has no drawing for yet (a chart, a diagram, a pattern) is kept as its words, with a note in the file. The pages in Artbucket stay as they are.