A hands-on session to build your first design system from scratch.
Tokens, components, patterns — and how they connect.
Colors, typography, and spacing that scale.
Buttons, cards, inputs — built for reuse.
Write guidelines that help your team, not confuse them.
What is a design system? Anatomy, benefits, and when you need one.
Hands-on: Build your color, type, and spacing scales.
Hands-on: Build buttons, cards, and form elements.
Write docs people actually read. + Q&A.
More than a style guide. More than a component library. It's a living ecosystem.
The atomic values: colors, fonts, spacing, shadows
Reusable UI building blocks: buttons, inputs, cards
Composed solutions: forms, navigation, layouts
A good design system pays dividends across your entire organization.
Stop reinventing the wheel. Grab components and go.
One source of truth = no more "which blue is it?"
Shared language between design and engineering.
New team members ramp up faster. Quality stays high.
Open your app (or a competitor's). Screenshot 5 different buttons. How many variations exist?
The smallest, most fundamental decisions in your system. Everything else builds on these.
Brand, neutral, semantic (success, warning, error)
Font families, sizes, weights, line heights
Margin, padding, gaps — use a scale (4px, 8px, 16px...)
Create a complete color token set for a fictional app of your choice.
Reusable UI pieces that consume your tokens. The LEGO bricks of your interface.
Using your tokens, create a production-ready button with multiple variants and states.
A design system is only useful if people can find and understand it.
Usage guidelines, do's and don'ts, code examples, accessibility notes.
Storybook, Notion, Zeroheight, or your own site. Pick one and commit.
Outdated docs are worse than no docs. Build update processes.
designbetter.co/design-systems-handbook
amzn.github.io/style-dictionary — Token management tool
storybook.js.org — Component documentation
designsystemsrepo.com — Examples from real companies
Thanks for participating! Let's discuss what you've learned.
📧 workshop@designsystemslab.com
🐦 @designsystemslab