KATAPULT-Magazin & KATAPULT-Verlag

During my time at KATAPULT from 2019 to mid-2021, the company was in the midst of one of its biggest growth phases. The registration as a gGmbH (non-profit limited liability company) in the commercial register, or the founding of KATAPULT-Verlag – as developer number two, I got to witness it all firsthand.

One of my most vivid memories is the production of issue 16 (January–March 2020) – the magazine that was being worked on when I joined the team. The freshly printed copies were delivered straight to the office (back then, in rented spaces at the Biotechnikum Greifswald). Together, we prepared the magazines for shipping – from sealing envelopes to bundling parcels.

The Token-Based Design System for Web Projects

In the first few months, I built various landing pages for the KATAPULT universe (some of which are no longer online):

• katapult-wald.de – a donation page launched in time for issue 19
• katapult.link – a Linktree for social media bios
• katapult-verlag.de – the website for the newly founded KATAPULT publishing house

All of these websites embraced the KATAPULT style. Since KATAPULT is first and foremost a magazine, its distinctive visual identity originated there: in print. My heartfelt goal was to translate this identity into the digital realm.

For this reason, I took the initiative to work on a design system for web projects. The goal was the best possible translation from print to digital. With each new website and feature that was needed, the design system grew over time into a full-fledged web framework – laying the foundation for the new KATAPULT website.

Under the hood, it’s a CSS framework that provides a set of base components and is extended with Tailwind-inspired utilities.

One detail that was particularly close to my heart: the choice of typeface. For body text, I chose Spectral – an elegant serif font used on both katapult-magazin.de and katapult-verlag.de.

For archival purposes, you can view the design system here: katapult-design-system.byjohann.dev

The New Magazine Website

During my time at KATAPULT, one of my main goals was to replace the old website (Typo3) with a performant, sleek one. The design system was ready – all that was “just” missing was the content migration, the design, and the implementation of the new website.

After comparing options and weighing what would work best for the editorial team, we chose Kirby CMS.

About half of the development time went into data migration – all articles from the Typo3 system had to be converted from a WYSIWYG format to Kirby CMS’s block format. This involved accounting for countless legacy HTML variations that had crept into the WYSIWYG editor over the years.

Another challenge was simultaneously the greatest joy of the project: designing the layout. Finding the right balance between the typical KATAPULT style and a modern online magazine took time. But once I got into the flow, I was able to implement the layout within about two weeks.

At that time, Benni and I opted for an agile design-driven development approach. This meant: no mockups were created – instead, the technical prototype evolved into the final product through feedback cycles. I'd like to take this opportunity to thank Benni for giving me the freedom to work autonomously – and for trusting me and my abilities.

My Only Photo of Angela Merkel

On February 4, 2020, Chancellor Angela Merkel laid the cornerstone for the Center for Life Science and Plasma Technology in Greifswald – right next to the Biotechnikum, where KATAPULT had its offices at the time. On this occasion, she also visited a few neighboring companies, including KATAPULT.

Benni presented her with the first KATAPULT book, “100 Karten, die deine Sicht auf die Welt verändern” (100 Maps That Will Change Your View of the World). I stood nearby – and snapped my only photo of the then-Chancellor.