How much design system do you really need

A design system is more than a collection of reusable elements. It holds together UI pattern libraries, compatible component code, basic interaction models; all documented and supported by brand guidelines.

Building such a robust system takes time and dedication from your team. It sure will benefit you in the long run, but only if there is a long run. Since there is no done state, it is hard to draw a line. You have to nurture it as your product (and technology) grows, while investing just the right amount of time.

In this article I’ll try to provide some actionable tips that you can safely start with.

Where to start?

Let’s assume you have a prototype or an MVP. Take the elements you use multiple times, separate them. Are they abstracted enough to be used elsewhere? Remove the unnecessary bits.

Does this newly separated element have any unique interaction? Can you remove it? You don’t want anti-patterns that you are not aware of.

Are there types or buttons? Are they aligned the same way on every instance of your components? Get it together. I’m all for smart solutions, but at this stage you only need to aim for consistency across your product.

Cover the states of this component. Although not all element can possibly yield a Done state, this task can still be time consuming, and might not worth it at first. So, go with the easy ones: Loading, Empty, Correct, Failed. Later you should also cover the missing ones: Incorrect, Some data, Too much data, Done.

People use mobile a lot. Make sure your apps are responsive and — at the very least — usable on all medium.

Separate the colors, use named variables. Red means nothing; Dark Cherry Red of Awesome Inc. on the other hand does ring a bell. Too many shades of red? Canonize. Make sure the color combinations pass the color contrast test, you want your content to be accessible.

Cleanup the code, agree on a coding style. Make your elements pass said style.

In an optimal word, all of these would be documented, but let’s not kid ourselves. Document parts you’ll be using the most. Colors and type, extend it later. In order for any of this to be beneficial, you also have to communicate all of the above, as well as making it accessible to anyone at any given time.

Ok, but why?

The purpose of a design system is to help you ship faster. Removing bad patterns, and forced, complicated interaction will help you prototype and iterate faster, while keeping your product consistent and useful.

A single source of truth — of any level — gives you clarity, and drives the common understanding of a problem you try to solve.