color-system

Generate tonal scales for brand, neutral, semantic, and extended palettes.

Updated Mar 16, 2026
One-click install
npx skills add https://github.com/soeiroo/multifunctional-web --skill color-system-soeiroo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: color-system
Source: https://github.com/soeiroo/multifunctional-web/tree/main/.agents/skills/color-system
Command: npx skills add https://github.com/soeiroo/multifunctional-web --skill color-system-soeiroo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams struggle to create consistent, accessible color systems across products, leading to inconsistent branding and accessibility gaps.

Core Features & Use Cases

  • Generate full tonal scales for brand, neutral, semantic, and extended palettes.
  • Validate contrast ratios, support light and dark modes, and provide usage guidance for UI components.
  • Use cases include branding refresh, design-system adoption, and accessibility compliance audits.

Quick Start

Generate a full accessible color system for a brand, then export the palettes for design tooling.

Frequently Asked Questions about color-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a color system that meets accessibility contrast requirements?

Build an accessible color system by generating full tonal scales for brand and neutral palettes, then validating contrast ratios for UI components. This ensures compliance while providing ready-to-use semantic naming across light and dark modes.

What's the best way to generate a color palette with dark mode support?

Generate a color palette with dark mode support by creating full tonal scales for brand, neutral, semantic, and extended colors. The system validates contrast across multiple themes to satisfy accessibility standards for both light and dark environments.

Can I use a generated color palette for data visualization?

Yes, you can apply the generated color palette to data visualization contexts. The system produces extended palettes specifically designed to satisfy semantic naming and contrast requirements across branding, UI design, and data visualization.

How do you validate color blindness accessibility in a design system?

Validate color blindness accessibility by applying generated semantic and extended palettes across UI components. The system includes accessibility validations to ensure contrast and tonal scale requirements are met for users with color vision deficiencies.

Does this color system generator provide semantic naming for UI components?

Yes, the color system generator provides semantic naming for UI components. It builds brand, neutral, semantic, and extended palettes with usage guidance, satisfying semantic naming requirements across multiple themes for production readiness.

Why do my design system colors fail accessibility audits?

Design system colors fail accessibility audits due to insufficient contrast ratios and inconsistent tonal scales. Generating a comprehensive color system with built-in contrast validations and dark mode support resolves these compliance gaps.