Design Systems Explained Simply
Building Better Together
👋 Get weekly insights, tools, and templates to help you build and scale design systems. More: The Design System Guide / Podcast / My Linkedin
Hello!
New to Design Systems? Or is your company just building one? Or maybe you're curious what the fuss is about.
That's OK. This is part one.
If you're here, you've likely encountered some of these challenges:
Designers creating the same button for the 100th time
App looking different on the phone vs desktop
Teams not talking to each other
Hard to understand what design system is
That’s why I like to compare design systems to making a cake.
At first, you're just trying to make something edible:
Throw ingredients together
Hope it tastes good
Fix it if it doesn't
That's fine when you're making one cake. Then, your business grows.
Suddenly, you need 1000 cakes.
Now you need:
A tested recipe everyone follows
The right equipment in place
Trained bakers who know the process
Quality control
A way to train new bakers quickly
Design systems work the same way.
In the start, each designer makes their own buttons, every developer codes their own way, and everyone has their own "recipe".
It works... until it doesn't.
Your "cakes" start looking different:
Website buttons don't match app buttons
Everyone's using different "ingredients" (colors)
New "bakers" (team members) make things their own way
Nobody knows the "recipe" (documentation)
Now, let’s do a quick math:
Spending 2.5 hours per week x 52 weeks x $50 per hour x 10 designers = $65,000 per year just for repeating one simple task (at least!).
What a design system brings is:
A master recipe book where:
Every ingredient is measured
Every step is documented
Every baker follows the same process
Every cake looks and tastes the same
And just like a good recipe book, it keeps getting better:
New recipes get added
Old ones get improved
Everyone learns from mistakes
The whole kitchen runs smoother
So, what is a design system, really?
At its core, a design system is a set of building blocks and standards that help keep the look and feel of products and experiences consistent. Think of it as a blueprint, offering a unified language and structured framework that guides teams through the complex process of creating digital products. - Chad Bergman (Figma)
Good design systems aren't just a collection of components. They tell the story of how your company makes digital products. - Amy Thibodeau, Former Director of Content Design at Shopify
A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels. - Nielsen Norman Group
Design systems are always evolving, and the way you create and maintain them should evolve too." - Diana Mounter, GitHub's Design Infrastructure Lead
A design system isn't a project. It's a product, serving products. - Nathan Curtis, Founder of EightShapes
A design system is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product." - Audrey Hacq, UX Designer at Airbnb
With design system you get:
Speed (faster launches, quicker changes)
Quality (consistent experience, fewer mistakes)
Money (less rework, better efficiency, higher ROI)
Happy teams (better communication, clearer process)
You’re not a designer or developer? This is still for you!
Design systems might seem like designer-developer magic, but they make your job easier, too. Think of it as your company's brand recipe book:
Professional-looking decks
Right colors, every time
Customer support uses the right icons
Consistent product shots
Up-to-date brand materials
Matching report templates
Brand-aligned documents
Takeaway
A design system is your company's recipe book.
Keep it updated.
Share it widely.
Cook together.
Enjoy. 👩🍳
Want to dive deeper?
Into Design Systems: Community, conference, meetups:
Tokens Studio (Slack community)
Tokens Studio (Tool)
My favourite 15 design systems
Helpful articles I gathered through the years
📘 Glossary
Component - A piece of your interface that you can reuse. Like a light switch in your house.
Design Token - Nicknames for your design decisions.
Component Library - A box full of your favorite pieces. When you need something, just reach in and grab it.
UI (User Interface) - The things people click, tap, and type into. Like the dashboard of a car.
UX (User Experience) - How it feels to use your thing. Like a door that opens the way you expect.
Atomic Design - Start with tiny bits, then merge.
Figma - A digital whiteboard where everyone can draw together.
Handoff - When designers give their work to developers, with clear instructions.
Documentation - A cookbook that explains how everything works.
Accessibility - Making sure everyone can use it, no matter their situation.
Version Control - Like saving different drafts of your work, so you can go back if needed.
Prototyping - Building a rough version to test your ideas. Like sketching before painting.
Responsive Design - Your design adjusts to fit any screen.
Grid System - Invisible lines that help keep everything tidy.
Branding - The personality of your product. What makes people recognize it's yours.
Technical Debt - The price you pay later for taking shortcuts now.
Scalability - Building something that can grow without breaking.
Consistency - When everything works the same way everywhere.
Modularity - Building with pieces that snap together like Lego.
Style Dictionary - Turns your design choices into code that developers can use.
Usability Testing - Watching real people use your thing to see where they get stuck.
Governance - Rules to keep everything running smoothly.
Onboarding - Teaching new people how to use your system quickly.
Framework - Pre-built pieces that give you a head start.
Adaptability - How well your system handles change.
Cross-Platform - Works everywhere: phones, computers, tablets.
Visual Hierarchy - Arranging things so the important stuff catches your eye first.
💎 This Week’s Community Gems
Scalable Design Tokens Set (FREE)
Simplify the overwhelming process of setting up design tokens with a clear, structured starting point for a scalable design system.
by Phillip Jeroma
🔗 Link
Being in design systems for 10 years
Jeremy Barnes (Group Design Manager, Intuit Design Systems)
🔗 Link
Design Systems are Infrastructure: The evolution of design systems in the age of AI
Sam Anderson (Director of Design at Intuit)
🔗 Link
❤️ People to follow
This week, I would like to introduce you to Pelin Kenez who is a co-founder of Zeplin and Omlet.
She believes software should feel like magic - making hard things easy and bringing people together. She helped create Zeplin, which lets designers and developers work in harmony (loved by maaany people). Now, with Omlet, she and her team are solving another crucial challenge: helping dev teams understand how components are used across their codebases, making it easier to maintain clean code and measure design system impact.
If you have any questions, email me or add them to the comment below. 🙌