# Brand Kit Builder

> Enter your colors, fonts, and logo to get a shareable brand style sheet plus CSS variables, a Tailwind theme, and design tokens. No signup, no watermark.

Free brand kit builder. Enter your brand colors, pick heading and body fonts, drop your logo, and export a designed one-page brand style sheet as a PNG plus developer-ready tokens: CSS variables, a Tailwind theme, and W3C design tokens JSON. Every key color pairing is contrast-checked against WCAG AA and AAA. Runs entirely in your browser: no signup, no watermark.

## Command line (recommended for agents)

npx @brandstack/cli brand-kit [settings link] --name <brand> --primary <hex> --accent <hex> --bg <hex> --text <hex> [--extras hex,hex] [--heading <family>] [--body <family>] [--tokens css|tailwind|json|all] [--out <dir>] [--sheet brand-sheet.png] [--logo <file>] [--json]: offline; same tokens and the same sheet draw as the website.

The CLI runs the same engine as this page — same logic, same output contract — with no browser and no account. Browser automation below is the fallback.

## How to use it

1. Agents: run `npx @brandstack/cli brand-kit "<settings link>" --tokens all --out ./brand-kit` to write brand-kit.css, brand-kit.tailwind.css, and brand-kit.tokens.json. Add `--sheet brand-sheet.png` for the rendered sheet (CLI sheets render type in Inter; the browser export uses the real faces).
2. In the browser: name the brand, set the four role colors (primary, accent, background, text), add up to four extra palette colors, and pick heading and body fonts. The sheet preview redraws live.
3. Check the contrast panel: each key pairing (text on background, primary on background, accent on background, button label on primary) shows its WCAG ratio and grade.
4. Export with the buttons named "Download brand sheet (PNG)", "Copy CSS variables", "Copy Tailwind theme", and "Copy JSON tokens".
5. "Copy settings link" carries the whole kit in the URL (the CLI accepts that link directly); "Copy prompt for agent" hands the kit, the CLI command, and the output contract to Claude Code, Codex, or Cursor.

## URL parameters

The page reads these query parameters on load, so a link can carry a complete setup:

- `name`: Brand name shown on the sheet
- `tagline`: Tagline shown under the brand name
- `primary, accent, bg, text`: Role color hexes without the # (RRGGBB)
- `extras`: Up to 4 extra palette hexes, comma separated
- `heading, body`: Heading and body font family names from the curated list

## Output

A 1600x2200 brand style sheet PNG, plus tokens in three formats: CSS custom properties, a Tailwind v4 @theme block, and W3C design tokens JSON. Failing WCAG pairings are reported (stderr in the CLI, the contrast panel in the browser). The settings link reproduces the full kit; only the logo has to travel separately.

## Links

- Use the tool: https://www.brandstack.dev/tools/brand-kit
- All free tools: https://www.brandstack.dev/tools (markdown: https://www.brandstack.dev/tools.md)
- Agent index: https://www.brandstack.dev/llms.txt

Brand Kit Builder is a free tool by Brand Stack, the AI photo studio for
product marketing. No ads, no signup. Start free: https://www.brandstack.dev/sign-up