The concept of a “design system” has firmly established itself as a pivotal asset in the realm of digital design. Design systems are perceived in diverse ways, ranging from assembling sets of elements in a document to seamlessly integrating them into collaborative editing tools. Yet, there’s a design studio that doesn’t follow the conventional path – Design Systems International. This studio not only specializes in design systems but redefines them from a unique vantage point. The name itself speaks to their expertise, but their approach goes further, crafting a “system for creating designs.” Beyond conceptualizing and determining design guidelines, they create a system capable of generating these designs. 

What’s particularly distinctive about their approach is that the graphics produced by this system, such as logo designs, don’t necessarily have a single unique identity. They exist in multiple variations with different color schemes and text placements. Yet remarkably, they still evoke recognition for a specific brand. Given this context, we visited their Denmark office, where they are crafting a design system that challenges the traditional norms of graphic design. Join us as we explore this evolution of design, uncovering the fascinating connection between design and systems.

Interviewed by Ryo Sampei, Producer of Spectrum Tokyo

Blending Design and Systems in a New Era of Digital Creativity

Ryo: Currently, design systems and generative design are also gaining attention in Japan. At Design Systems International, you seem to be taking a unique approach that blends design and systems, which is different from traditional style guide-based design systems. Am I right?

Rune: Yes, what we’re doing might not fit into the typical framework of design systems. What our studio produces is “design with the use of systems”.

In design, we believe that rules and systems are integral. Concepts like using grid systems for layout have been design principles for a long time. With the rise of digital design, more complex elements have become intertwined, making it even more necessary to think in terms of systems. However, it seems that the approach of design studios hasn’t changed much. Particularly, there still exists a barrier between design and engineering. Designers continue to try to design on a “page-by-page” basis. This mindset persists even for “products that are not static” such as apps and the web. They still think of it in the same way as print design.

Our studio transcends the conventional boundaries of two-dimensional design and we’re experimenting to treat code as one of the integral design materials. In both graphic design and logo design, our initial step involves establishing a system for generating designs.

Ryo: That’s exactly like a “design tool,” isn’t it? It seems to be a different field from the usual design systems.

Rune: Many people tend to think of what’s called a design system as design components or style guides for websites, however, we see it as a much broader field. While we do use coding, our projects primarily revolve around creating visual identities and branding.

Design for digital media like websites ultimately translates into code. So, instead of thinking, “Let’s design first and then move on to coding,” I believe it’s good to start coding at an earlier stage. The flexibility is what makes digital design intriguing. Therefore, in our projects, we often include multiple designs generated by the system or designs that can be deformed into logos, showcasing flexibility as a key element.

Developing a logo System deformable by user

Martin: Let me show you an example of what we mean by a deformable logo.

In the past, we undertook the task of rebranding the website and logo of The Processing Foundation. Processing is a programming language that was launched in 2008, might be familiar to many. The Processing Foundation’s website was still stuck in the state it was 15 years ago, making the rebranding a substantial endeavor both in terms of design and technical aspects. The content was quite messy, to be honest. While redesigning it to be more user-friendly, we also needed to ensure that the long-time users wouldn’t feel alienated. Finding the right balance on that front was quite challenging.

We began by creating a brand system. Processing is a language that allows visual formation through simple code, and the essence of “programming” is crucial to its identity. Therefore, we wanted to craft the logo itself as a program.

Rune: When we talked with Casey Reas, the co-founder of Processing, he expressed the desire to communicate that “Processing gives an impression of being technical and formal, but it is also used by children to learn programming, so we want to have a playful aspect to the visual identity, while still upholding its professional demeanor for users who employ it in various settings such as artistic installations and exhibits.” Meaning, he wished for a visual identity that could cater to a wide range of possibilities. So, instead of just creating a logo, we developed a logo system that allows everyone to experience Processing.

“Mechanic” A System for Creating Design Systems

Rune: We not only design graphics for logos but also often create tools that can be used directly in web browsers. From the lessons we learned while building many of these tools, we developed a service called “Mechanic“. With Mechanic, you can define certain rules and systems, and by inputting text and colors, it automatically generates multiple design proposals that adhere to those predefined rules. Whether it’s for posters, business cards, or other design elements, Mechanic streamlines the process by allowing you to set the guidelines, and the system handles the rest. Essentially, it’s a system for creating design systems.

