generate_design_tokens
Create design token systems for consistent UI styling by defining colors, styles, and dark mode preferences to maintain visual harmony across applications.
Instructions
Generate a comprehensive design token system
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| primaryColor | No | Primary brand color | |
| style | Yes | Overall design style | |
| darkMode | No | Include dark mode tokens |
Implementation Reference
- src/index.ts:243-416 (handler)The primary handler function that generates a complete design token system (colors, typography, spacing, shadows, etc.) based on the provided style and optional parameters.
function generateDesignTokens(params: z.infer<typeof GenerateDesignTokensSchema>): string { const { primaryColor = '#3b82f6', style, darkMode } = params; const tokens = { modern: { borderRadius: { sm: '0.375rem', md: '0.5rem', lg: '0.75rem', xl: '1rem' }, shadow: { sm: '0 1px 2px rgba(0,0,0,0.05)', md: '0 4px 6px rgba(0,0,0,0.07)', lg: '0 10px 15px rgba(0,0,0,0.1)' }, }, minimal: { borderRadius: { sm: '0', md: '0', lg: '0', xl: '0' }, shadow: { sm: 'none', md: '0 1px 0 rgba(0,0,0,0.1)', lg: '0 1px 0 rgba(0,0,0,0.1)' }, }, corporate: { borderRadius: { sm: '0.25rem', md: '0.375rem', lg: '0.5rem', xl: '0.625rem' }, shadow: { sm: '0 1px 3px rgba(0,0,0,0.12)', md: '0 4px 6px rgba(0,0,0,0.15)', lg: '0 10px 20px rgba(0,0,0,0.15)' }, }, playful: { borderRadius: { sm: '0.75rem', md: '1rem', lg: '1.5rem', xl: '2rem' }, shadow: { sm: '0 4px 6px rgba(0,0,0,0.1)', md: '0 8px 12px rgba(0,0,0,0.15)', lg: '0 16px 24px rgba(0,0,0,0.2)' }, }, elegant: { borderRadius: { sm: '0.125rem', md: '0.25rem', lg: '0.375rem', xl: '0.5rem' }, shadow: { sm: '0 2px 4px rgba(0,0,0,0.06)', md: '0 4px 8px rgba(0,0,0,0.08)', lg: '0 8px 16px rgba(0,0,0,0.1)' }, }, }; const selectedTokens = tokens[style]; return `export const designTokens = { colors: { primary: { 50: '${lightenColor(primaryColor, 0.95)}', 100: '${lightenColor(primaryColor, 0.9)}', 200: '${lightenColor(primaryColor, 0.8)}', 300: '${lightenColor(primaryColor, 0.6)}', 400: '${lightenColor(primaryColor, 0.3)}', 500: '${primaryColor}', 600: '${darkenColor(primaryColor, 0.1)}', 700: '${darkenColor(primaryColor, 0.2)}', 800: '${darkenColor(primaryColor, 0.3)}', 900: '${darkenColor(primaryColor, 0.4)}', }, neutral: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', }, success: { 50: '#ecfdf5', 500: '#10b981', 600: '#059669', }, warning: { 50: '#fffbeb', 500: '#f59e0b', 600: '#d97706', }, error: { 50: '#fef2f2', 500: '#ef4444', 600: '#dc2626', }, }, typography: { fontFamily: { sans: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif', mono: 'ui-monospace, "Cascadia Mono", "Roboto Mono", monospace', }, fontSize: { xs: '0.75rem', sm: '0.875rem', base: '1rem', lg: '1.125rem', xl: '1.25rem', '2xl': '1.5rem', '3xl': '1.875rem', '4xl': '2.25rem', '5xl': '3rem', }, fontWeight: { normal: 400, medium: 500, semibold: 600, bold: 700, }, lineHeight: { tight: 1.25, normal: 1.5, relaxed: 1.75, }, }, spacing: { 0: '0', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem', 6: '1.5rem', 8: '2rem', 10: '2.5rem', 12: '3rem', 16: '4rem', 20: '5rem', 24: '6rem', }, borderRadius: ${JSON.stringify(selectedTokens.borderRadius, null, 2).replace(/"/g, "'")}, boxShadow: ${JSON.stringify(selectedTokens.shadow, null, 2).replace(/"/g, "'")}, transitions: { fast: '150ms ease-in-out', base: '250ms ease-in-out', slow: '350ms ease-in-out', }, breakpoints: { sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px', }, ${darkMode ? ` dark: { colors: { background: '#0f172a', surface: '#1e293b', surfaceHover: '#334155', text: '#f1f5f9', textMuted: '#94a3b8', border: '#334155', }, },` : ''} }; // CSS custom properties export const cssVariables = \` :root { /* Colors */ --color-primary: \${designTokens.colors.primary[500]}; --color-primary-hover: \${designTokens.colors.primary[600]}; /* Typography */ --font-sans: \${designTokens.typography.fontFamily.sans}; --font-mono: \${designTokens.typography.fontFamily.mono}; /* Spacing */ --space-1: \${designTokens.spacing[1]}; --space-2: \${designTokens.spacing[2]}; --space-3: \${designTokens.spacing[3]}; --space-4: \${designTokens.spacing[4]}; /* Shadows */ --shadow-sm: \${designTokens.boxShadow.sm}; --shadow-md: \${designTokens.boxShadow.md}; --shadow-lg: \${designTokens.boxShadow.lg}; /* Transitions */ --transition-fast: \${designTokens.transitions.fast}; --transition-base: \${designTokens.transitions.base}; }\`;`; } - src/index.ts:20-24 (schema)Zod schema defining the input parameters for the generate_design_tokens tool.
const GenerateDesignTokensSchema = z.object({ primaryColor: z.string().optional().describe("Primary brand color in hex format"), style: z.enum(["modern", "minimal", "corporate", "playful", "elegant"]).describe("Overall design style"), darkMode: z.boolean().optional().describe("Include dark mode tokens"), }); - src/index.ts:76-92 (registration)Registration of the tool in the ListTools response, including name, description, and input schema.
{ name: "generate_design_tokens", description: "Generate a comprehensive design token system", inputSchema: { type: "object", properties: { primaryColor: { type: "string", description: "Primary brand color" }, style: { type: "string", enum: ["modern", "minimal", "corporate", "playful", "elegant"], description: "Overall design style" }, darkMode: { type: "boolean", description: "Include dark mode tokens" }, }, required: ["style"], }, }, - src/index.ts:147-157 (handler)Switch case dispatcher in CallToolRequestSchema handler that validates input and invokes the main generateDesignTokens function.
case "generate_design_tokens": { const parsed = GenerateDesignTokensSchema.parse(args); return { content: [ { type: "text", text: generateDesignTokens(parsed), }, ], }; } - src/index.ts:615-623 (helper)Helper functions for color manipulation used within generateDesignTokens to create color scales.
function lightenColor(color: string, amount: number): string { // Simple color lightening - in production use a proper color library return color + Math.round(amount * 100).toString(16); } function darkenColor(color: string, amount: number): string { // Simple color darkening - in production use a proper color library return color + Math.round((1 - amount) * 100).toString(16); }