Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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
360
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
500
Haciendo una inmersión profunda con el JAMStack y Vue.js
bermonpainter
0
320
Pensamiento de Diesño: Desarrollar Ideas a la Implementación
bermonpainter
0
280
Design Thinking: Ideas to Implementation
bermonpainter
0
640
Product Development with Vue.js and a Headless CMS
bermonpainter
0
410
Successfully Hire, Mentor, Retain and Lead Teams
bermonpainter
2
360
Crafting Successful UX Strategies
bermonpainter
0
1.2k
The Fallacy of Digital Transformation
bermonpainter
0
460
Design Thinking: Ideas to Implementation
bermonpainter
3
1.5k
Other Decks in Design
See All in Design
プロダクトリニューアルと同時に進める初めてのデザインシステム
techtekt
PRO
0
160
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
280
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
470
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
120
【最新】マズロー安達の弟子実績(1期-6期の37人分)
maslow_akkun
0
3.3k
7 Core Values of Round-L
wired888
0
2.4k
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
110
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
610
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
170
OSO2025-マサカリと太陽:伝え方の情報デザイン
majimasachi
0
480
Vibe Coding デザインシステム
poteboy
3
1.4k
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
130
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
What's in a price? How to price your products and services
michaelherold
246
12k
Statistics for Hackers
jakevdp
799
220k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Optimizing for Happiness
mojombo
379
70k
Side Projects
sachag
455
43k
A designer walks into a library…
pauljervisheath
209
24k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Faster Mobile Websites
deanohume
310
31k
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.