Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Case Study: Experimenting with Design Systems

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Bermon Painter Bermon Painter
April 04, 2018
Design
390
1

Case Study: Experimenting with Design Systems

Avatar for Bermon Painter

Bermon Painter

April 04, 2018

More Decks by Bermon Painter

See All by Bermon Painter
Behavioural Science + Product Innovation = ❤️
Avatar for Bermon Painter bermonpainter
0
540
Haciendo una inmersión profunda con el JAMStack y Vue.js
Avatar for Bermon Painter bermonpainter
0
350
Pensamiento de Diesño: Desarrollar Ideas a la Implementación
Avatar for Bermon Painter bermonpainter
0
320
Design Thinking: Ideas to Implementation
Avatar for Bermon Painter bermonpainter
0
670
Product Development with Vue.js and a Headless CMS
Avatar for Bermon Painter bermonpainter
0
430
Successfully Hire, Mentor, Retain and Lead Teams
Avatar for Bermon Painter bermonpainter
2
390
Crafting Successful UX Strategies
Avatar for Bermon Painter bermonpainter
0
1.3k
The Fallacy of Digital Transformation
Avatar for Bermon Painter bermonpainter
0
490
Design Thinking: Ideas to Implementation
Avatar for Bermon Painter bermonpainter
3
1.5k

Other Decks in Design

See All in Design
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
Avatar for Takahiro Yamaguchi hiro93n
1
150
Accelerating performance improvement based on a software review evaluation matrix
Avatar for kitanosirokuma kitanosirokuma
0
170
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
2
720
hicard_credential_202601
Avatar for hicard hicard
0
210
ClaudeCodeでマーケターの課題を解決する
Avatar for 太田賢一 kenichiota0711
10
12k
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
520
kintone_aroma
Avatar for kintone kintone
0
1.8k
富山デザイン勉強会_デザイントレンド2026.pdf
Avatar for keita keita_yoshikawa
3
160
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
340
新規AIプロダクトで、事前に知るべきだった3つの壁 〜医療AIを1年間作って、従来の開発が通用しなかった話〜 / Three Walls in Building AI Products
Avatar for Takuya Shikichi shikichee
2
3.9k
「バイブコーディングって何？」から始まった、 AIとの一年間と、その先のこと
Avatar for 瀬戸英晴 seto
0
190
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.5k

Featured

See All Featured
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
100
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
510
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
320
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
340
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
870
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
110
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
180
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.2k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
390
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
470
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
300
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.5k

Transcript

  1. Case Study: Experimenting with Design Systems @bermonpainter | #cltdesign

  2. Tonight’s Agenda Contrast style guide vs. pattern library vs. design

    system Building your own Case study: Internal applications at Cardinal 1 2 3

  3. Style Guides Defines abstract styles in the form static documentation

    that describes how the design itself should be applied to a product or service.

  4. Style Guides Color Palettes Iconography Imagery Typography Typographic Scale Grid

    Definitions
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None

  12. Pattern Libraries A set of reusable components that are used

    across single or multiple products or services.

  13. Pattern Libraries Component Names Visual Representation Variations Use Cases Considerations

    Code Samples Templates
  14. None
  15. None
  16. None

  17. Design System Forms the foundation of a shared design language

    and allows the team to communicate shared rules and connections around how to build a product or service.

  18. Design Systems Style Guide Pattern Library Tools & Utilities Principles

    Rules
  19. None
  20. None
  21. None

  22. Design System Rules and Connections Style Guide Abstract Styles Pattern

    Library Reusable Components

  23. A style guide is an artifact of a design process.

    A design system is a living, funded project with a roadmap & backlog, serving an ecosystem. “ “ – Nathan Curtis

  24. PATTERN LIBRARY APP DESIGN SYSTEM

  25. PATTERN LIBRARY APP DESIGN SYSTEM APP

  26. PROSPECT METRE EVOKE DESIGN SYSTEM FULCRUM ENLIST

  27. None

  28. Fin.