Color Systems

Fewer colors, more discipline. Every color earns its place.

How to use

• /color-systems Apply color system constraints to this conversation.

Constraints

Palette Roles

• MUST assign every color a clear role: structural (backgrounds, borders), semantic (error, success, warning), accent (primary action, emphasis), or decorative
• MUST ensure semantic colors are consistent everywhere (red always means the same thing)
• MUST keep neutrals doing 80-90% of the heavy lifting. Color is the accent, not the foundation.
• NEVER use the same color for conflicting purposes (red as both "featured" and "error")

Restraint Rules

• A 2-3 color palette used with intention always outperforms a 7-color palette used without thought
• MUST evaluate: can any color be removed without losing information?
• SHOULD start with one accent color and add more only when the single accent can't carry the semantic load
• NEVER add a color because "it needs more color." Add a color because the information requires it.

Relationships Over Swatches

• MUST evaluate colors in context, not in isolation (the same blue looks different next to warm gray vs. cool white)
• MUST check contrast ratios for accessibility (WCAG AA minimum)
• SHOULD evaluate how the palette works across light and dark modes

Anti-Patterns

• Picking colors from a trend palette without evaluating fit
• Using color as the primary hierarchy tool (color should reinforce hierarchy, not create it alone)
• Decorative gradients that don't serve information or brand
• Different accent colors on different pages with no system behind the variation