AI Brand Kits

tokens.json Brand Kit

Download tokens.json with your brand colors, fonts, and spacing in structured JSON. Import into theme providers, Tailwind, and AI coding agent workflows.

Why tokens.json matters for brand kits

DESIGN.md teaches agents what your brand looks like. tokens.json lets your application code use the same values programmatically. A tokens.json brand kit bridges AI-generated UI and production theme systems so primary in Claude output matches primary in your React theme provider.

AI Brand Kits exports tokens.json alongside DESIGN.md, W3C format tokens, Figma-compatible JSON, and css-variables.css in the Pro zip bundle. Semantic names stay consistent: primary, accent, background, foreground, muted, border, plus headline and body font families.

Use tokens.json with export design tokens for AI agents, cursor rules, and consistent UI with AI coding for end-to-end brand enforcement.

What is inside the tokens.json export

The export is not a flat hex list. It follows design token structure agents and build tools expect, with light and dark palettes in Pro bundles.

  • Color tokens with semantic roles and hex values for light and dark modes
  • Typography tokens: headline_font, body_font, with Google Fonts family names
  • Spacing scale and border radius tokens for layout consistency
  • Motion duration tokens for animation defaults
  • Companion files: tokens.w3c.json, tokens.figma.json for design tool import
  • Matching DESIGN.md and globals.css so agents and code share one source

Use tokens.json in your stack

Generate your kit, export the zip, and wire tokens into both agent context and application theme code.

  • Build fonts and colors in the brand kit generator or playground
  • Export Pro zip from Export for AI Agents
  • Import tokens.json into your theme config, Style Dictionary pipeline, or CSS variable generator
  • Tell Cursor or Claude Code: "Use values from tokens.json. Do not hardcode hex."
  • Reference DESIGN.md for usage rules tokens.json does not encode

tokens.json workflows by team

Frontend teams import tokens.json into Tailwind v4 @theme blocks from the Tailwind export. AI-heavy teams paste token names into Claude design system prompts while engineers import the same file.

Design ops teams send tokens.figma.json to designers and tokens.json to engineers so AI agents and Figma libraries stay aligned.

  • Next.js apps: globals.css generated from the same token set as tokens.json
  • Multi-brand products: swap tokens.json per tenant while keeping semantic names
  • Agent refactors: Cursor replaces inline styles with var(--primary) from exported CSS

FAQ

Is tokens.json included in free export?
tokens.json is in the Pro zip bundle along with DESIGN.md, globals.css, and starter components. Free users get DESIGN.md download and prompt copy.
What is the difference between tokens.json and tokens.w3c.json?
tokens.json uses a flat structure optimized for apps and agents. tokens.w3c.json follows W3C Design Tokens format for interoperability.
Can Claude Code read tokens.json?
Yes, when referenced in prompts or AGENTS.md. Pair with brand kit for Claude Code setup.
Does tokens.json include dark mode?
Pro exports include light and dark color palettes in tokens.json and globals.css.
How do I keep tokens.json in sync with DESIGN.md?
Re-export from AI Brand Kits after kit changes. Both files generate from the same source in one zip download.

Related

Free tools

Interactive utilities you can use without an account. Each tool links to related guides and export workflows across the site.