What is a design system?

a Design system is a formal way of documenting solutions to common design problems. Design systems are a universal resource to align best practices, describe the elements of good designs, and most importantly, provide a repository so that other people can easily reuse these solutions. Why invent the wheel when a perfectly good one already exists?

Modern product teams rely on design systems to quickly get new designers & engineers up to speed on brand nuances, capture collective wisdom across time and people, provide teams with a common language, eliminate wasted time spent on “double work,” and ensure the end user gets a predictable experience no matter the medium or designer/engineer.

How do you know when it's time for a design system?

If you're a fast-growing startup with a growing team and multiple interfaces or large organization with disjointed legacy interfaces, it's a good time to consider a design system.

The process of introducing a design system

Many teams start out with an off the shelf UI framework or design and extend upon it without thinking of it as a system. Teams then quickly learn that they've outgrown this way of shipping and maintaining interfaces and need to introduce a new one. a Design system is more than the sum of its parts, it's a culture shift that requires a new approach.

What you'll get.

Reference Site
The home of your design system, typically a URL that displays the full component library from a single atom to full templates, a set of guidelines, icon library, prototyping playground and documentation on how to use everything in your production apps.
Set of Reusable Design Tokens
Single source of truth & technology agnostic tokens that can be imported and used wherever you need.
Common Design Tokens:
• Color
• aA Font Sizes
• Border Radius
• ↔ Breakpoints
• [ ] Spacing Units
• Shadows
Bespoke Component Library
One of two main ingredients of any design system, a component library — also referred to as a pattern library — is a collection of components or patterns which can be used as the building blocks to prototype & build interfaces, think buttons, typography, modals, etc.
Component Breakdown:
• Atoms
• Molecules
• Organisms
• Templates
• Pages
Read More About Atomic Design →
Pilot Project/s
A product (or more) designed to be a proof-of-concept for the efficacy of your shiny new design system. This can be a rebuild of your existing products or a completely new one.
Coaching & Documentation

v1 is just the start, I'll give your team everything they need to build with and extend on the design system.