color-system

Create cohesive color systems with accessible theming and dark-mode support.

29|6|Updated Jan 16, 2026

Search Tags:#theming #accessibility #contrast #dark-mode #color-system #color-theory

Ready to run

npx skills add https://github.com/sanky369/vibe-building-skills --skill color-system

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: color-system
Source: https://github.com/sanky369/vibe-building-skills/tree/main/skills/frontend-design/color-system
Command: npx skills add https://github.com/sanky369/vibe-building-skills --skill color-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables designers to create cohesive color systems with accessible theming and dark-mode capabilities.

Core Features & Use Cases

Color harmony techniques (monochromatic, analogous, complementary, triadic) to build flexible palettes that scale across contexts.
Accessibility and contrast assurance aligned to WCAG standards for text, UI components, and visuals.
Theming and dark-mode support via semantic tokens and CSS variables to enable seamless brand experiences.
Practical guidance for adopting color systems in design systems, UI kits, and product branding, with real-world examples.

Quick Start

Define your brand base color, generate a harmonious palette, validate contrast, and implement semantic tokens for light/dark modes. Then plug the tokens into your design system configuration.

Frequently Asked Questions about color-system

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

FAQPage Schema

How do I create a color system that meets WCAG accessibility standards?▼

A WCAG-compliant color system ensures sufficient contrast between text and backgrounds. Define your base colors, generate harmonious palettes using techniques like complementary or triadic schemes, then validate contrast ratios for all color pairs against WCAG AA or AAA thresholds before implementing semantic tokens.

What's the best way to implement dark mode with semantic color tokens?▼

Semantic tokens map colors to functional roles—primary, secondary, error—rather than literal names. Use CSS variables to store token values, then swap token assignments between light and dark contexts. This lets you maintain one design system with consistent theming across both modes.

How do I build a cohesive color palette using color harmony?▼

Color harmony techniques—monochromatic, analogous, complementary, and triadic—generate balanced palettes from a single base color. Each technique creates predictable relationships that scale across UI components and contexts while maintaining visual coherence and brand consistency.

Can I use a color system across a design system and multiple products?▼

Yes. A standardized color system with semantic tokens works across design systems, UI kits, and product branding. Store tokens in a centralized configuration, then reference them in component libraries and product implementations to ensure consistency at scale.

What contrast ratios do I need for different text and UI elements?▼

WCAG standards require minimum 4.5:1 contrast for normal text, 3:1 for large text, and 3:1 for UI components and graphics. Test all foreground-background pairs in your palette—both light and dark modes—to confirm compliance before deployment.

How do I document and maintain a color system for teams?▼

Document color definitions, harmony rationale, contrast validations, and token mappings for light and dark modes. Include real-world examples in your design system, provide token names and values for developers, and establish guidelines for extending the palette consistently.