@refactco/brand
v0.3.0
Published
The Brand Compiler — portable, executable brand system (DTCG tokens + Lit Web Components + Custom Elements Manifest + brand:check) for humans and AI coding agents.
Downloads
445
Readme
@refactco/brand — The Brand Compiler
A portable, executable brand system. One canonical source compiles into design tokens, framework-agnostic Web Components, and an agent-readable contract — consumed by humans (a visual Brand Lab) and AI coding agents alike. Drops into WordPress, Shopify, Next.js, and custom projects.
See the architecture & roadmap for the full plan.
What's inside
- Design tokens — hand-authored W3C DTCG →
tokens.css(Style Dictionary), with multiple themes. - Web Components — framework-agnostic Lit elements (
bk-button,bk-badge,bk-input,bk-card). - Custom Elements Manifest —
custom-elements.json, the machine-readable API for agents. brand:check— fails the build on any raw color outside the token source.
pnpm install
pnpm build # tokens.css + components + custom-elements.json
pnpm brand:check # enforcement
pnpm verify:render # headless render assertionUse it
<link rel="stylesheet" href="@refactco/brand/tokens.css" />
<script type="module" src="@refactco/brand/components/bk-button.js"></script>
<bk-button variant="primary">Get Started</bk-button>Themed entirely through --bk-* design tokens.
