Made by@brandkitBrand tokens export
@brandkit/brand-tokens-export
Turn the tokens in your brand.md into code: CSS variables, a Tailwind theme (v3 and v4), and a design-tokens.json for Figma token plugins. One source of truth, regenerated in a second whenever the brand changes.
- Activity
- New: be the first to try it
- Installs
- 0 installs
- Likes
- 0 likes
- Clones
- 0 clones
- 1# Brand tokens export
- 3Keep your brand colors, fonts, and spacing in one place, `brand.md`, and generate the code from it. One command writes CSS variables, a Tailwind theme, and a design-tokens.json for Figma.
- 5**Who it is for:** anyone with a brand guide and a website or app that keeps drifting off it. Designers who want Figma and code to match. Developers who are tired of copying hex codes.
- 7## Example
- 9You have this in `brand.md`:
- 11````markdown
- 12```yaml tokens
- 13color:
- 14 primary: "#1F7A5C"
- 15 accent: "#F2A541"
- 16font:
- 17 heading: [Fraunces, Georgia, serif]
- 18radius:
- 19 md: 10px
- 20```
- 21````
- 23Ask "export our brand tokens". Claude runs the script and writes `brand-tokens/`:
- 25```css
- 26:root {
- 27 --color-primary: #1F7A5C;
- 28 --color-accent: #F2A541;
- 29 --font-heading: Fraunces, Georgia, serif;
- 30 --radius-md: 10px;
- 31}
- 32```
- 34plus `theme.css` (Tailwind v4), `tailwind.theme.cjs` (Tailwind v3), and `design-tokens.json` (W3C format). Then it tells you the one line to add for your setup. Try it on `examples/brand.md`.
- 36## What it can access
- 38- Reads `brand.md` or `docs/brand.md`.
- 39- Writes only inside `brand-tokens/`.
- 40- Runs one script, `scripts/export-tokens.mjs` (Node, no dependencies). No network.
- 42## Setup
- 44None. Needs Node 18 or newer. Pairs well with `brand-guide-builder` (writes the tokens block) and `/brand` (uses it).