Ryo: I’ve tried Mechanic too. It’s useful and a fun tool. It doesn’t just offer one type, it generates infinite variations and can even suggest layouts that you wouldn’t have thought of.

Martin: Here are our stickers written with our corporate name. It may appear identical at first glance, but they’re actually different designs. These were printed from several variations automatically generated using Mechanic. 

With this system, it’s also possible to make slight changes to things like the color blocks, arrangement placements, as well as combinations of text. Using Mechanic, you can establish rules to construct a system.

Ryo: It’s amazing that when you look closely, they don’t match at all, but you can still recognize them as part of the same brand. It feels like a new form of “consistency” is emerging.

Rune: Exactly. It’s possible to create within a range that’s flexible and not an exact match but still recognizable as the same.

Martin: Coming up with the rules at the beginning was quite a challenging task, but once they’re established, they can be used continuously. We take on the most challenging aspect of maintaining the rules. In our case, since Mechanic is our foundation, we can create things quite quickly even when we receive orders.

Rune: Instead of saying, “Here are the guidelines, please follow them,” I think it’s better to create a tool and provide it. It’s more accurate, faster, and effective. If a tool has the rules of the visual identity (VI) incorporated into it, it reduces the effort for both parties.

Ryo: I wish you could make images for Spectrum Tokyo too……! It seems like Mechanic is an open source, what kind of people are using it?

Rune: It seems like internal design teams and other similar teams are using it at times, but it doesn’t appear to be extensively adopted.

For a production company, making a sudden shift in approach can be difficult, so introducing this kind of tool might be too early. Given that this was initially developed for our personal use, we aren’t overly worried about its adoption by others.

Martin: Mechanic was also created to spread the idea of design systems, so it would be good if people could understand the potential of systems and design by looking at it. By making it open source, we hope more people become interested. It would be very gratifying if our efforts prove valuable to anyone out there.

Elevating Conceptualization through Rule Formalization

Ryo: Are there any branding projects aside from Mechanic?

Martin: For more conceptual designs, We designed a brand system for “AIxDesign“, a global community of designers, creative technologists, and activists who utilize AI.

The logo and color palette were already in place, so we translated them into a simple layout system. Originally, they used colorful blobs (streamlined, slime-like shapes) for decoration, but those didn’t have a particular meaning. Instead of the blobs, we decided to use colored silhouettes of objects from the open image dataset (a library of images for AI learning) as decorative elements.

It might be hard to imagine this, so check this out. This is a colored silhouette of a panda, and in the end it would look something like this…!

Ryo: It’s more abstract than I imagined. With this, there’s an element of randomness while still incorporating AI aspects into the design, making it quite conceptual.

Martin: Such approaches contribute to the richness of expression. With this system, it can be generated from any kind of image. We wanted to rebrand them while retaining their playful spirit.

Code as a Design Material

Ryo: How do you think design systems will evolve in the future?

Rune: Currently, it feels like design systems have become confined to just product design, somewhat resembling style guides. However, we believe that depending on the way you look at it, they can be used more expansively.

Martin: Looking ahead, we anticipate that design systems will transform into a fresh approach for graphic and communication designers. In the modern design landscape, complexity has surged, and the design tools that were once suitable are no longer sufficient. We’re transitioning into an era where we need to adapt to a way of creating that aligns with the digital environment.

Designers working in the digital realm should consider code as one of their “materials.” For instance, if you’re creating a piece with clay, you don’t need to be a clay expert, but knowing what you can and can’t do with clay can lead to better results. The same applies to coding.

Rune: Exactly, try playing around little by little. Through this process, you’ll gradually shift from “making things” through coding to “creating systems”.

Ryo: So, you’re saying we should explore more in the digital realm?

Rune: It would be great if you can get insights from digital media. The Eameses, for example, were able to create beautifully curved chairs because they deeply understood the materiality of wood. Similarly, digital designers can have more freedom to create by understanding the nature of coding.

Ryo: So, instead of considering design systems as limitations, they could become tools to expand creativity even further. It’s fascinating to think of design systems as something more liberating.

Thank you, Rune and Martin!

Related Links

Design Systems International