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
400
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
570
Haciendo una inmersión profunda con el JAMStack y Vue.js
bermonpainter
0
360
Pensamiento de Diesño: Desarrollar Ideas a la Implementación
bermonpainter
0
330
Design Thinking: Ideas to Implementation
bermonpainter
0
680
Product Development with Vue.js and a Headless CMS
bermonpainter
0
440
Successfully Hire, Mentor, Retain and Lead Teams
bermonpainter
2
400
Crafting Successful UX Strategies
bermonpainter
0
1.3k
The Fallacy of Digital Transformation
bermonpainter
0
520
Design Thinking: Ideas to Implementation
bermonpainter
3
1.6k
Other Decks in Design
See All in Design
Frontier
rwang05
0
170
Design dependencies
teba_eleven
0
130
2026_01_07_3DプリントはじめましたLT.pdf
hideakitakechi
0
220
20260309_3月ICTデザイン勉強会_地域創生2.0
a2k
0
140
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
a2k
1
220
PAMPHLET.pdf
mhand01
0
1k
つくり方を変えていく | change-how-we-build
mottox2
2
1.3k
where_imagination_ends_ai_begins.pdf
r5ni4
0
150
再設計される業務 - AIにより再設計される "デザインワークフロー" / AI Ops Lab #2 Redesigned orkflows
kgsi
0
740
デザインとフロントエンドの境界が融ける Claude Code × Figma
littlebusters
2
3.1k
Drawing for Animation
lynteo
2
310
改正JISを見据えた、企業のアクセシビリティ対応ロードマップ
securecat
1
410
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
400
Building a Scalable Design System with Sketch
lauravandoore
463
34k
How to build a perfect <img>
jonoalderson
1
5.7k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
480
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
Accessibility Awareness
sabderemane
1
150
Visualization
eitanlees
152
17k
Unsuck your backbone
ammeep
672
58k
Everyday Curiosity
cassininazir
0
240
Facilitating Awesome Meetings
lara
57
7k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
870
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.