Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Case Study: Experimenting with Design Systems
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Bermon Painter
April 04, 2018
Design
420
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Case Study: Experimenting with Design Systems
Bermon Painter
April 04, 2018
More Decks by Bermon Painter
See All by Bermon Painter
Behavioural Science + Product Innovation = ❤️
bermonpainter
0
610
Haciendo una inmersión profunda con el JAMStack y Vue.js
bermonpainter
0
380
Pensamiento de Diesño: Desarrollar Ideas a la Implementación
bermonpainter
0
350
Design Thinking: Ideas to Implementation
bermonpainter
0
710
Product Development with Vue.js and a Headless CMS
bermonpainter
0
470
Successfully Hire, Mentor, Retain and Lead Teams
bermonpainter
2
430
Crafting Successful UX Strategies
bermonpainter
0
1.3k
The Fallacy of Digital Transformation
bermonpainter
0
540
Design Thinking: Ideas to Implementation
bermonpainter
3
1.6k
Other Decks in Design
See All in Design
Jun Wei | Information Design & Presentation Portfolio
wjw100788
PRO
0
150
AI-Slopなデザインを生まないためのデザインプロセス戦略
takanorip
10
6.2k
PLATEAUで白い街を作る
aikautau
0
210
インターンから2年新卒フロントエンドエンジニアから見たサイボウズのアクセシビリティ
taku10101
0
180
富山デザイン勉強会_デザイン思考.pdf
keita_yoshikawa
2
240
【CEDEC2026】『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ~継承と挑戦を両立するデザイン手法~
cygames
PRO
4
5.4k
デザイナーがいない部署にハーネスを設計する
kenichiota0711
5
5.3k
Webデザイナー中田美穂_ポートフォリオ
omy
0
170
作品が生まれ続けるコミュニティデザイン ― 研究室でも会社でもないサードプレイス ― / designship26-iwaken
iwaken71
0
130
プレゼンスライド作成で意識していること
kimichan
0
140
自社プロダクトのUIをAIが再現するデザインビルドシステム
toy1618
0
1.3k
エンジニアでも捗る デザイナー的思考入門(bitA Edit 新ver)
tinykitten
1
630
Featured
See All Featured
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
1
450
Designing Powerful Visuals for Engaging Learning
tmiket
1
600
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
3.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
53
4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
2.1k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
750
Documentation Writing (for coders)
carmenintech
77
5.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8.4k
The agentic SEO stack - context over prompts
schlessera
0
970
Un-Boring Meetings
codingconduct
0
450
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
1
340
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
280
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.