Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building design systems at GitHub

Diana
December 15, 2016

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.

Diana

December 15, 2016
Tweet

More Decks by Diana

Other Decks in Design

Transcript

  1. Building design
    systems at GitHub
    Diana Mounter
    @broccolini

    View full-size slide

  2. Style guide status:
    End of 2015

    View full-size slide

  3. primercss.io
    Primer
    modules

    View full-size slide

  4. primercss.io github.com
    GitHub app
    Primer
    modules

    View full-size slide

  5. primercss.io github.com
    GitHub app
    More CSS
    Primer
    modules

    View full-size slide

  6. More CSS
    Primer
    modules
    Problems
    No docs
    }

    View full-size slide

  7. Problems
    • Piles and piles of CSS that does the same thing
    • Inconsistent styles
    • Inconsistent naming conventions

    View full-size slide

  8. This made our CSS:
    • Hard to maintain
    • Hard to de-bug
    • Hard to design & prototype with

    View full-size slide

  9. Which led to:
    • Bugs in production
    • Lengthy design-to-development times
    • Inconsistencies in the user experience

    View full-size slide

  10. A grassroots
    design systems team

    View full-size slide

  11. Core Maintainers Contributors

    View full-size slide

  12. Quick wins, big impact

    View full-size slide

  13. h1
    h2
    h3
    Utilities
    Single-purpose classes that do one thing well.

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  16. Started to build systems

    View full-size slide

  17. 16 breaks down
    8 8
    4 4
    4 4
    2 2
    2 2
    2 2
    2 2
    Spacing scale

    View full-size slide

  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

    View full-size slide

  19. Then we ruined
    everyone’s lives

    View full-size slide

  20. Typography scale
    Type scales based on powers of two often
    end up in more sensible numbers.

    View full-size slide

  21. Typography scale

    View full-size slide

  22. Brent Jackson
    http://jxnblk.com/writing/posts/mathematical-web-typography/
    Mathematical Web
    Typography

    View full-size slide

  23. Clear and consistent
    naming convention

    View full-size slide

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

    View full-size slide

  25. .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

    View full-size slide

  26. What’s important for your
    naming convention?
    • Searchablity
    • Clarity
    • Scannability
    • Intention

    View full-size slide

  27. Documentation

    View full-size slide

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

    View full-size slide

  29. primercss.io github.com
    GitHub app
    More CSS
    Primer
    modules

    View full-size slide

  30. A company style guide
    has different needs to an
    open-source framework

    View full-size slide

  31. All the CSS and all the
    docs in one place

    View full-size slide

  32. Style guide github.com
    GitHub app
    Custom
    CSS
    Primer
    modules

    View full-size slide

  33. Primer is our CSS framework

    View full-size slide

  34. Primer is our CSS framework
    The style guide is documentation
    on how to use Primer

    View full-size slide

  35. Sure!
    You’re gonna make it OOCSS/
    functional/atomic/BEM right?

    View full-size slide

  36. When you actually see the code.

    View full-size slide

  37. Lots of arguments
    vibrant discussions

    View full-size slide

  38. Principle led development!

    View full-size slide

  39. Write down your principles!

    View full-size slide

  40. Sometimes it can feel like
    Sisyphean task

    View full-size slide

  41. Break it down

    View full-size slide

  42. THE
    AWESOME
    COMPONE
    NT
    Show and tell

    View full-size slide

  43. Communication

    View full-size slide

  44. Explain the why 

    behind the what

    View full-size slide

  45. Communicate to more people
    more often

    View full-size slide

  46. Make changes and
    status clear & obvious

    View full-size slide

  47. Seek feedback

    View full-size slide

  48. Respond in a timely manner, and

    View full-size slide

  49. Respond in a timely manner, and
    don’t wait for them to call you

    View full-size slide

  50. Audit components

    View full-size slide

  51. Make it public
    DRAFT

    View full-size slide

  52. Hopes for the future…

    View full-size slide

  53. Style guide driven design

    View full-size slide

  54. Where does design happen?

    View full-size slide

  55. “Design decisions run all the
    way through a product, like
    mould in a good cheese”
    Cenny D
    What design sprints are good for

    View full-size slide

  56. Figma
    Sketch Pen & paper
    Prototyping
    in code
    Production
    implementation
    Photoshop
    Usability testing
    Where does design happen?
    Prototyping
    in InVision

    View full-size slide

  57. How can design systems
    be in all those places?

    View full-size slide