### To do

* [x] Prepare first draft
* [x] Finalise draft for review by <mention class="mention" data-id="72512" data-type="user" data-text="@Marc Alcobé">@Marc Alcobé</mention>
* [x] Work on draft 2 based on feedback
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Get review from a front-end dev Begin of the insertion(<mention class="mention" data-id="39106" data-type="user" data-text="@Henriette Darge">@Henriette Darge</mention>)End of the insertion
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Make <mention class="mention" data-id="72512" data-type="user" data-text="@Marc Alcobé">@Marc Alcobé</mention> author
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Pass it on to <mention class="mention" data-id="80638" data-type="user" data-text="@Corinna Günther">@Corinna Begin of the insertionGünther</mention>End of the insertion Begin of the deletion Günther</mention> End of the deletion

### Begin of the insertionFinalEnd of the insertion Begin of the deletion FirstEnd of the deletion draft Begin of the deletion textEnd of the deletion

> ## **Adopting Primer, GitHub&#39;s Design System**
>
> Begin of the insertion**– Marc Alcobé**
>
>End of the insertion 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 optimisations. Begin of the insertionThis includesEnd of the insertion Begin of the deletion We are aware that a good user experience also meansEnd of the deletion making the interface cleaner, more consistent and more intuitive. To that end, Begin of the insertionwhileEnd of the insertion Begin of the deletion whilstEnd of the deletion we were working on creating our own design system this past year, we realised 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](https://primer.style/design/), the open-source design system designed and developed by [GitHub](https://primer.style/design/about). In this blog post, we&#39;ll delve into what Primer is, why we made the decision to embrace it, Begin of the insertionwhat we see as potentialEnd of the insertion Begin of the deletion theEnd of the deletion benefits Begin of the deletion it brings,End of the deletion 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&#39;s expertise in creating a mature design system that&#39;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.
>
> Begin of the insertionByEnd of the insertion Begin of the deletion In addition toEnd of the deletion streamlining our Begin of the insertiondesign andEnd of the insertion development process, Primer Begin of the insertionletsEnd of the insertion Begin of the deletion empowersEnd of the deletion us to focus on what truly matters: Begin of the insertioncreating software that makes it easier for our users to get their work done. AdoptingEnd of the insertion Begin of the deletion delivering the best user experience. By adoptingEnd of the deletion a pre-built design system instead of developing our own internal design Begin of the insertionsystem lets usEnd of the insertion Begin of the deletion system, we canEnd of the deletion dedicate more time to working on important features and optimisations in OpenProject.
>
> ### **The Benefits of Primer**
>
> Adopting Primer has a number of advantages for OpenProject:
>
> * **Consistency:** Primer Begin of the insertiondefinesEnd of the insertion Begin of the deletion establishesEnd of the deletion a unified design language that allows us to work towards a cohesive and intuitive interface across all parts of OpenProject, from Begin of the deletion theEnd of the deletion work packages Begin of the deletion moduleEnd of the deletion to meetings, from time and costs to settings pages.
> * Begin of the insertion**Responsiveness**: Primer is designed with responsiveness in mind and a lot of the components already adapt to multiple devices, input mechanisms and resolutions
> * End of the insertion **Reusability:** By leveraging Primer&#39;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&#39;s hard to achieve from scratch.
> * **Accessibility:** Primer&#39;s Begin of the insertionfocus on accessibilityEnd of the insertion Begin of the deletion accessibility-first approachEnd of the deletion aligns with our own values Begin of the deletion and allows usEnd of the deletion to ensure that our software is usable by even more people. Begin of the insertionAlthough not all existing components are reviewed for accessibility, Primer includes accessibility guidelines we intend to respect.End of the insertion
> * **Tested and Proven:** Primer Begin of the insertionis implemented andEnd of the insertion has been rigorously tested Begin of the deletion and implementedEnd of the deletion by GitHub in their own software. This gives us the confidence that we&#39;re adopting a design system that&#39;s not only visually appealing but also functionally sound.
> * **Documented**: Begin of the insertionThe majority ofEnd of the insertion Begin of the deletion MostEnd of the deletion Primer components are already Begin of the insertiondocumented, whichEnd of the insertion Begin of the deletion documented. Not all of it is complete but existing documentationEnd of the deletion makes it possible for our team to familiarise themselves each each component and understand the usage, limits and options of each.
>
> ### **Transitioning to Primer**
>
> Although Begin of the insertionadoptingEnd of the insertion Begin of the deletion integratingEnd of the deletion an existing design system that&#39;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 Begin of the insertionincrementallyEnd of the insertion Begin of the deletion slowlyEnd of the deletion 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 Begin of the insertionessential.End of the insertion Begin of the deletion essential. End of the deletion We appreciate your understanding and patience as we work through this phase.
>
> Begin of the deletion For front-end developers and designers, transitioning to a new design system like Primer comes with both challenges and opportunities. Adapting to new tooling and methodologies can be a learning curve, and there can also be unexpected challenges. Our teams are nevertheless excited to move forward with Primer.
>
> ###End of the deletion **Primer CSS**
>
> If you have upgraded to version 13.0, Begin of the insertionyou areEnd of the insertion Begin of the deletion you&#39;reEnd of the deletion already seeing Primer in OpenProject. Begin of the insertion
>
> Although youEnd of the insertion Begin of the deletion YouEnd of the deletion might not Begin of the insertionnoticeEnd of the insertion Begin of the deletion seeEnd of the deletion any major changes quite yet, Begin of the deletion butEnd of the deletion we have already migrated to the base Begin of the insertion[Primer CSS](https://primer.style/design/foundations/css-utilities)End of the insertion Begin of the deletion Primer CSSEnd of the deletion that will serve as a Begin of the insertion[foundation](https://primer.style/design/foundations/)End of the insertion Begin of the deletion foundationEnd of the deletion for further integration. Begin of the insertionThis makes it possible to ensure consistent spacing, typography and colourspace across all components and pages and to eventually introduce dark/light and accessibility modes.End of the insertion
>
> Begin of the insertionOne thing you might have already noticed is a slightly smaller font size to align with Primer&#39;s base body font.
>
>End of the insertion ### **Meetings: the first Primer feature**
>
> Begin of the insertionTheEnd of the insertion Begin of the deletion In ourEnd of the deletion next Begin of the deletion release,End of the deletion version Begin of the insertionof OpenProject (version 13.1) will introduceEnd of the insertion Begin of the deletion 13.1, we are working onEnd of the deletion a completely new Meetings module built from the ground up using Primer components. Begin of the insertion
>
>End of the insertion This will be the first module Begin of the insertionthat will allow usEnd of the insertion to Begin of the insertionexplore designing and developingEnd of the insertion Begin of the deletion really showcase what Primer offers, bothEnd of the deletion from Begin of the insertionscratch with Primer. We are hoping that this process will highlight its benefits from bothEnd of the insertion the point of view of Begin of the insertiontheEnd of the insertion design and development Begin of the insertionprocessEnd of the insertion and the end-user experience. Begin of the insertionWorking onEnd of the insertion Begin of the deletion
>
> We can&#39;t wait to shareEnd of the deletion this Begin of the deletion first &quot;Primerised&quot;End of the deletion module Begin of the insertionwill also give us experience integrating existing Primer components and making it work and co-existEnd of the insertion with Begin of the insertionexisting OpenProject objects. This process will naturally take some time atEnd of the insertion Begin of the deletion you beforeEnd of the deletion the Begin of the insertionstart but promises to save us time and help makeEnd of the insertion Begin of the deletion close ofEnd of the deletion the Begin of the insertionapplication more consistent in the long run.End of the insertion Begin of the deletion year.End of the deletion
>
> ### **Thanks to GitHub and the open-source community**
>
> We would like to express our gratitude to GitHub for Begin of the insertiondeveloping, documentingEnd of the insertion Begin of the deletion developing PrimerEnd of the deletion and Begin of the insertionmaking Primer availableEnd of the insertion Begin of the deletion contributingEnd of the deletion to Begin of the insertionus. We think that this kind ofEnd of the insertion Begin of the deletion the open-source world. ThisEnd of the deletion synergy Begin of the deletion between like-minded organisationsEnd of the deletion showcases the power of collaboration and Begin of the deletion aEnd of the deletion shared Begin of the insertionvalues in open source.End of the insertion Begin of the deletion vision.End of the deletion
>
> ### **What&#39;s next**
>
> We are thrilled about what Primer will bring to OpenProject and Begin of the insertionwith our next release, version 13.1,End of the insertion you will be Begin of the insertionalreadyEnd of the insertion able to see the first visible Begin of the insertionchanges.End of the insertion Begin of the deletion changes in our next release, version 13.1.End of the deletion
>
> 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](https://community.openproject.org/) and watch or comment on [this epic](https://community.openproject.org/projects/openproject/work_packages/26448/activity). Begin of the insertionAnd as always, your thoughts, ideas and feedback are always welcome.End of the insertion