Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Case Study: Experimenting with Design Systems
Search
Bermon Painter
April 04, 2018
Design
1
380
Case Study: Experimenting with Design Systems
Bermon Painter
April 04, 2018
Tweet
Share
More Decks by Bermon Painter
See All by Bermon Painter
Behavioural Science + Product Innovation = ❤️
bermonpainter
0
510
Haciendo una inmersión profunda con el JAMStack y Vue.js
bermonpainter
0
330
Pensamiento de Diesño: Desarrollar Ideas a la Implementación
bermonpainter
0
290
Design Thinking: Ideas to Implementation
bermonpainter
0
650
Product Development with Vue.js and a Headless CMS
bermonpainter
0
420
Successfully Hire, Mentor, Retain and Lead Teams
bermonpainter
2
380
Crafting Successful UX Strategies
bermonpainter
0
1.3k
The Fallacy of Digital Transformation
bermonpainter
0
470
Design Thinking: Ideas to Implementation
bermonpainter
3
1.5k
Other Decks in Design
See All in Design
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
130
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.7k
Goodpatch Tour💙 / We are hiring!
goodpatch
31
990k
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
270
What makes a great Director?
_limex_
0
360
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
3
2.9k
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
9
2.8k
Findyのプロデチームの 歩みとこれから
satty9556
0
360
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
mixi_design
PRO
0
140
Figmaレクチャー会Part2 もっと使いこなす編@千株式会社 社内勉強会
designer_no_pon
0
190
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.4k
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
0
330
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3k
Prompt Engineering for Job Search
mfonobong
0
120
Discover your Explorer Soul
emna__ayadi
2
1k
How to Ace a Technical Interview
jacobian
281
24k
My Coaching Mixtape
mlcsv
0
13
Build your cross-platform service in a week with App Engine
jlugia
234
18k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
115
91k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.2k
[SF Ruby Conf 2025] Rails X
palkan
0
560
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
850
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Transcript
Case Study: Experimenting with Design Systems @bermonpainter | #cltdesign
Tonight’s Agenda Contrast style guide vs. pattern library vs. design
system Building your own Case study: Internal applications at Cardinal 1 2 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.
Style Guides Color Palettes Iconography Imagery Typography Typographic Scale Grid
Definitions
None
None
None
None
None
None
None
Pattern Libraries A set of reusable components that are used
across single or multiple products or services.
Pattern Libraries Component Names Visual Representation Variations Use Cases Considerations
Code Samples Templates
None
None
None
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.
Design Systems Style Guide Pattern Library Tools & Utilities Principles
Rules
None
None
None
Design System Rules and Connections Style Guide Abstract Styles Pattern
Library Reusable Components
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
PATTERN LIBRARY APP DESIGN SYSTEM
PATTERN LIBRARY APP DESIGN SYSTEM APP
PROSPECT METRE EVOKE DESIGN SYSTEM FULCRUM ENLIST
None
Fin.