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 Marriott.com 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

EightShapes

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.

EightShapes

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