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
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
muture
PRO
0
350
文化のデザイン - Soft Impact of Design
atsushihomma
0
110
kintone_aroma
kintone
0
1k
ユーザー像を「みてね」らしく可視化する 家族アルバムみてねUXリサーチチームの取り組み
mixi_design
PRO
3
590
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
830
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
0
250
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
140
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
700
DESIGNEAST 2025 A-3
_kotobuki_
0
120
Diverse Design Team Deck
diverse
0
210
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
designer_no_pon
0
750
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
1
410
Featured
See All Featured
Information Architects: The Missing Link in Design Systems
soysaucechin
0
710
Google's AI Overviews - The New Search
badams
0
870
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
61
47k
Between Models and Reality
mayunak
0
150
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
90
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
31
Applied NLP in the Age of Generative AI
inesmontani
PRO
3
1.9k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
1.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
0
1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.5k
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.