Slides to accompany the CodeLand 2022 talk Design Systems for Developers by Kathryn Grayson Nanz.

1. Design Systems
for Developers
@kathryngrayson
•
#CodeLand

2. Hello!
I’m Kathryn Grayson Nanz
(@kathryngrayson)
● Developer Advocate for
KendoReact at Progress
● Helping designers and
developers make cool
stuff together
● BFA Studio Arts,
concentration Graphic
Design
● Just wanted to learn how
to edit HTML email
templates and ended up a
front-end engineer
@kathryngrayson
•
#CodeLand

3. Design
Systems
are for
Developers,
too!
@kathryngrayson
•
#CodeLand

4. A collection of interconnected visual
elements, organized and
documented for easy reference.
What is a
Design System?
@kathryngrayson
•
#CodeLand

5. Providing visual and language
consistency by offering designers &
developers a single source of truth.
What’s the
purpose of a
Design System?
@kathryngrayson
•
#CodeLand

6. Visual
Consistency
@kathryngrayson
•
#CodeLand

7. Language
Consistency
@kathryngrayson
•
#CodeLand
Blue!

8. What’s in a
Design System?
@kathryngrayson
•
#CodeLand

9. The very smallest parts of a design system.
Design Tokens
@kathryngrayson
•
#CodeLand

10. A cohesive set of icons.
Icon Libraries
@kathryngrayson
•
#CodeLand

11. A collection of every component used in your app.
Component Libraries
@kathryngrayson
•
#CodeLand

12. Guidelines and structure for page layouts.
Grid Systems
@kathryngrayson
•
#CodeLand

13. Downloadable brand assets and documentation.
Style Guides
@kathryngrayson
•
#CodeLand

14. The voice for the copy in your app.
Tone-of-Voice Guides
@kathryngrayson
•
#CodeLand

15. CREDITS: This presentation template was
created by Slidesgo, including icons by
Flaticon and infographics & images by Freepik
Let’s Design!
@kathryngrayson
•
#CodeLand