Building a Design System: A Practitioner's Case Study
The Silver Bullet
Building a design system. The true story.
Role: CEO and Co-founder at UXPin. Design Ops team.
Background: UX Design & Psychology
Passion: Design and Development at scale. Product Strategy.
Design Ops. Design Systems.
The Full-Stack UX Platform
Agile UX in one place: design systems, prototyping, and documentation together
UXPin in a Nutshell
Mission: To streamline the product development process with the
power of design and collaboration!
Customers: +150 countries. Focus on enterprises (PayPal, Sapient…)
Team: 70 people. 2 oﬃces (Mountain View, CA and Gdansk, Poland)
Building a Design System
Why? What? How?
The Structure of a Design System
Color Palettes Typographic Scales Grid Deﬁnitions Icons & Assets
Templates Modules Components Elements
Design Principles Implementation Guidelines Editorial Guidelines
That’s not new! You've probably heard that many times before.
Non-extensive, subjective, history of Design Systems
Design Patterns. Elements of
A Pattern Language
ES6 JS Modules
Why this time Design Systems are going to reach scale.
Digital matters: 6/10 top 10 companies in the world are tech companies (Apple, Alphabet,
Microsoft, Amazon.com, Facebook, Alibaba).
Experience matters: Design was never more important. Business value of user experience is
Technology is ready: Web technology became modular (js modules, and libraries e.g. React,
CSS preprocessors, task managers...)
Is design ready?
How can you start building a design system?
1. Accept that building a Design System is
an ongoing process.
Make it part of your product development. Start building it now.
“A design system isn’t a project. It’s a product serving products.”
- Nathan Curtis
Design system is a process and therefore is
simultaneously always ready and never done.
Design system with one color deﬁned, properly named,
implemented and accepted by an organization is better
than a full static style guide.
2. Form a multidisciplinary design operations team.
Designers, engineers and content managers should run the DesOps house
and gradually solve problems of a product organization related to the
consistency of experience and eﬃciency of design/development process
3. Build your interface inventory
The Interface Inventory is a neatly organized box with all the pieces of your
product. It shows all the glaring inconsistencies and serves as a kick-oﬀ to
the process of building a design system.
Do you want to see a real interface inventory?
4. Build your building blocks
Step by step start standardizing your building blocks. Take colors, basic
properties, typography, iconography - improve it, organize it, document and
deliver to your product teams.
UXPin Color Palette
From a mess of 116 color variables to a systemic palette
Our Senior UI Architect counted all the instances
of speciﬁc color variables in code.
I created a spreadsheet matching new and old colors
Naming is Hard
Naming is diﬃcult, yet crucial. Keep one convention!
Primary/base colors and other properties:
Secondary/accent colors and other properties
@blue-lighten-15: lighten(@blue-base, 15%); // #4d98ff