Color in Design Systems

16 Tips for Setting Up a System That Endures

Nathan Curtis
Apr 13, 2016 · 9 min read

Primary Palette

#1. Stabilize Brand Colors Quickly

#2. Involve Brand (If You Alter a Brand Color)

#3. Drop the Neutral Neutrals

#4. Go “Digital Blue.” Everybody Else Does.

Tints & Shades Per Color

#5. Stack the Tint & Shade Range, Per Color

Material Design’s Indigo and Deep Orange

#6. Name Tints & Shades by Lightness

#7. Limit Tint & Shade Quantity

#8. Tell Me How To Transform: Hand-Pick or Functionally

Secondary Palettes

#9. Define Meaningful Sets Like Feedback Colors

Typical feedback colors: success, warning, error and informational

#10. Illustrate Theme Variety

Theme colors for multiple hotels, derived from product pages

#11. Define How Theming Works

#12. Avoid Guiding on Color-Mixing Until (At Least) Dust Settles

Serve users of your system by making it efficient to propagate their choice through a product, rather than making the choice for them.

Contrast & Accessibility

#13. Check Contrast Early & Ritually

Tanaguru, one of many accessibility calculators online

#14. Explore Accessible Color Choices Across Ranges

Exploring neutral and interactive colors by showing multiple choices across a range

#15. Solve the Reverse Light on Dark and Dark on Light

A table of calculated contrast (using a SASS function) between neutral backgrounds and interactive blue alternatives

#16. Use Color to Provoke Broader Accessibility Awareness


A collection of stories, studies, and deep thinking from EightShapes

Thanks to Dan Brown.

Nathan Curtis

Written by

Founder of UX firm @eightshapes. Speaker. Writer. Fan of Arsenal, Hokies. Cyclist & runner. Father & husband. VT & @uchicago grad.


A collection of stories, studies, and deep thinking from EightShapes