Behind the design system: Forma 36

Sara Kalinoski
Jan 3 · 6 min read

Mike Mitchell, João Ramos, Johannes Bugiel, and Kevin Barnett on the origin story of Contentful’s open-source design system, Forma 36.

The origin story of many design systems starts with a familiar narrative. Without a shared product design language, managing consistency is challenging, duplicate work is created and pains escalate into problems as a company scales.

At Contentful, the challenge of working without a design system presented the opportunity to start one. What followed has been a grassroots effort of design and developer collaboration driven by a strong sense of spirit, hustle and good old fashioned teamwork.

What followed has been a grassroots effort of design and developer collaboration driven by a strong sense of spirit, hustle and good old fashioned teamwork.

As a product designer at Contentful, I’m regularly using the design system as a shared language with engineers, and contributing to it whenever I can. I sat down with João Ramos, Mike Mitchell, Johannes Bugiel and Kevin, a few of the pioneering contributors and champions of the design system, to learn more about how Forma 36 was built, how it gained traction, and how we’ll continue to grow and support it in the future.

How was the need for the design system at Contentful identified?

What type of work was required to lay the foundation for a design system?

One of our goals was to make the design system as frictionless as possible for engineers.

I moved the patterns into Storybook, a well-established tool for documentation. I added a component library with CSS variables and light tokens, and worked with Claus to identify patterns in the product that we could move over to the design system. It helped that I was a member of a cross-functional product squad with Claus. The product manager of our team, Spiros, understood the importance of a design system and helped us to build development time into our team process. Over time, we started to shift from reactive documentation to planning the future of the design system. One of our goals was to make the design system as frictionless as possible for engineers.

How did the team grow as the design system became more established?

João Ramos: One thing that I looked at from a design standpoint was creating stronger consistency in our prototypes and design handoffs to engineers. At this point we only had three product designers at Contentful, but there wasn’t a lot of consistency in our prototypes. I began to create Sketch symbols, which led to a UI kit. This became a key resource as more product designers joined Contentful.

We began to treat the design system as a product

Johannes Bugiel: When I joined, there was already a backlog of components for me to add to Storybook. We began to treat the design system as a product and had regular grooming sessions where we defined each component and prioritized our work.

Were there any milestone moments as the design system grew?

Claus, Mike, Johannes and Helen at the Clarity Design Systems Conference in NYC

Mike Mitchell: We also felt a lot of validation of Forma 36 when we presented it to product leadership at Contentful. It was clear that everyone understood the value of a strong design system, and we received a lot of encouragement to continue working on it.

João Ramos: Another big milestone moment was at an internal Contentful hackathon, held shortly after the soft release of the open source design system. Almost every hackathon team used Forma 36 to develop their solutions, resulting in a strong acknowledgement that the design system was useful, valuable, and a welcomed addition to the product development process.

Almost every hackathon team used Forma 36 to develop their solutions, resulting in a strong acknowledgement that the design system was useful, valuable, and a welcomed addition to the product development process.

How is the design system adopted into product development workflows at Contentful?

Mike Mitchell: Contributing to the design system has extended outside of the core group, as many of the front-end engineers at Contentful have helped by contributing new components to the design system as it grows. We’ve also added more product design contributions, with Dominik Markušić and Sara Kalinoski joining the effort to create guidelines for UX copy, date and time, typography and layout.

We organized a Forma 36 documentation hackathon to encourage more internal contribution

What are the goals of the design system moving forward?

João Ramos: We’d like to scale the design system alongside Contentful. We are already treating Forma 36 as a product, and one of our next steps on the product side is to establish a process to track the success and adoption of the design system, both internally and externally.

Mike Mitchell: We are also working on an upcoming release of version 4.0, which will introduce more components, guidelines, and new ways to use the design system.

Last question- how did you decide to name the design system Forma 36?

Interested in joining us to develop Forma 36 and Contentful? Check out our open roles

Contentful Design

Stories from the designers at Contentful

Sara Kalinoski

Written by

Product designer with a research and strategy heart. Currently: Contentful in Berlin. Formerly: marketing design at Apple and AKQA in the Bay Area. saraamee.com

Contentful Design

Stories from the designers at Contentful

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade