At the Engage User Group conference in Belgium, our global head of design Fredrik Danielsson, explained how design systems can bring simplicity to complex enterprise software deployments.

2. What is a design system
and why do I want one?

3. • What is it
• Why
• How do I get started

4. “Shared (design) language”
“a series of components that can be
reused in different combinations”
“Styleguide”
“Library of reusable
components and patterns”
“a set of connected patterns and shared
practices, coherently organized to serve the
purposes of a digital product”

5. Bootstrap

6. Material

7. A design system is your
organizations design language
mixed with conventions. Its built
for your particular needs

8. Lightning Design System (Sales Force)

9. Polaris (Shopify)

10. DLS (AirBNB)

11. Carbon (IBM)

12. HCL Design System

13. So, Why are all these companies
investing in design systems?
Efficiency
• Creates a unified language so anyone can talk about it.
• Developers and product owners becomes lego builders.
• Reduce bottlenecks.
• Maintainable and scalable.

14. So, Why are all these companies
investing in design systems?
Familiarity
• Human minds crave consistency. We are pattern machines.
• A user can use previous experience (aka what they learnt
elsewere)

15. How

16. Customizing a system

17. Is it a cost or investment?
Make sure you know what you are purchasing
Ergonomics Branding

18. Don’t fight the system
Some people have a very strong opinion of how they want
things to look and behave. In general it is a bad idea to try
to change the behavior and general layout of the system.

19. Review your existing systems.
Screenshot components and patterns
and lay them out on a board.

21. Categorize them and try to pick one
pattern and stick to it
save/cancel, dialogs, tabs, search…

23. Name patterns and components to get
a common naming scheme. Helps a lot
in communication and documentation.
Look at existing design systems for inspiration

25. Decide beforehand what you want to
customize. Skinning can be very
addictive

26. Start with low hanging fruits.
These will get you a long way
• Colors
• Typography
• Buttons

27. Continue with iconography.
Ideally, You want all icons to look and mean the same
between all your applications. (We struggle with this)

28. If possible, use a CSS preprocessor that
allows you to use variables. Or use CSS
Custom Properties (“CSS Variables”)
Define variables for all colors and font
properties

29. :root {
--button-background-color: green;
--button-text-color: white;
--font-weight-bold: 700;
}
.my-button {
padding: 4px 8px;
background-color: var(--button-background-color);
color: var(--button-text-color);
font-weight: var(--font-weight-bold);
}

30. Style leakage
• When doing overrides, be aware of style leakage.
• Pay attention to all declarations you’re NOT setting

35. https://tiny.cloud
fredrik.danielsson@tiny.cloud