A quick presentation on design systems

1. Design Systems
August 27, 2020

2. “Don’t just be a name. A name is not a brand. If a name
makes a promise and lives up to that promise anywhere in
the world, then it’s a brand.”
-- Horst Schulze
Cofounder, The Ritz-Carlton Hotel

3. “Don’t just be a name. A name is not a brand. If a name
makes a promise and lives up to that promise anywhere in
the world, then it’s a brand.”
-- Horst Schulze
Cofounder, The Ritz-Carlton Hotel
projectclarion.com

4. It Starts With Brand
“Don’t just be a name. A name is not a brand. If a name
makes a promise and lives up to that promise anywhere in
the world, then it’s a brand.”
-- Horst Schulze
Cofounder, The Ritz-Carlton Hotel

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

6. What is a Design System?
“A design system is a living system of guidelines, reusable code and
design assets, and tools that helps organizations deliver consistent, on-
brand experiences at scale and over time.”
-- Hack the Design System

7. What is a Style Guide?
A Style Guide is the documentation and guidelines of a specific
implementation of the Design System for a given brand or product.

8. What is a Pattern Library?
An organized set of related, reusable values, functions, and
components, often containing code examples, design guidelines,
coding standards, and use cases which are designed to create
consistency, efficiency, and quality in the product.

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

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

11. Benefits of a Design System
• Better Developer Experience (DX)
• Time save on designing and building modules
• Time saved on making site-wide changes
• Faster Feature Development and Product Launches
• Teamwork and Collaboration
• Reduce learning curve for new employees
• Better User Experience (UX)
• Brand Unity at Scale
• Visual and Behavioral Consistency
• Increase the quality of our products

12. "For every $1 spent on the design system
saved $3 in design and development effort.”
-- Ben Callahan
President, SparkBox

13. Things to Identify Up-Front
• Environmental Decisions
• Voice and Tone
• Performance Standards
• Accessibility Standards
• Technical Constraints
• SEO
• Set Meaningful Constraints
• Color
• Interactive States
• Animations
• Typography
• Fonts
• Media Queries
• Spacing
• Iconography
• Shapes and Borders

14. It’s too constraining…

15. It’s too constraining…
"Creativity thrives under intelligent constraints."
-- Carmine Gallo
Talk Like TED

16. Build Meaningful Abstractions
Flexible
Easy to
Use
Reliable

17. Some Technical Considerations

18. Development Tools
+

19. Development Tools

20. Questions?