😶🌫️Demystifying😶🌫️Design Systems
/salvador-sc
salvasc.dev
Who?
- Salvador Sánchez Campos
- Frontend Developer at King
About me:
- I <3 Design Systems
- I play 🤽 as a goalkeeper
- I'm a 🫖 person.
Side Projects
Before we begin...
slido.com
CODE: 8674976
/salvador-sc
salvasc.dev
What is a design system?
A design system is a pattern library that serves as a single source of truth for design and code related components. Customers for design systems are: coders, designers and end users. The biggest advantage you gain when having a design system is offering consistency in quality, accessibility, reusability, inclusivity, reliability, etc.
Why does it matter?
Designs systems are important because they offer a very good foundation for good practices. Their own existence is tied to great ___ and this means they are usually a good choice.
So… Why does it matter? Who do they serve?
- For developers, it makes it easier to develop, usually offering already done components that follow your brand’s identity and tailored to your needs*
- For designers, …
- For users, it provides you the best experience down to the component level, where everyone has thought what would YOU need in this button, this dropdown, this everything.
What is a design system?
A pattern library that serves as a single source of truth for design and code related components, setting standards and ensuring consistency across a brand's digital ecosystem.
/salvador-sc
salvasc.dev
Not just a library of buttons, but a language of care.
What will we cover?
💡 Why Design Systems matter (and who they serve)
⚙️ How they help you scale quality, not just UI
🌍 What it means to build for everyone — not just the 99%
🚀 How to get your team excited and involved
🧩 Design System Concepts
/salvador-sc
salvasc.dev
Why Design Systems matter
(and who they serve)
/salvador-sc
salvasc.dev
Developers
Designers
Product
Users
💻 🧩
🧠✨
📦 🧭
🙋♀️ 🙋♂️
Company A
3x more effort
Team 1
Develop a new button to submit
Team 2
Develop a new button but square
Team 3
Develop a new button to submit
🤦♀️
⚙️🔄
⚙️🔄
⚙️🔄
🤦♂️🤦♀️
Company B
1x effort → ∞ impact
DS Team changes button ⚙️🔄 It propagates to all teams
Team 1
Develop a new button to submit
Design System Team
Implements the button into DS
Team X
Uses button from DS
Advantages of a DS?
It offers consistency in:
quality, accessibility, reusability, inclusivity, reliability, etc.
Effort
Time
Without DS
With DS
How do they help you scale quality?
/salvador-sc
salvasc.dev
Design systems make quality inevitable.
They embed rules, patterns, and constraints at the smallest level of UI creation
Consistency isn’t optional — it’s built in, not an afterthought.
🧠
✏️
⚙️
✅
→
→
→
Thinking
Designing
Coding
Testing
Intermission
/salvador-sc
salvasc.dev
slido.com
CODE: 8674976
What it means to build for everyone
Not just the 99%
Design for inclusion.
Not just the average.
/salvador-sc
salvasc.dev
Accessibility: The Absence of Barriers
Accessibility isn’t just for people with disabilities.
Accessibility is for everyone.
Accessibility in Action
Designing your app to be usable with one hand helps:
-
A parent holding a child
-
A commuter holding a coffee (or even better, tea)
-
Someone with a temporary injury
Accessibility makes products more human, not just compliant.
The less obvious
Accessibility is also a language. 🗣️
Using complex jargon, unexplained acronyms, or ambiguous words creates cognitive barriers.
Clear language = inclusive experience.
Fun fact 🔍
The Web Content Accessibility Guidelines (WCAG) state that in order to be accessible, a site should be usable at 200% zoom.
Fun fact 🔍
The Web Content Accessibility Guidelines (WCAG) state that in order to be accessible, a site should be usable at 200% zoom.
Building for 100%
Standards and Beyond
- a11yproject.com — community-driven accessibility resources.
- European Accessibility Act — shaping inclusive digital laws.
Building for everyone means considering every way a person might see, hear, read, or touch your product.
Where to start?
As always in tech... It depends
/salvador-sc
salvasc.dev
Identify the need
Duplicates
🧩
🧩
🧩
🧩
Inconsistencies
≠
Design debt
🎨
💰
📉
Sell it
It's not a project, it's an investment
Find customers
🕵
Make a small Minimum Viable Product
🌱
The tools that power it
Design tools
Figma
Supernova.io
Knapsack
Knapsack
Zeroheight
Knapsack
The tools that power it
Development tools
...
Storybook
Style Dictionary
🃏
Start lean, scale smart
Development tools
- Shared colour and spacing token set
- 2-3 high value components
- Button
- Input
- Modal
- A place to document usage and principles
Grow it organically through adoption, not mandates
Start lean, scale smart
Shared colour and spacing token set
Start lean, scale smart
Grow it organically through adoption, not mandates
Shared colour and spacing token set
2-3 high value components
A place to document usage and principles
📜
Share it!
adkhajsbdhjasvkhdj
🧠
✏️
⚙️
✅
→
→
→
Develop
Push to version control system
CI/CD Automation & Publish
Share!
How to get your team excited and involved
/salvador-sc
salvasc.dev
Getting the team involved
- Involvement drives adoption
- Collaboration builds ownership
- The more people contribute, the stronger the system becomes.
🧑🎨
👩💻
🧙♂️
🧑🔧
🐒
Involve them early
People support what they help create
🧪
📢
📨
Choose and vote a name
Celebrate publicly
Early-access tests
Demo time!
🏝️
🎆
👾
Live demos
Innovation sessions
Sandbox environment
Transparency builds trust
Be open
To feedback
Ideas
Changes
🪄
💡
DS Concepts
/salvador-sc
salvasc.dev
Design Tokens
Design tokens are a tech-agnostic way to store variables.
We use tokens instead of hard-coded values to ensure better UI consistency across platforms.
var(--color-primary)
var(--color-secondary)
Font size
Gaps
Spacings
Border radius
Transitions
Design Tokens
Design tokens are a tech-agnostic way to store variables.
We use tokens instead of hard-coded values to ensure better UI consistency across platforms.
Project A
Project B
Project C
Project D
Design Tokens
Design tokens are a tech-agnostic way to store variables.
We use tokens instead of hard-coded values to ensure better UI consistency across platforms.
var(--color-primary)
var(--color-secondary)
Design Tokens
Design tokens are a tech-agnostic way to store variables.
We use tokens instead of hard-coded values to ensure better UI consistency across platforms.
Project A
Project B
Project C
Project D
Web Components
Framework agnostic
Adaptive colours
🎨🖌️
🌞🌝
🏠🏢
Tip: Business Logic ≠ Design System
If a component includes business logic, it stops being a neutral Design System element and becomes an opinionated component.
Ownership of such components should remain within the team that uses them, not the system itself.
The Design System should focus on pure UI logic, keeping itself flexible and broadly applicable.
Business Logic ≠ Design System
- Opinionated components remain within the team that uses them.
Design Systems focus on UI Logic
🧠
❌
Progressive Enhancement
Design for access first. Delight second.
All users
Modern browsers
Enhanced ✨UX✨
Essential
🪨 UX 🗿
Extras
/salvador-sc
salvasc.dev
📰
/salvador-sc
salvasc.dev
Design Systems in the Wild
Design Systems in the Wild
Design Systems in the Wild
And more...
- My own notes
- The complete Design System by Varya Stepanova
- Atomic Design
- Design systems for developers (Storybook tutorial)
- Component Driven User Interfaces (website with how-tos and why's)
- Digital e-book: Programming Design Systems
/salvador-sc
salvasc.dev
Thanks for everything!
Questions and Answers time! :)
/salvador-sc
salvasc.dev
Slides
Feedback
/salvador-sc
salvasc.dev
slido.com
CODE: 8674976
Demystifying Design Systems
By Salvador Sánchez Campos
