$30 off During Our Annual Pro Sale. View Details »

Color Systems

March 07, 2017

Color Systems

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


March 07, 2017

More Decks by Diana

Other Decks in Design


  1. Color Systems Diana Mounter | @broccolini

  2. Design Systems at GitHub !

  3. Why?

  4. “Dad jeans blue” Some of our colors were looking outdated.

  5. None
  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

  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
  13. None
  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

  26. None
  27. None
  28. None
  29. None
  30. H 240 S 1 L 33 #0000aa #0366d6 H 212

    S 97 L 43 Btw ;)
  31. None
  32. None
  33. “Color is the most relative medium in art” Interaction of

  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