https://s3-us-west-2.amazonaws.com/secure.notion-static.com/670de237-a3df-44bf-9970-df6a78132fd0/Untitled.png

What are Design Systems for?

If you and your team aren’t using a Design System (DS), please open the latest project in your favorite design software, and count the myriad of shades of your primary color and grays, the number of fonts you’ve used and the different sizes your primary button appears in.

Go on, I can wait.

Most probably, you can shave off about %30 of the redundant styles and consolidate your design to be more consistent, lean and reusable.

When we create reusable styles and components, we essentially create a consistent visual language that we can rely upon when the product we’re working on inevitably scales.

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. — From the Design Systems Handbook, Design Better

Designing our Design System

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b314581c-6522-4732-8471-e6d4ac9d22a2/Untitled.png

In the previous part, we’ve established our basic unit — 8pt. We’ll use that unit in our smallest components as well as in our largest and more complex components. We also defined Typography, Iconography and Layout; so apart from Layout, I won’t be delving too deep on these two issues here. Here’s what we’ll be going going over: