Better Colors

Overview

A complete guide to designing color systems that scale across digital interfaces. Rather than accumulating colors haphazardly, this skill walks through building intentional ramps, naming tokens by role, and verifying accessibility through proper contrast measurement.

Highlights

• Build color ramps with evenly-spaced lightness steps and constant hue
• Separate primitive colors from semantic tokens for easy theming
• Measure contrast pairs in rendered context, not in isolation
• Establish one color, one meaning across your entire interface
• Audit existing codebases to detect color system gaps
• Support light and dark appearance variations systematically

For Design Teams

Whether you're starting a new design system or improving an existing one, this skill provides the principles and verification methods to create colors that work reliably across all users and contexts. Focus on measurable accessibility rather than aesthetic guessing.