Digitization Venture Building - 3 min

Introducing the Matterhorn Design System

At Stryber we have built our own Matterhorn Design System, and it's free and open-sourced. Visit matterhorn.stryber.com to take your projects to the next level

Thais Souza

Thais Souza is the head of Design at Stryber.

Open-sourced, Inclusive, Intuitive, and Powerful

The Stryber Design Team is pleased to announce that our new home for Matterhorn Design System is now live at matterhorn.stryber.com

Every digital business faces a significant challenge when they begin to scale how to quickly develop better products that users love while still creating a consistent user experience on every display. Balancing these priorities can be very difficult to execute.

To solve this, Stryber created Matterhorn a powerful open-source design system, that is 100% focused on venture development.

The design system consists of React and React Native design components that can be utilized for both web and mobile applications. It also includes source code and additional resources that serve to establish a shared vocabulary between designers and developers. The possibility to adapt our components to multiple devices and projects will make the design and development process even more efficient and focused.

With Matterhorn, you will be able to combine components and interactions quickly, therefore maintaining an intuitive, inclusive design across all of your projects.

Our Design Inspiration

When creating the components for our design system, I was inspired by the accessibility of the city of Munich.

To give you some background, I’m from Brazil and although we have some planned cities like Curitiba and Brasília. I grew up in Rio de Janeiro which renowned for its beautiful landscapes but is unfortunately not an accessible or organized city. So, when I moved to Munich I was really inspired by the city’s flow and accessibility. Everything works here like a perfect dance. Of course, it’s not perfect all the time but it’s much better than what I was used to. So I thought, why not have a digital system that works the same way?!

Just as the infrastructure is not only centered around cars but also pedestrian and bike traffic and the accessibility of blind and disabled residents, we built Matterhorn to provide the best digital experience to everyone.

We incorporated colors, lines, and elements from our second big inspiration: the Alps and the nature surrounding it. For this reason, we have called our design system Matterhorn.

Our Mission

To give all people total control of the interface experience by creating the first truly inclusive design system, which can be used to build products accessible to everyone, regardless of age, disability, or other factors.

What’s next?

A typical misconception about design systems is that once they’re set or in this case once their documentation is published or their site is launched, they become a complete and unchangeable project. In reality, a design system is never complete. This launch is simply the first step of many in the direction of our Mission.

We still have a lot of important work to do, and our Design Team is very excited about it. 

Here are a few more things coming in the near future:

  • Even more web and mobile components in our library

  • A design and development community around Matterhorn

  • Sketch and Figma full assets for downloading

  • Developing our visual foundations (creating our own Stryber_sans typography, iconography, and more)

  • More powerful templates for both web and mobile

  • And most importantly, making our design system more accessible, usable, and inclusive. For that, we want to not only follow the WCAG guidelines but also to create tools that will give full control of the screens.

We hope all of these changes make designing and building experiences with Matterhorn so much better. Please enjoy our site and stay tuned!