How do I install the Color System Designer skill?

Run npx skillmds@latest add tomevault-io/color-system-designer in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Color System Designer safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Color System Designer?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Color System Designer free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Color System Designer?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Color System Designer by tomevault-io

Name: Color System Designer
Author: tomevault-io

Color System Designer

Creates color palettes and color systems for applications. Defines primary, secondary, neutral colors, and semantic colors (success, error, warning, info). Ensures accessibility compliance and provides usage guidelines.

tomevault-io Updated Sep 17, 2026

File contents

Color System Designer Skill

Instructions

Analyze color requirements from task
Check for existing color system or brand colors
Create color palette (primary, secondary, neutrals, semantic)
Define color variations (light, dark, shades, tints)
Ensure accessibility compliance (contrast ratios)
Provide usage guidelines
Return structured color system specifications with:
- Color palette (hex/rgb values)
- Color variations and shades
- Usage guidelines
- Accessibility compliance
- Design tokens format

Examples

Input: "Create color system for application" Output:

### Color System

**Primary Colors:**
- Primary: #007bff (blue)
- Primary Dark: #0056b3
- Primary Light: #66b3ff
- Primary Lighter: #cce6ff

**Secondary Colors:**
- Secondary: #6c757d (gray)
- Secondary Dark: #545b62
- Secondary Light: #adb5bd

**Neutral Colors:**
- White: #ffffff
- Gray 100: #f8f9fa
- Gray 200: #e9ecef
- Gray 300: #dee2e6
- Gray 400: #ced4da
- Gray 500: #adb5bd
- Gray 600: #6c757d
- Gray 700: #495057
- Gray 800: #343a40
- Gray 900: #212529
- Black: #000000

**Semantic Colors:**
- Success: #28a745 (green)
- Error: #dc3545 (red)
- Warning: #ffc107 (yellow)
- Info: #17a2b8 (cyan)

**Accessibility:**
- All text colors meet WCAG AA (4.5:1 contrast)
- Primary on white: 4.5:1 ✓
- White on primary: 4.5:1 ✓
- Error text on white: 4.5:1 ✓

**Usage Guidelines:**
- Primary: Main actions, links, important elements
- Secondary: Secondary actions, less important elements
- Success: Success messages, positive feedback
- Error: Error messages, destructive actions
- Warning: Warning messages, caution
- Info: Informational messages

Color System Components

Primary Colors: Main brand/application colors
Secondary Colors: Supporting colors
Neutral Colors: Grays, whites, blacks for text and backgrounds
Semantic Colors: Success, error, warning, info
Accent Colors: Additional colors for variety
Background Colors: Page and section backgrounds
Text Colors: Primary and secondary text colors
Border Colors: Border and divider colors

Accessibility Requirements

Text Contrast: Minimum 4.5:1 for normal text (WCAG AA)
Large Text Contrast: Minimum 3:1 for large text (WCAG AA)
UI Components: Minimum 3:1 for UI components
Focus Indicators: High contrast focus colors
Error States: Clear, high-contrast error colors

Design Token Format

Provide colors in design token format:

**Design Tokens:**
- `color.primary`: #007bff
- `color.primary.dark`: #0056b3
- `color.text.primary`: #212529
- `color.text.secondary`: #6c757d
- `color.background`: #ffffff
- `color.border`: #dee2e6

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: color-system-designerdescription: Creates color palettes and color systems for applications. Defines primary, secondary, neutral colors, and semantic colors (success, error, warning, info). Ensures accessibility compliance and provides usage guidelines.---# Color System Designer Skill## Instructions1. Analyze color requirements from task2. Check for existing color system or brand colors3. Create color palette (primary, secondary, neutrals, semantic)4. Define color variations (light, dark, shades, tints)5. Ensure accessibility compliance (contrast ratios)6. Provide usage guidelines7. Return structured color system specifications with: - Color palette (hex/rgb values) - Color variations and shades - Usage guidelines - Accessibility compliance - Design tokens format## Examples**Input:** "Create color system for application"**Output:**```markdown### Color System**Primary Colors:**- Primary: #007bff (blue)- Primary Dark: #0056b3- Primary Light: #66b3ff- Primary Lighter: #cce6ff**Secondary Colors:**- Secondary: #6c757d (gray)- Secondary Dark: #545b62- Secondary Light: #adb5bd**Neutral Colors:**- White: #ffffff- Gray 100: #f8f9fa- Gray 200: #e9ecef- Gray 300: #dee2e6- Gray 400: #ced4da- Gray 500: #adb5bd- Gray 600: #6c757d- Gray 700: #495057- Gray 800: #343a40- Gray 900: #212529- Black: #000000**Semantic Colors:**- Success: #28a745 (green)- Error: #dc3545 (red)- Warning: #ffc107 (yellow)- Info: #17a2b8 (cyan)**Accessibility:**- All text colors meet WCAG AA (4.5:1 contrast)- Primary on white: 4.5:1 ✓- White on primary: 4.5:1 ✓- Error text on white: 4.5:1 ✓**Usage Guidelines:**- Primary: Main actions, links, important elements- Secondary: Secondary actions, less important elements- Success: Success messages, positive feedback- Error: Error messages, destructive actions- Warning: Warning messages, caution- Info: Informational messages```## Color System Components- **Primary Colors**: Main brand/application colors- **Secondary Colors**: Supporting colors- **Neutral Colors**: Grays, whites, blacks for text and backgrounds- **Semantic Colors**: Success, error, warning, info- **Accent Colors**: Additional colors for variety- **Background Colors**: Page and section backgrounds- **Text Colors**: Primary and secondary text colors- **Border Colors**: Border and divider colors## Accessibility Requirements- **Text Contrast**: Minimum 4.5:1 for normal text (WCAG AA)- **Large Text Contrast**: Minimum 3:1 for large text (WCAG AA)- **UI Components**: Minimum 3:1 for UI components- **Focus Indicators**: High contrast focus colors- **Error States**: Clear, high-contrast error colors## Design Token FormatProvide colors in design token format:```markdown**Design Tokens:**- `color.primary`: #007bff- `color.primary.dark`: #0056b3- `color.text.primary`: #212529- `color.text.secondary`: #6c757d- `color.background`: #ffffff- `color.border`: #dee2e6```---> Converted and distributed by [TomeVault](https://tomevault.io/claim/lexicalninja) — claim your Tome and manage your conversions.

Frequently asked questions