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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Bermon Painter
April 04, 2018
Design
1
390
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
530
Haciendo una inmersión profunda con el JAMStack y Vue.js
bermonpainter
0
340
Pensamiento de Diesño: Desarrollar Ideas a la Implementación
bermonpainter
0
310
Design Thinking: Ideas to Implementation
bermonpainter
0
660
Product Development with Vue.js and a Headless CMS
bermonpainter
0
430
Successfully Hire, Mentor, Retain and Lead Teams
bermonpainter
2
390
Crafting Successful UX Strategies
bermonpainter
0
1.3k
The Fallacy of Digital Transformation
bermonpainter
0
480
Design Thinking: Ideas to Implementation
bermonpainter
3
1.5k
Other Decks in Design
See All in Design
CULTURE DECK/Marketing Director
mhand01
0
530
2026年、デザイナーはなにに賭ける?
0b1tk
0
510
Crisp Code inc.|ブランドガイドライン - Brand guidelines
so_kotani
1
320
AIエージェントが対話的なUIを返す!MCP−UIで変わるユーザ体験
daitasu
1
160
インハウスデザイン組織で挑む自社ブランディング
mixi_design
PRO
0
110
2026の目標「もっと定量的に事業、会社へ貢献する!」
yuri_ohashi
0
720
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
2
660
【pmconf2025】PdMの頭の中を見える化する体験構造図
kamechi7222222
1
2k
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
3
3.2k
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
mkasumi
0
1.1k
Spacemarket Brand Guide
spacemarket
2
220
AIでデザインをつくる:基礎編
kenichiota0711
3
2.6k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
ラッコキーワード サービス紹介資料
rakko
1
2.5M
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
79
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
1
1.1k
The SEO Collaboration Effect
kristinabergwall1
0
380
Side Projects
sachag
455
43k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
850
Unsuck your backbone
ammeep
672
58k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
97
Practical Orchestrator
shlominoach
191
11k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.3k
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.