Presentation on starting your won design system.

1. Say “No” to Accidental Architecture
Build Your Design System Instead
Burton Smith
burton@breakstuff.io
@stuffbreaker

2. A Bit About Me…

3. A Bit More About Me…

4. Shameless Plug
https://projectclarion.com

5. What is accidental architecture?

6. My Response…

7. What is a Design System?
Design Systems
• The comprehensive set of values, semantics, syntax, and context
that form the foundation of a shared design language
Style Guide
• Style guide documentation is your “storefront” and includes
crafted and detailed documentation with information like usage
guidelines and style principles.
Pattern Library
• An organized set of related, reusable components, often containing
code examples, design guidelines, coding standards, and use cases

8. What is a Design System?
Pattern Library Style Guide
Design System

9. What is a Design System?
Pattern Library
Style Guide - A
Design System
Style Guide - C
Style Guide - B

10. Key Benefits
• Time save on designing and building modules
• Time saved on making site-wide changes
• Faster Product Launches
• Brand Unity at Scale
• Visual Consistency
• Teamwork and Collaboration
• Reduce learning curve for new employees
• Increase the quality of our products

11. Shared Language

12. Key Areas of Focus
Purpose &
Aesthetics
Developer
Experience
(DX)
User
Experience
(UX)

13. Before I go any further…

14. 4 Keys to a Successful Design System
1. Scope Definition
2. Development
3. Implementation
4. Documentation

15. Define Your Scope
• Do a site audit
• Identify what you need
• Design a representation of how components will look/behave

16. Define Your Scope
Sketch Adobe XD

17. Additional Things to Identify with Scope
• Color
• Interactive States
• Animations
• Typography
• Fonts
• Media Queries
• Spacing
• Iconography
• Shapes and Borders
• Voice and Tone
• Performance Standards
• Accessibility Standards
• Technical Constraints

18. Development
• Key Abstractions
• CSS
• Reusable design Tokens
• Reusable classes and style patterns
• HTML
• Isolated/reusable markup for easy implementation
• Abstracted for quick modifications
• JavaScript
• Logic that is specific for managing the behavior and state of your patterns

19. Development
• Build meaningful Abstractions
• Flexible
• Easy to use

20. Development Tools
Tailwind CSS
Tachyons
CSS in JS Pre/Post-Processors Utility Libraries

21. Development Tools

22. Development Tools
+

23. Development Tools

24. Implementation
• How do properties now implement your system?
• What is the delivery method?
• How do they implement it?
• How do they extend it?

25. Documentation
• Who is responsible for the documentation governance?
• Where can you find it and how easy is it to use?
• How, When, and Where to use (or not use) aspects of your design
system

26. Documentation Examples
• https://atlassian.design/
• https://canvas.hubspot.com/
• https://developer.microsoft.com/en-us/fabric
• https://meetup.github.io/swarm-design-system/
• https://slack.design/
• https://design-system.pluralsight.com/
• https://ux.mailchimp.com/
• https://adele.uxpin.com/

27. Additional Resources
• Design Systems by Alla Kholmatova
• Atomic Design by Brad Frost
• Building Design Systems by Sarrah Vesselov and Taurie Davis
• CSS Architecture
• ITCSS
• The ten commandments of sane style sheets
• Clarion - https://projectclarion.com

28. Questions???