News from the product desk: Adopting Primer – GitHub's design system

At OpenProject, our goal has always been to create the best open source project management and collaboration software. We are acutely aware that for our users, OpenProject is not just a set of features but a tool they use to get things done. And in the Product team, we want users to get them done better, easier and quicker.

With each new release, we try to strike the right balance between new features, bug fixes and UX optimizations. This includes making the interface cleaner, more consistent and more intuitive. To that end, while we were working on creating our own design system this past year, we realized that we could perhaps lean on the experience and expertise of more mature open source projects.

Today, we are excited to announce a significant step forward in enhancing user experience by adopting Primer, the open source design system designed and developed by GitHub. In this blog post, we’ll delve into what Primer is, why we made the decision to embrace it, what we see as potential benefits and how this transition will impact our users.

Introducing Primer

Developed by GitHub, Primer provides a comprehensive collection of components, patterns, and design principles that are meticulously crafted to ensure a seamless and consistent user experience. With accessibility considerations deeply embedded in its core, Primer aligns well with our approach and values at OpenProject.

Why we chose Primer

The decision to integrate Primer into our ecosystem was not taken lightly.

We believe in progress through collaboration, and GitHub’s expertise in creating a mature design system that’s both reusable and accessible caught our attention. Choosing Primer means being able to use components and patterns that have been tried, tested or are being actively developed by experts who share our passion for open source excellence.

By streamlining our design and development process, Primer lets us focus on what truly matters: creating software that makes it easier for our users to get their work done. Adopting a pre-built design system instead of developing our own internal design system lets us dedicate more time to working on important features and optimizations in OpenProject.

The benefits of Primer

Adopting Primer has a number of advantages for OpenProject:

• Consistency: Primer defines a unified design language that allows us to work towards a cohesive and intuitive interface across all parts of OpenProject, from work packages to meetings, from time and costs to settings pages.

• Responsiveness: Primer is designed with responsiveness in mind and a lot of the components already adapt to multiple devices, input mechanisms and resolutions.

• Reusability: By leveraging Primer’s components and patterns, we can rapidly develop new features without reinventing the wheel. This not only accelerates development but also ensures a level of quality and consistency that’s hard to achieve from scratch.

• Accessibility: Primer’s focus on accessibility aligns with our own values to ensure that our software is usable by even more people. Although not all existing components are reviewed for accessibility, Primer includes accessibility guidelines we intend to respect.

• Tested and Proven: Primer is implemented and has been rigorously tested by GitHub in their own software. This gives us the confidence that we’re adopting a design system that’s not only visually appealing but also functionally sound.

• Documented: The majority of Primer components are already documented, which makes it possible for our team to familiarize themselves each component and understand the usage, limits and options of each.

Transitioning to Primer

Although adopting an existing design system that’s mature and stable has many advantages over creating a new one from scratch, it is nevertheless a significant amount of effort. This means that OpenProject will go through a transitional period as we start integrating, testing and incrementally rolling out Primer across the entire software.

During this transition period, you might notice a mix of old design elements and new Primer components within OpenProject. This blending is temporary but essential. We appreciate your understanding and patience as we work through this phase.

Primer CSS

If you have upgraded to version 13.0, you are already seeing Primer in OpenProject.

Although you might not notice any major changes quite yet, we have already migrated to the base Primer CSS that will serve as a foundation for further integration. This makes it possible to ensure consistent spacing, typography and color space across all components and pages and to eventually introduce dark/light and accessibility modes.

One thing you might have already noticed is a slightly smaller font size to align with Primer’s base body font.

Meetings: the first Primer feature

The next version of OpenProject (version 13.1) will introduce a completely new Meetings module built from the ground up using Primer components.

This will be the first module that will allow us to explore designing and developing from scratch with Primer. We are hoping that this process will highlight its benefits from both the point of view of the design and development process and the end-user experience. Working on this module will also give us experience integrating existing Primer components and making it work and co-exist with existing OpenProject objects. This process will naturally take some time at the start but promises to save us time and help make the application more consistent in the long run.

Here’s a preview of what the new Meetings module will look like with the design system Primer:

Thanks to GitHub and the open source Community

We would like to express our gratitude to GitHub for developing, documenting and making Primer available to us. We think that this kind of synergy showcases the power of collaboration and shared values in open source.

What’s next

We are thrilled about what Primer will bring to OpenProject and with our next release, version 13.1, you will be already able to see the first visible changes.

We anticipate some challenges during the transitional phase and we ask for your patience and understanding as we work to provide the OpenProject Community with an even better user experience.

As an open source company, we also work in the open. If you would like to track progress of our integration with Primer or even contribute to it, join our Community instance and watch or comment on this epic. And as always, your thoughts, ideas and feedback are very welcome.