Design Systems: when and how much?

Design systems are an investment. It takes time and resources to build and maintain them. When your team is small, investing in design systems can seem unnecessary or feel like a luxury you can't afford. Many companies don't employ people to focus on design systems until the inefficiencies of not having one become too painful to bear.

This talk shares examples from building design systems at GitHub, shows you how this can improve the design and development workflow, and help you to understand when you need to start building design systems and how much of a system you might need.

Transcript

1. Design Systems
   When and how much?
   Diana Mounter | @broccolini
   

   View Slide

2. Design Systems
   at GitHub
   !
   

   View Slide

3. What is a design system?
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. Style guide, pattern library, CSS
   framework, or design system?
   ht @jonrohan
   

   View Slide

8. View Slide

9. !
   Design Systems
   at GitHub
   

   View Slide

10. Rules, constraints, and
    principles, implemented in
    design and code.
    

    View Slide

11. Color
    Rule: must pass minimum color contrast ratio of 4.5:1
    Constraint: number of colors in the palette
    Principle: color should be used in a meaningful way
    

    View Slide

12. View Slide

13. .utilities {…}
    .Components {…}
    .custom-styles {…}
    $foreground
    $background
    $border
    

    View Slide

14. Typography Spacing
    Color
    Parts of a system
    

    View Slide

15. Typography Spacing
    Color
    Components
    Page layouts
    Parts of a system
    

    View Slide

16. Typography Spacing
    Color
    Components
    Page layouts
    Interaction
    models
    Voice & tone,
    words, 

    grammar &
    mechanics
    Parts of a system
    

    View Slide

17. Interrelated independent parts
    

    View Slide

18. Button
    Component Interaction model
    Component Page layout
    

    View Slide

19. GitHub Design System
    Documentation (style guide)
    Prototyping
    tool
    Primer
    CSS
    Sketch UI
    Kit
    

    View Slide

20. GitHub Design System
    Documentation (style guide)
    Prototyping
    tool
    Primer
    CSS
    JS code
    style
    Brand
    guidelines
    Sketch UI
    Kit
    Email
    toolkit
    Native 

    UI kit
    

    View Slide

21. GitHub Design System
    Documentation (style guide)
    Prototyping
    tool
    Primer
    CSS
    JS code
    style
    Brand
    guidelines
    Sketch UI
    Kit
    Email
    toolkit
    Native 

    UI kit
    

    View Slide

22. Why
    

    View Slide

23. View Slide

24. primercss.io github.com
    GitHub app
    More CSS
    Primer
    modules
    No docs
    }
    

    View Slide

25. Systems weren’t clearly defined 

    (in code or design)
    

    View Slide

26. 2,449

    hex values
    

    View Slide

27. Improve the workflow for
    designers who code
    &
    engineers who build UI
    

    View Slide

28. Introduce utilities
    based on systems
    

    View Slide

29. 
    .p-1 { padding: $spacer-3; }
    $spacer-3: 16px;
    

    View Slide

30. 8 breaks down, and adds up to whole
    numbers more easily
    16 16
    16 16
    16 16
    16 16
    32 32
    32 32
    64 64
    32
    

    View Slide

31. Typography
    

    View Slide

32. Behind every part of the
    system is a micro-system
    

    View Slide

33. 7 different box styles
    

    View Slide

34. // block
    .Box {…}
    // elements
    .Box-header {…}
    .Box-body {…}
    .Box-footer {…}
    // modifiers
    .Box-header--blue {…}
    .Box--large {…}
    

    View Slide

35. "If I’m reading html, I want to know what
    the css is going to do.”
    Adam Morse, CSS and Scalability
    

    View Slide

36. 

    Saved!
    
    

    View Slide

37. Documentation
    

    View Slide

38. Feedback loop
    HTML
    CSS
    I want to make
    a change!
    

    View Slide

39. Feedback loop
    HTML
    CSS
    I want to make
    a change!
    

    View Slide

40. A good system empowers 

    designers to code, and empowers
    engineers to design.
    

    View Slide

41. • Highly reusable and flexible styles
    • A clear and consistent naming convention
    • Up-to-date and well written documentation
    

    View Slide

42. “I feel like I have super powers and don’t
    want everyone else to realize that I’m
    totally faking.”
    

    View Slide

43. Scaling the system
    

    View Slide

44. What if you didn’t have to write
    all that markup either?
    

    View Slide

45. Primer CSS
    New
    38%
    .erb files using Primer on dotcom
    

    View Slide

46. GH
    

    View Slide

47. GH
    R
    J
    R
    J
    J
    J
    J
    R
    R
    R
    J
    J
    R
    R
    R
    J
    

    View Slide

48. GH
    R
    J
    ?
    J
    ?
    J
    J
    R
    ?
    R
    J
    J
    R
    R
    R
    J
    

    View Slide

49. System
    Code Design programs Documentation
    

    View Slide

50. Source of truth
    Code Design programs Documentation
    

    View Slide

51. Distill the system into it’s 

    purest form
    

    View Slide

52. When and how much?
    

    View Slide

53. When?
    No System It really hurts not having one
    
    
    

    View Slide

54. No system Material Design
    We need a design system!
    Started to get painful
    

    View Slide

55. “…the inefficiencies that a medium [sized]
    team can roll with are catastrophically
    wasteful to a team of our size”
    Jon Gold, Painting with Code
    

    View Slide

56. This should be solved once
    Component Interaction model
    Component Page layout
    

    View Slide

57. You can start with systems
    

    View Slide

58. Design systems should be 

    built for change.
    

    View Slide

59. When? Now!
    How much? As much as you need!
    

    View Slide

60. Thank you
    Diana Mounter | @broccolini
    

    View Slide