Develop design systems with TYPO3

The topic of design systems is currently on everyone's lips. No wonder: larger companies in particular want to present a uniform look and feel to the outside world.

This is because the status quo is often different: years ago, colors and font styles may have been defined and a website layout created on this basis. However, a lot has happened since then: The company website has evolved, perhaps even the agency responsible has changed. There are certainly individual departments that have set up their own microsites alongside the company website. With a bit of luck, the colors and font styles will at least match to some extent, but there is often no uniform visual style.

Design systems can solve this problem. They not only define colors and fonts, so-called design tokens, but also smaller and larger parts of websites, so-called components (e.g. the appearance of a button or mobile navigation).

However, even the best design system will not solve any of the problems mentioned if it cannot be meaningfully and deeply integrated into the website development process. After all, the actual challenge will not disappear: Internet presences continue to evolve - and they should, which is precisely what distinguishes them from analog print products.

At sitegeist, we rely on the advantages of design systems for both our Neos and TYPO3 projects. We have invented the right technical tools for both Content-Management-Systeme and are constantly developing them further as open source software.

In the TYPO3 area, we have been using a component-based development process for several years now. The technical basis for this is provided by our open source extension Fluid Components. It enables us to break down website layouts into reusable components that can then be flexibly combined with each other.

At the same time, these components are presented in a Living Styleguide, which creates the basis for sustainable further development and improvement of the website. This is where our Fluid Styleguide comes into play, which is based on Fluid Components and is optimally adapted to the TYPO3 platform. Unlike normal styleguides, the Living Styleguide can never become obsolete: it uses the same components as the website itself.

Even if the components and style guide are optimized for use with TYPO3: This does not make them a one-way street. The Living Styleguide enables us to easily apply the design system developed in it to several different systems, for example to systems other than TYPO3.

We present all the technical details of our development tools in detail on a separate product page. There is also a live demo showing the Living Styleguide in practice:

By creating a living style guide for SPIEGEL-Verlag, we have created a forward-looking architecture on which dozens of websites can be built over the next few years. At the same time, we were able to provide external IT systems such as the Umantis talent management system with a design that blends seamlessly into the SPIEGEL Group's corporate design.

The interaction between components and the Living Styleguide has been tested in numerous customer projects and has proven its worth. Our development tools therefore do not solve theoretical problems, but cover the specific needs of real web projects.

Design systems are currently a much-discussed topic, and rightly so. If they are used correctly and deeply integrated into the work processes, they create a flexibility and sustainability that was not possible in the past. At sitegeist, we have the necessary experience, the technical know-how and the right tools to advise and support our customers in setting up a design system.