Building a lean and sustainable design system

Date
Jun 21 2024
Author
Ivan Bjelajac

With the advent of design tools oriented towards digital product design, it’s has become so easy to get carried away with expanding and evolving design systems. Half a day of work by a designer can create huge implications in the mid and long term.

Design systems get bloated when there’s no resources or will to manage them properly. We’ve tackled quite a few of those and the general consensus in our studio is the leaner a system is, the better. It takes skill, experience and discipline to properly handle a pared-down system, but the benefits can be amazing if done right.

Start off lean and then evolve

We wanted to create an example of a lean and sustainable design system built on top of very basic building blocks. It has a maximum of 4 primary colors and 5 steps in the type scale. This is a great starting point for startups. It can handle most situations and it’s easy to achieve brand uniformity across multiple different areas like social, product or marketing pages.

We’ve created a landing page concept to showcase how easy it is to build something engaging and interesting when working with a reduced number of building blocks. It turns out it’s easy if you have a good grid system in place and healthy constraints for type and color. The advantage of a small system is that there isn’t much to overthink about. You can focus on presenting what matters, and leave the constrained system to take care of itself, so to speak. If a situation arises that would require more nuance in the design, it’s easily enough done by playing with spacing and layouts.

Design constraints are not only useful for smaller orgs, but I’d say even a necessity. It streamlines what can potentially end up being a total mess in 6 to 12 months.

A sustainable design system with long term in mind

What about a SaaS product? Can a complex user interface be built out using only a couple of building blocks? Can it be made sustainable? Absolutely. The trick is to again, use a grid, and not to overthink everything.

A sustainable visual identity can be plugged into frameworks like Bootstrap, where you can get a a very solid framework to build out from, and subsequently upgrade on top of. The components aren’t overwhelming and can be customized fairly quickly. There isn’t a ton of bloat that’s hard to customize (Looking at you Material UI). No unused styles or components. Everything has it’s purpose, and is a good base to build from as your startup grows.

Guess what happens if the brand suddenly needs to change or evolve? It’s very easy to tweak the few building blocks and still keep A LOT of the work that’s already developed and in production.

Sustainability is a topic not used quite often in the product design space, but truly, designers CAN make a difference just by being smart avoid being wasteful. By thinking about the long term we’re investing in a more stable and better future for ourselves and our brand/product.

Let’s work together!

Set up a free discovery call with our co-founders, Ivan and Luka.
Book a call
Book a call