Home

Of Butterflies And Gardens

An exploration of mental models in design system architecture.

published Sat, 08 Nov 2025 23:00:00 GMT

In my experience, there are mostly two kinds of mental models that guide the creation o design systems:

butterfly collectors
Fixed values are pinned pinned down in a neat and tidy order
gardeners
Design elements are planted like seeds and grow through a set of rules and constraints

Always keep in mind: None of these is wrong nor right. For there is hardly a single right way to do things. They are simply different ways of thinking and working. It is not important what way you follow. But it helps a lot to be aware of them, understand the way you work, understand the ways your coworkers and partners work.

Both types can work together. But only if you are aware of the way your partners in crime approach the world. Otherwise there can be confusion, because both parties often use the same language but hardly mean the same thing.

Butterfly Collectors

This style of design system organization is driven my order, naming and pinning down design decisions.

The ultimate expression of this style is the design token. Followed by taxa like "atoms", "molecules" and "organisms". Everything is packet into neat boxes. The relationship between the items might be implied. But the delivered artifact is fixed in place, calculated, named and pinned down in it's appropriate place.

This style is very comfortable for many developers. Especially Javascript. Is familiar, effective, predictable, testable. Like perfect Lego Bricks the design falls into place. It works as well great for designer who have a more intuitive grasp of their design. They simply know what looks good – a skill acquired by thousands of hours of practice. Design systems simply translate their decisions into a fixed frame to serve the whole team. But, when describing the reasons of a decision they are often lost for words. They are use to do not tell.

Many Scholars have tires to collect all the specimens in a butterfly net to pin them out and docket them for family, genus and species.

-- Irving Finkel in "The Ark before Noah" --

The design system aims to collect systemize the design a neat and tame structure to facilitate between designers and developers.

A typical goal this style aspires to is pixel perfection and performance.

Gardeners

This style of organization is more organic. Design decisions are not ultimately expressed in tokens but rather in rules. From a given seed planted designs can grow organically and are pruned.

These systems work very well with cascading stylesheets. It's already baked into this term that properties cascade down from patent to child elements. They flow like water. I can't what a <p> will look like, until i know where it is, and what properties were set on its ancestors. On the other hand i can tell the whole zoo of known and unknown elements in the DOM what font to use and color to have by simply declaring it on the :root element. Designers who work this way gravitate to node based interfaces, creative coding and generative art.

This style is ideal if you like to explore and avoid tedious tasks. You like the idea of letting the machine do the work for you. You can watch the system evolve from your settings, tweak the values and prune unruly growths.

A typical goal this style aspires to is flexibility and adapdability.

The State of the garden

While one Group behaves more like and taxonomist the other one acts more like geneticists. One is speaking in artifacts the other on in rules. The one can be in risk of committing to early and stifle development. The other can sometimes miss the point of actually pinning a concept down and never reach a done state.

Both approaches are valid. And together, they can create a design system that is both stable and alive. But we often see them clash. While modern CSS adds new kinds of selectors, queries and cascading custom properties many frontend framework fight hard to dam in the cascade. Design Tools like figma and penpot cater as well to the needs of butterfly collectors. Many frameworks only replicate existing patterns and lead us straight into the purple problem of AI.

Make sure you talk to each other and find out which style each of you prefers. And from this point express each others needs, goals and wishes.

It's time to embrace your gardeners and not only systemize the "what" but the "why" of your design.

Even if it means that, sometimes, instead of pinning down the butterfly, you have to allow it to flap its wing and cause a tornado for you to dance inside.