Design systems help organizations build products consistently by defining shared design languages. They include style guides, pattern libraries, and components. Key benefits are time savings, brand unity, and easier collaboration. Areas of focus are purpose, UX, and DX. To build one, define your scope, develop reusable components, implement them consistently, and document everything well. Tools include Tailwind CSS and documentation sites show best practices. Design systems promote efficient, consistent product development at scale.

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???