Building design systems at GitHub

A lightning talk for the Design Systems Coalition NYC meetup covering where we started and some of the lessons learned this year.

Transcript

1. Building design systems at GitHub Diana Mounter @broccolini
2. Style guide status: End of 2015
3. primercss.io Primer modules
4. primercss.io github.com GitHub app Primer modules
5. primercss.io github.com GitHub app More CSS Primer modules
6. More CSS Primer modules Problems No docs }
7. Problems • Piles and piles of CSS that does the same thing • Inconsistent styles • Inconsistent naming conventions
8. This made our CSS: • Hard to maintain • Hard to de-bug • Hard to design & prototype with
9. Which led to: • Bugs in production • Lengthy design-to-development times • Inconsistencies in the user experience
10. A grassroots design systems team
11. Core Maintainers Contributors
12. Quick wins, big impact
13. h1 h2 h3 Utilities Single-purpose classes that do one thing well.
14. Custom CSS Re-usable CSS Custom CSS Custom CSS Custom CSS Custom CSS Custom CSS Custom CSS Custom CSS Custom CSS Re-usable CSS Re-usable CSS
15. Custom CSS Re-usable CSS Custom CSS Custom CSS Re-usable CSS Re-usable CSS Re-usable CSS Re-usable CSS Re-usable CSS
16. Started to build systems
17. 16 breaks down 8 8 4 4 4 4 2 2 2 2 2 2 2 2 Spacing scale
18. 16 breaks down, and adds up to whole numbers more easily. 32 32 32 32 32 32 32 32 64 64 64 64 128 128 64
19. Then we ruined everyone’s lives
22. Typography scale Type scales based on powers of two often end up in more sensible numbers.
23. Typography scale
24. 17.5
25. Brent Jackson http://jxnblk.com/writing/posts/mathematical-web-typography/ Mathematical Web Typography
26. Clear and consistent naming convention
27. Adam Morse CSS and Scalability "If I’m reading html, I want to know what the css is going to do.”
28. <div class="alert alert—success"> <h2 class="text-center text-white"> Saved!</h2> </div>
29. .text-gray-dark .text-gray .text-gray-light .bg-blue-dark .bg-blue .bg-blue-light .btn .btn--small .btn--green-dark .card .card--small .card--large
30. What’s important for your naming convention? • Searchablity • Clarity • Scannability • Intention
31. Documentation
32. primercss.io github.com GitHub app More CSS Primer modules More CSS No docs }
33. primercss.io github.com GitHub app More CSS Primer modules
34. A company style guide has different needs to an open-source framework
35. All the CSS and all the docs in one place
36. Style guide github.com GitHub app Custom CSS Primer modules
37. Primer is our CSS framework
38. Primer is our CSS framework The style guide is documentation on how to use Primer
39. Principles
40. Sure! You’re gonna make it OOCSS/ functional/atomic/BEM right?
41. When you actually see the code.
42. Lots of arguments vibrant discussions
43. Principle led development!
44. Write down your principles!
45. Sometimes it can feel like Sisyphean task
46. Break it down
47. THE AWESOME COMPONE NT Show and tell
48. Communication
49. 58 comments
50. Explain the why 
 behind the what
51. Communicate to more people more often
53. Make changes and status clear & obvious
58. Seek feedback
61. Respond in a timely manner, and
62. Respond in a timely manner, and don’t wait for them to call you
68. What next?
69. Audit components
70. Make it public DRAFT
71. Hopes for the future…
72. Style guide driven design
73. Where does design happen?
74. “Design decisions run all the way through a product, like mould in a good cheese” Cenny D What design sprints are good for
75. Figma Sketch Pen & paper Prototyping in code Production implementation Photoshop Usability testing Where does design happen? Prototyping in InVision
76. How can design systems be in all those places?
77. Thank you.