Color System

What it does

This skill helps AI agents generate CSS color variables based on established color theory principles. It allows users to create harmonious and accessible color palettes using techniques like monochromatic, analogous, complementary, and triadic color schemes. The system generates a spectrum of tints, shades, and tones for each base color, facilitating consistent styling across frontend applications.

When to use it

• Designing a website or application with a specific brand identity and desired emotional impact.
• Creating accessible color palettes that meet contrast requirements.
• Developing themes or dark mode support for an existing design system.
• Generating a complete set of CSS variables for primary, secondary, semantic (success, warning, error, info), and neutral colors.

Key capabilities

• Color Harmony Techniques: Generates color palettes using monochromatic, analogous, complementary, and triadic methods.
• Color Spectrum Generation: Creates tints, shades, and tones for each base color.
• CSS Variable Output: Produces CSS variables formatted as module.exports suitable for integration into frontend projects.
• Color Psychology Guidance: Provides descriptions of the emotional associations linked to different colors (blue, green, red, purple, orange, yellow).

Example prompts

• "Generate a monochromatic color scheme based on blue."
• "Create an analogous color palette with blue as the primary color."
• "Give me a triadic color scheme including blue and amber."
• “Show me CSS variables for a complete theme including primary, secondary, success, warning, error, info, and neutral colors.”

Tips & gotchas

• The skill focuses on generating CSS color variables; it does not handle actual application of those styles.
• Consider accessibility when choosing primary colors – ensure sufficient contrast with white and black.
• Use complementary colors sparingly to avoid visual chaos.