😶‍🌫️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

• ​Quinipolo.com
• salvasc.dev
• Extension disabler for localhost

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

Company B

Advantages of a DS?

It offers consistency in:
quality, accessibility, reusability, inclusivity, reliability, etc. 

Time

Without DS

With DS

How do they help you scale quality?

/salvador-sc

salvasc.dev

Design systems make quality inevitable.

Consistency isn’t optional — it’s built in, not an afterthought.

🧠

✏️

⚙️

✅

→

→

→

Thinking

Designing

Coding

Testing

Intermission

/salvador-sc

salvasc.dev

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?

/salvador-sc

salvasc.dev

Identify the need

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

The tools that power it

Development tools

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

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)

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

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

🧠

❌

Progressive Enhancement

Design for access first. Delight second.

All users

Modern browsers

Enhanced ✨UX✨

Essential
🪨 UX 🗿

Extras

/salvador-sc

salvasc.dev

Design System Podcast

Building a Design System for Scalable Fintech Growth

📰

/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

Feedback

/salvador-sc

salvasc.dev