Brand Kit Generator
generate_brand_kitCreate a complete brand kit with color palettes, typography pairings, and design tokens from company details and aesthetic preferences. Outputs in JSON, CSS, or Tailwind formats with WCAG accessibility scoring.
Instructions
Generate a complete brand kit from a company name, industry, and aesthetic keywords. Returns a color palette with WCAG accessibility scores, curated typography pairings, and design tokens in JSON, CSS, or Tailwind format.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Company or brand name | |
| industry | No | Industry (e.g., 'fintech', 'healthcare', 'fashion') | |
| vibe | No | Aesthetic keywords: 'modern', 'playful', 'luxurious', 'minimal', 'bold', etc. | |
| format | No | Output format | full |
Implementation Reference
- mcp-server/src/index.ts:288-334 (handler)The "generate_brand_kit" tool is registered in the MCP server, which processes inputs and forwards the request to the "brand-kit" endpoint of the external API via the callToolApi helper.
server.registerTool( "generate_brand_kit", { title: "Brand Kit Generator", description: "Generate a complete brand kit from a company name, industry, and aesthetic keywords. " + "Returns a color palette with WCAG accessibility scores, curated typography pairings, " + "and design tokens in JSON, CSS, or Tailwind format.", inputSchema: { name: z.string().describe("Company or brand name"), industry: z .string() .optional() .describe("Industry (e.g., 'fintech', 'healthcare', 'fashion')"), vibe: z .array(z.string()) .optional() .describe("Aesthetic keywords: 'modern', 'playful', 'luxurious', 'minimal', 'bold', etc."), format: z .enum(["full", "tokens", "css", "tailwind"]) .default("full") .describe("Output format"), }, }, async ({ name, industry, vibe, format }) => { const result = await callToolApi("brand-kit", { name, industry, vibe, format }); const data = result as any; const r = data.result; if (format === "css") { return { content: [{ type: "text" as const, text: `Brand kit for **${name}**:\n\n\`\`\`css\n${r.css}\n\`\`\`\n\nFonts: ${r.fonts?.display} + ${r.fonts?.body}\nAccessibility: Primary on background ${r.accessibility?.primaryOnBackground?.rating} (${r.accessibility?.primaryOnBackground?.ratio}:1)` }], }; } if (format === "tailwind") { return { content: [{ type: "text" as const, text: `Brand kit for **${name}**:\n\n\`\`\`javascript\n${r.tailwindConfig}\n\`\`\`\n\nFonts: ${r.fonts?.display} + ${r.fonts?.body}` }], }; } // Full or tokens format return { content: [{ type: "text" as const, text: `Brand kit for **${name}**:\n\n\`\`\`json\n${JSON.stringify(r, null, 2).slice(0, 3000)}\n\`\`\`\n\n*(Full result may be truncated — use 'css' or 'tailwind' format for focused output)*` }], }; } );