What is the AI Design System Copilot?

The AI Design System Copilot is a developer utility that converts brand color palettes into production-ready Tailwind configs, Shadcn UI CSS variables, and prompt instructions for AI code generators like v0.dev, Claude, and Cursor.

How do I use these colors in v0.dev and Shadcn UI?

Go to the 'Theme Code Blocks' tab on this page, choose the 'v0.dev (Shadcn UI)' target, copy the generated CSS variables, and paste them into your global stylesheet (e.g. app/globals.css).

What does the Normalize Text Color button do?

The Normalize Text Color button calculates your background color's relative luminance and automatically resets the body typography text color to a high-contrast off-black or off-white. This prevents low-contrast text from blending into the background, complying with WCAG 2.1 accessibility standards.

How do I configure dark mode for Claude or Cursor?

Choose your dark base theme (like Brand-Tinted Midnight or Midnight Navy), adjust your desaturation and lightness boost sliders, and then copy the generated system prompt from the 'AI Prompt Instructions' tab to feed it directly to Claude or add it to your project's .cursorrules file.

AI Design System Copilot

Connect your brand color scheme directly to Bolt.new, v0.dev, or Cursor. Generate fully complete Tailwind configurations, comprehensive Shadcn HSL stylesheets, and custom instructions for AI builders to prevent gray slop.

Color Palette Inputs

#FFFFFF

#635BFF

#F8FAFC

#0F172A

💡 Tip: If your text looks too bright or colorful, click Normalize Text to instantly reset it to a clean, readable neutral that matches your canvas background.

Target AI Builder

Mockup Preview Vibe

Dark Mode Base Theme

Accent Desaturation 15%

Lightness Boost +5%

Load Saved / Popular Palettes

Integration Guide & FAQ

🤖 How does the AI Design System Copilot help me?

Most AI coding models (like Claude, Cursor, Bolt, and v0) have no inherent visual taste and default to generic charcoal grey backgrounds and blue buttons (known as "gray slop"). This tool acts as an translator, allowing you to feed your brand colors directly into AIs with fully optimized light and dark mode configurations.

⚡ How do I use the generated Tailwind or CSS output?

Depending on your stack:

v0.dev / Shadcn UI: Go to the Theme Code Blocks tab, select v0.dev, copy the CSS block, and paste it into your app/globals.css stylesheet.
Claude Artifacts: Select the AI Prompt Instructions tab, copy the Claude template, and paste it into your conversation to feed Claude the layout colors.
Cursor: Paste the generated instructions into your project's .cursorrules file to enforce your branding guidelines globally.

👁️ What is the "Normalize Text Color" logic?

Sometimes, design systems generate palettes where the fourth slot (text color) is too bright or matches the background luminance, resulting in invisible or eye-straining typography. Clicking Normalize Text calculates your background's relative luminance and automatically resets the text to a WCAG-compliant off-black (on light canvasses) or off-white (on dark canvasses) to guarantee readability.

🌌 What are "Brand-Tinted Midnight" dark themes?

Rather than using plain charcoal gray for dark mode, premium layouts tint their dark background canvas using a low-saturation, low-lightness version of the primary brand color (e.g. 5% saturation). This creates a custom-molded, highly cohesive feel that reflects your brand even in dark mode.

Copied content!