skills.rest
FutureAtoms
FutureAtomsCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-color-system

Generate color token JSON and CSS or React Native code snippets.

1|Updated Mar 11, 2026
Search Tags:#accessibility#design tokens#ux design#ui design#color system#light dark mode
One-click install
npx skills add https://github.com/FutureAtoms/claude-skills-backup --skill ui-ux-color-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-color-system
Source: https://github.com/FutureAtoms/claude-skills-backup/tree/main/ui-ux-color-system
Command: npx skills add https://github.com/FutureAtoms/claude-skills-backup --skill ui-ux-color-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design and implement comprehensive color systems for digital products, ensuring visual appeal, brand consistency, and accessibility across light and dark modes.

Core Features & Use Cases

  • Palette Generation: Creates primary, secondary, and neutral color palettes with tonal variations.
  • Semantic Mapping: Defines colors based on their purpose (e.g., text, background, feedback).
  • Accessibility Compliance: Guides users to meet WCAG contrast ratio requirements.
  • Light/Dark Mode Design: Provides strategies for adapting color schemes.
  • Use Case: Design a new color system for a mobile app, including palettes, semantic definitions, and implementation examples for both light and dark themes, ensuring it meets accessibility standards.

Quick Start

Use the ui-ux-color-system skill to design a color system for the 'Acme Corp' brand.

Frequently Asked Questions about ui-ux-color-system

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

FAQPage Schema
How do I design a color system that meets WCAG accessibility standards?▼

Design an accessible color system by generating palettes and semantic mappings that guide you to meet WCAG contrast ratio requirements across text, background, and feedback colors.

Can I generate design tokens for both CSS and React Native color systems?▼

Yes, you can generate design tokens for CSS and React Native color systems, outputting color token JSON alongside implementation code snippets for both platforms.

How do I create light and dark mode palettes for a mobile app?▼

Create light and dark mode palettes by defining primary, secondary, and neutral tonal variations, then applying semantic mapping strategies to adapt color schemes for mobile apps.

Does this color system support Material You dynamic color and iOS semantic colors?▼

Yes, this color system supports Material You dynamic color and iOS semantic colors, enabling adaptive brand consistency across different mobile platform environments.

What is the best way to map semantic colors for UI design?▼

The best way to map semantic colors for UI design is to define colors based on their functional purpose, such as text, background, or feedback, ensuring visual appeal and accessibility.

How do I implement a consistent brand color palette across light and dark modes?▼

Implement a consistent brand color palette by generating primary, secondary, and neutral tonal variations, then adapting these semantic colors for both light and dark mode themes.

Related Skills

Explore More Design & Creative Skills→
adminsairolotech-bitadminsairolotech-bit

branding-generator

Generate three brand directions with color palettes, typography, and logo concepts.

Community
Advanced
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
lemulemu

visual-design-foundations

Standardize typography, color, spacing, and iconography into design tokens and guidelines.

Community
Intermediate
KyaniteLabsKyaniteLabs
3

color-system

Generate OKLCH color ramps and semantic token systems with WCAG 2.x contrast verification.

Official
Advanced