Skills
.Work. You
Rest

fd-color-systems

Community

Build cohesive color systems for themes.

Design & Creative#theming#accessibility#tailwind#design-system#dark-mode#color-system#semantic-tokens
Authorandrewle9510
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps designers and product teams build cohesive, accessible color systems that work across light and dark themes, ensuring brand consistency and WCAG-compliant contrast.

Core Features & Use Cases

  • Structured color palettes: primitive colors, semantic tokens, and component tokens.
  • Dark/light mode implementation via CSS variables and Tailwind shadcn theming.
  • Accessibility-first design: contrast checks, colorblind considerations, and themeable tokens.
  • Design-system handoff: documentation, naming conventions, and integration guidance.

Quick Start

Describe your app’s branding and target themes and I will generate a complete color system with semantic naming and a dark-mode strategy.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: fd-color-systems
Download link: https://github.com/andrewle9510/design-skill-orchestrator/archive/main.zip#fd-color-systems

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.