Design System based on the 8pt Grid

This article is the 2nd in a two part series — to the previous chapter in which I demonstrate how to establish an 8pt grid.

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

You can read all about the value of Design Systems, in Invision’s excellent eBook — Design Systems Handbook. The first two chapters will help you…