How to nurture your design system

Jennie Lindell
Trine Blog
Published in
4 min readMay 15, 2019

“A system is a group of interacting or interrelated entities that form a unified whole.” — Our dear friend Wikipedia

With this definition it’s almost impossible NOT to have a design system, no matter if you deliberately created one or not. The system can of course be more or less complex, and scale from complete chaos to hyper-organised.

Even though design systems exist in most design fields, it has become synonymous with digital product design. The great thing about digital design is that it can evolve. Code can and should change, paper cannot.

Airbnb, Sketch, Uxpin, Invision — all very digital-product-designy words

Design systems, the universe and everything

I’m guessing I’m not the only one out there with a slight terminology confusion. Pattern library, Style guide, Brand, Design system… What is the difference? I gave up and created my own definitions.

The Design system is always there, if you intended to create one or not. It’s constantly evolving (if you’re not a really sad brand, or a book).

The Style guide is like the Hitchhikers Guide to the Galaxy. It helps you to make sense of the system, and to keep it neat and tidy. When the system changes, the style guide follows.

The Brand is the gut feeling people have about you — meaning it’s actually out of your control.

The Design Principles are tools to use for decision making. The principles can help you limit the scope of your system, and align your components on a higher level.

The Pattern Library, as I see it, is kind of like a style guide, but with less guidance. Kind of like the index pages in the end of the book where you list all content.

A style guide is not a product, it’s a process

I’ve been guilty of selling style guide and I can understand why people still do it. For the client it looks really pretty and it feels like you get the complete package. But without a process to support it, the style guide slowly dies and the design system eventually gets out of hand.

Let’s use a far fetched metaphor… imagine a bouquet of flowers. Very pretty the first two days or so, but since you cut the roots off, death is inevitable. This is what happens if you hand off a style guide without a plan how to make it grow.

Now instead imagine a garden. You sow some seeds, watch the plants grow, decide you’re tired of the tulips and plant something else instead. Some crops felt like a good idea from the beginning, but it was just too much maintenance. Your garden is constantly evolving. The more you learn about what grows best in your soil, the prettier your garden becomes.

Are you a gardener or a florist?

By seeing your design system as a living creature, the pressure of perfection is fading. Neither your system nor your guide will ever be perfect, and that’s not the point. The point is to make sure your design grows in the direction you want it to go, preferably aligned in the other brand decisions within your organisation.

What’s the purpose?

So, what is really the purpose of spending time on developing a style guide? Well, you tell me. If you don’t have the purpose of having a style guide nailed down, do your homework first.

For us at Trine, our style guide serves us this:

  • A place for developers and designers to meet and take design decisions together.
  • A great playground for developing new components (dummy data FTW, no backend skills needed)
  • A way to spot inconsistencies in our design system
  • A great way for onboarding new team mates by being the one source of truth
  • A way to speed up development — a lot. It prevents us from reinventing the wheel.

Some questions to ask yourself before creating a style guide

  • Why do you need a style guide?
    Find the purpose first, then create the style guide according to your team’s need — starting with a MVP.
  • Who will be the gardener of your design system?
    Someone should be responsible for the growth of your design garden.

Some final thoughts

When we talk about developing style guides we often get stuck in value and cost. By treating your style guide as a part of the design and developing process rather than a finished product, we can dodge these boring budget discussions. Sure, some initial time to get started might be needed, but then it’s just about including it in your daily work.

Remember, the purpose of your guide is to support you and your team — it’s not just a piece for external admiration.

Curious to see Trine’s style guide? You’ll find it here.

--

--