Components

Your components
wear the brand.

The brand's tokens go into your component library and its Storybook. A release restyles them, and the sites built with them rebuild.

Start freeOpen our Storybook
Brand kit App
Brand / Kit / This week's accentOpen in Storybook

Live from storybook.artbucket.io: the app's components and @artbucket/ui, drawing our latest release from BrandHub.

One release

Change a rule.
Every button follows.

A rule becomes a token, the token styles the component, and the component ships in every site that uses it. Nobody copies a hex.

The rulecolor.primaryVolt #c6f432
The token--color-primarytokens.css, Tailwind, JSON
The componentButtonRelease
The sitesRebuiltartbucket.io, docs, Storybook

Built again on release

Release once.
Sites rebuild.

Give a site its deploy hook from Vercel, Netlify, Cloudflare Pages or your CI. Each release calls it, unless nothing the site reads changed.

{ "event": "brand.released", "brand": "acme",
  "release": 12, "note": "Bluer primary", "site": "acme-docs" }
  • acme-docsdeploy hook called
  • acme-storybookdeploy hook called
  • acme-careersskipped: nothing it uses changed since release 11

An example release of a made-up brand. Assets and tokens on live links follow without a build.

For developers

Your stack.
Your format.

The same tokens as CSS, Tailwind, SCSS, TypeScript, shadcn, MUI, Chakra, W3C JSON, or a DESIGN.md for coding agents. This is ours, fetched live.

/artbucket/artbucket/tokens?format=cssFrom BrandHub, no key: our brand is public
:root {
  --color-primary: #c6f432;
  --color-on-primary: #16152a;
  --color-ink: #16152a;
  --color-muted: #5e5d73;
  --color-background: #ffffff;
}

Draw the rules
in any framework.

@artbucket/ui draws a release's palette, type, logos and dos and don'ts, as HTML strings, web components or React. @artbucket/brand reads a release at build time and writes the manifest that says what a site uses. Both MIT.

npm install @artbucket/brand @artbucket/ui
npx artbucket brand export .brand --brand acme

<!-- reads .brand/brand.json -->
<ab-palette keys="color.*"></ab-palette>
<ab-type></ab-type>

Above: the kit's web components, drawing our latest release from BrandHub.

Ship components
that follow the brand.

Start from our kit, or point your own library at the brand's tokens. Free to start.

Start freeKeep the brand in Git