---
title: Brand Kit Builder
description: Free brand kit and style guide generator. Build a shareable brand sheet from your colors, fonts, and logo, and export CSS variables, a Tailwind theme, and design tokens.
---

The Brand Kit Builder is a free tool at [brandstack.dev/tools/brand-kit](https://brandstack.dev/tools/brand-kit). It turns the small set of decisions every brand asset reuses (colors, type, logo) into two deliverables at once: a designed one-page brand sheet you can hand to anyone, and design tokens your codebase can import directly. Everything runs in your browser; nothing is uploaded.

## Run it from the command line (recommended for agents)

```sh
npx @brandstack/cli brand-kit \
  --name Acme --primary 005EFF --accent FE894B --bg FFFFFF --text 0E0E10 \
  --heading "Space Grotesk" --body Inter \
  --tokens all --out ./brand-kit
```

Offline, no account. That writes three files into `./brand-kit`:

| File | Contents |
|------|----------|
| `brand-kit.css` | CSS custom properties on `:root` (`--brand-primary`, `--brand-font-heading`, ...) |
| `brand-kit.tailwind.css` | A Tailwind v4 `@theme` block (`--color-primary`, `--font-heading`, ...) |
| `brand-kit.tokens.json` | W3C design tokens (draft format), one `$type`/`$value` entry per color and font |

Add `--sheet brand-sheet.png` to also render the 1600x2200 brand sheet. CLI sheets draw type in Inter (the engine's bundled face); the browser export uses your chosen families. Failing WCAG pairings print to stderr either way, and `--json` emits the kit, all three token formats, and the full contrast report as one JSON document.

A **settings link is itself a valid command**. Configure the kit visually, click "Copy settings link", and pass the URL:

```sh
npx @brandstack/cli brand-kit "https://brandstack.dev/tools/brand-kit?name=Acme&primary=005eff&accent=fe894b&bg=ffffff&text=0e0e10&heading=Space+Grotesk&body=Inter" --tokens all --out ./brand-kit
```

## What goes into a kit

- **Four role colors**: primary, accent, background, and text. Roles are what make the tokens usable in code; a palette without roles is just a mood board.
- **Up to four extra colors** for charts, states, or illustration accents.
- **Heading and body typefaces**, chosen from a curated list of open Google Fonts, so the sheet names faces anyone can install and the tokens carry real font stacks.
- **Your logo** (optional). It renders on the sheet and never leaves your browser.

## The contrast check

Every kit shows WCAG 2.1 ratios for the four pairings that actually decide whether a brand is usable:

| Pairing | Why it matters |
|---------|----------------|
| Text on background | Body copy everywhere |
| Primary on background | Links and colored headings |
| Accent on background | Badges, highlights, callouts |
| Button label on primary | Your main CTA |

Each shows its ratio and grade (AA, AAA, AA large text only, or failing) before you ship it to a landing page. The button-label check automatically uses whichever of white or near-black reads better on your primary.

## The brand sheet

The exported PNG is a 1600x2200 one-pager: identity header, swatches with hex values and contrast grades, type specimens for both families, and an "in use" strip showing a button, a badge, and a link in your colors. It drops straight into a Notion page, a client email, or a pitch deck appendix.

## From kit to Brand Stack

The kit is the starting point; the brand is the product. "Build my Brand Stack from this kit" carries everything you chose (colors, fonts, name, tagline) across sign-up and into the [Brand Stack](https://brandstack.dev/) brand generator, pre-filled with your exact values. From there Brand Stack builds the complete brand around your kit: a full color system, typography, logo directions, and product imagery generated with your brand applied. The handoff is single-use, stays in your browser's localStorage, and expires after 30 minutes.

## For AI agents

Prefer the CLI (above). The tool page also pre-fills from URL parameters (`name`, `tagline`, `primary`, `accent`, `bg`, `text`, `extras`, `heading`, `body`), so a link carries the complete kit; "Copy prompt for agent" on the page packages the link, the CLI command, and the output contract for Claude Code, Codex, or Cursor. This page is also served as plain markdown at [/tools/brand-kit.md](https://brandstack.dev/tools/brand-kit.md), and listed with instructions in [/llms.txt](https://brandstack.dev/llms.txt).

## When to use this tool

- You are launching and every surface (site, deck, social) needs the same colors and type, stated once.
- You are rebranding and want the new kit as tokens your codebase imports, not a PDF nobody opens.
- You extracted a palette with [Color Palette from Image](/tools/color-palette) and want to turn it into a shareable, contrast-checked kit.
- A client or teammate asked "what are our brand colors?" for the third time this month.