docs

Features

Brand Kit

AI-powered brand systems — where the brand IS the theme. Create, manage, and enforce brand identity across all your designs with a visual editor and 17 MCP tools.

Brand = Theme

When a brand system is active, it controls all semantic tokens (bg-primary, text-foreground, etc.). Every design decision follows the brand automatically.

Visual Editor

The brand editor lives at /brand/[id] and provides a full visual editing experience:

Controls Bar

A top controls bar with live-preview editing:

  • Typography mega-menu — heading/body fonts, type scale presets, line height, letter spacing
  • 4 color pills — primary, secondary, accent, and background with native pickers
  • Radius selector — control border radius across all components
  • Icon library picker — choose between Phosphor, Lucide, Heroicons, or Radix
  • Color tuner — global hue/saturation/brightness sliders that transform all brand colors together
  • Light/dark toggle — preview and edit both modes with cross-mode auto-derivation

6 Editor Tabs

Mood

Masonry moodboard with inline-editable brand name, tagline, industry, and values

UI

Live component showcase showing buttons, cards, inputs, and more in your brand colors

Imagery

Lummi image search, upload, and “Find Similar” to curate brand photography

Fonts

Type specimen preview with click-to-copy Tailwind CSS classes

Iconography

Masonry icon grid from your chosen icon library and weight

AI Guidelines

Editable markdown “brand bible” that tells AI agents how to design for your brand

Accessibility

Built-in WCAG contrast matrix that scores all semantic color pairs automatically. See at a glance which combinations meet AA/AAA contrast requirements.

Undo Support

Cmd+Z undo with a 30-step stack for all control changes (colors, fonts, radius, etc.).

MCP Tools (17)

AI agents can fully manage brand systems programmatically via 17 MCP tools:

CategoryTools
CRUDget_brand_kit, set_brand_kit, list_brand_kits, create_brand_kit, detach_brand_kit, duplicate_brand_kit
Editupdate_brand_identity, update_brand_colors, update_brand_ai_guidelines
Componentssave_brand_component, list_brand_components, insert_brand_component, delete_brand_component, save_brand_template
Mediaget_brand_images
Exportexport_brand_system
Qualityaudit_brand_compliance

See the full tool reference for parameters and examples.

Export Formats

Export your brand system to any format, from the visual editor or via the export_brand_system MCP tool:

CSS Variables

:root and .dark blocks with all semantic tokens

Tailwind v4

Ready-to-paste Tailwind CSS v4 theme configuration

Style Dictionary

Design token format compatible with Amazon Style Dictionary

Figma Variables

Import directly into Figma as local variables

javascript
// Export via MCP
export_brand_system({ format: "css" })
export_brand_system({ format: "tailwind" })
export_brand_system({ format: "style-dictionary" })
export_brand_system({ format: "figma" })
export_brand_system({ format: "package" })  // Full JSON

Brand Compliance

The audit_brand_compliance tool checks your design for violations:

  • Hardcoded colors — colors that won't theme (use semantic tokens instead)
  • Wrong fonts — fonts not matching brand heading/body fonts
  • Wrong icon library/weight — icons from a different library than the brand specifies
  • Non-semantic tokens — using raw color values instead of bg-primary, text-foreground, etc.

AI Agent Workflow

Typical workflow for an AI agent working with brand systems:

javascript
// 1. Check if a brand system is active
get_brand_kit()

// 2. If not, create or apply one
create_brand_kit({ companyName: "Acme Corp" })
// or: set_brand_kit({ brandKitId: "existing-id" })

// 3. Customize the brand
update_brand_identity({ tagline: "Build the future", industry: "Technology" })
update_brand_colors({ mode: "light", tokens: { primary: "#2563eb" } })

// 4. Design following the brand
add_section({ parentId: "artboard-1", jsx: `<section className="bg-primary text-primary-foreground p-16">...</section>` })

// 5. Audit for compliance
audit_brand_compliance()

Reference