design_theme
Generate a production-ready design system (colors, typography, spacing, shadows, transitions) as CSS custom properties, tailored to your industry and design tone.
Instructions
Phase 3 — Generate a complete, production-ready design system based on business context.
Returns: color palette (primary, secondary, accent, neutrals, semantic), typography (with Google Fonts link), spacing (8px grid), shadows, border radius, transitions — all as CSS custom properties.
The theme is NEVER randomly dark or light — it's chosen based on industry (fintech → light + navy, gaming → dark + neon, etc.). Colors avoid the AI-telltale purple-blue gradient.
Call this AFTER analyze_project and plan_architecture, BEFORE select_components.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| tone | Yes | Design tone/personality. Examples: "modern", "corporate", "playful", "minimal", "luxury", "technical", "warm", "bold", "elegant" | |
| industry | Yes | Business industry or type. Examples: "fintech", "healthcare", "saas", "ecommerce", "restaurant", "law firm", "gaming studio", "luxury fashion", "startup", "nonprofit" | |
| brandColor | No | Optional brand hex color to use as primary (e.g., "#2563EB"). If omitted, the engine picks the best color for your industry. | |
| themePreference | No | Force light/dark theme, or let the engine decide based on industry (recommended: "auto") |