Color Systems

A lightning talk for Design Driven NYC on how I approached introducing a color system at GitHub.

Transcript

1. Color Systems Diana Mounter | @broccolini
2. Design Systems at GitHub !
3. Why?
4. “Dad jeans blue” Some of our colors were looking outdated.
6. 2,449
 hex values
7. Designing a system
8. As a user I can use color with consistency and confidence (that colors can only be used as intended).
9. • The color palette • How colors can be used • Ensuring rules can be followed successfully
10. Research existing use of color
11. Material Design NHS Identity Guidelines Solid by Buzzfeed US Web Standards
12. Name Descriptor Purpose red green yellow blue cyan indigo violet gray black warm cool bright light dark deep dull muted faded foreground background border fill primary secondary highlight accent
14. .utilities {…} .Components {…} .custom-styles {…} $foreground $background $border
15. Building the palette
16. “If one says ‘Red’ (the name of the color) and there are 50 people listening, it can be expected that there will be 50 reds in their minds. And one can be sure that all these reds will be very di!erent.” Josef Albers, Interaction of Color
17. www.webpagefx.com/w https://colorable.jxnblk.com
18. workwithcolor.com/hs www.webpagefx.com/web-design/hex-to-rgb ble.jxnblk.com
19. https://colors workwithcolor.com/hsl-color-picker-01.htm web-design/hex-to-rgb
20. https://colorsnapper.com l-color-picker-01.htm
21. Testing different types of color deficiency using Spectrum chrome plugin
22. Review current color Test new base color Test & tweak Compare to rest of palette Test & tweak Post in slack for quick feedback Build out rest of color family Test & tweak Update UI components Deploy to branch-lab Get feedback
23. Testing Code Review Collaboration
24. Were we successful?
25. Old New
30. H 240 S 1 L 33 #0000aa #0366d6 H 212 S 97 L 43 Btw ;)
33. “Color is the most relative medium in art” Interaction of Color
34. Palette Composition Context Observation We control (mostly) Don’t control, but can test
35. There’s a lot more work to do… including axing another 1,870 hex values
36. When should an organization start building a design system?
37. As early as possible!
38. Thank you Diana Mounter | @broccolini