Building a logo system for SinnerSchrader

Markus Ölhafen
Jun 2, 2018 · 6 min read

Creating a logo for a brand or product is a tough job. Finding the right meanings and metaphors, choosing the right balance of simplicity and complexity, develop a distinct design language including colours, shades and fonts — all while pleasing the clients wishes or self created high standards and standing out of the competition.

But what if there is a family of products, tools and sub-brands that need to be unified by distinct design language?

Of course companies like Adobe, Apple or Google come to mind as their own products and apps are mostly easily recognised. But also companies like Atlassian manage to create a style for their digital brands that matches the language of the main brand, while still being unique and recognisable on their own.

SinnerSchrader has been in the game for more than 20 years, and with the aquisition of ever larger and multinational clients the need for tools that match more complex workflows has arisen. Tools created on this journey include Patternplate (a tool to manage large design systems), Alva (a component driven design tool) or Paperboy (a super fast CDN). But also publishing brands like Next Factory or co-worker education like Next Campus have been established. They demand a visual representation too.

Taking Stock

Some of the examples above already had a logo, typeface or visual element of some sort. Not all were created by a designer. Some were based on text, some only an icon, most had nothing.

Current selection of logos shows a wide variety

SinnerSchrader’s collection of products will only grow as it heads into the future, with new finely-tuned workflows demanding custom built solutions. This will lead to the development of yet more tools, so a logo system catering to as yet unknown requirements needs to be future-proof, extendable and flexible, but also easy to use.

1996, the year SinnerSchrader entered the digital design world, was also the year CSS came to life and Macromedia first released Flash. It was a time of flashy graphics, vibrant colours, experimental typography and geometric shapes. This playful and experimental time is reflected as one of SinnerSchrader’s core principles.

The company’s colours are derived from RGB values, in reference to the core technology of the screen, and the development of products for every digital touchpoint. Each of these colours is also matched to a department. Red represents design, blue engineering, green management. With cross-functional teams, these colours won’t be seen in isolation anymore and need to work together.

Each department is represented in a specific colour

Setting the boundaries

Besides the main task of unifying the scattered landscape of product logos, there are other benchmarks that need to be met. The DNA of SinnerSchrader needs to be present. Although this doesn’t need to be visible upfront we still wanted to make the DNA part of the core concept.

Each logo not only needs to be recognisable on its own, but also fit within, and strengthen the perception of the product family. Besides that, logos need to be easy to use and easy to create, and cater for a variety of new products in the future. Most of these will want and need a visual representation.

Sketching Logos

Keeping it hands on

When designing a whole set on logos it is very important to also talk with people responsible for a product. They are very passionate about their tools and want to have a say in how they are represented visually. It’s important to keep the balance between the bigger picture, holistic approach and vision on a detailed level.

Take a step back to see the bigger picture.

First dimension


The web is increasingly constructed in a modular way. Each module is built from smaller components and is again the basis for another component. We wanted this Atomic Design concept to be visible in all SinnerSchrader’s products. When we break shapes down to their most simple elements we get circles, triangles and rectangles. With these simple elements, every other shape can be created and combined into meaningful compositions. The elements can vary in size, rotation and can also exist in parts.

Simple shapes as base of the system

Second dimension


The web isn’t one dimensional and neither are digital products. They offer a large range of levels with hierarchies and overlapping areas. The logos need to represent and visualise this reality.

As a second concept the people working on products can’t be easily categorised anymore. Often, their skillsets can apply to multiple departments. For example, designers working more and more with code can be seen as drifting into the area of product engineering.

Third dimension


The lifecycle of a component both technically and visually starts with an early draft. From this point on you iterate, extend or entirely rethink the component until it is finally implemented in the product. And the journey might start over from there. That living component approach is also part of the logo system — by visually separating between draft components as outlines and implemented components as filled form.

Fourth dimension


Lastly, every product has a human factor. Geometric shapes are easy to use and commonly known, but always feel technical and a little cold. To counter that, rounded corners make the products more approachable.

Reaping the rewards

At the end of the day it’s all about bringing single elements together in a meaningful manner to really deliver the product’s message. Carefully arranging the elements, colours, and overlapping areas to create a well balanced range of logos that work across all channels, whether printed, used in websites, on mobile, or sitting in the dock of OS X, every channel needs to work.

When these logos really shine is when they are used with vibrant colours. They have a playful appeal in the way they are arranged, and in combination with random shapes such as zig zags, half-circles, and outline circles they show of the experimental approach.

Another requirement was the reusability of the logos in the existing SinnerSchrader illustration style, without being completely unrelated to the actual logos. To show processes and workflows it’s necessary that the logos integrate themselves rather than being too prominent.

Logos can also be seamlessly integrated into SinnerSchrader illustration style

What’s left to say

Creating logos and building a system for a bigger context and multiple products (that are not even there yet) is still a long and demanding task. But seeing all strings come together, the final outcome is very satisfying (to be humble). We now have logos that work on all channels, and a system that is flexible enough to support all future products that may come.

In collaboration with: Tilman Frick, Markus Ölhafen, Sandy Strobel

Still Day One

Digital Transformation keeps transforming.

Still Day One

Digital Transformation keeps transforming. We host ideas, plans, tools, point of views and all things of interest on the age that feels familiar, but has just begun today.

Markus Ölhafen

Written by

Product Designer at & SinnerSchrader

Still Day One

Digital Transformation keeps transforming. We host ideas, plans, tools, point of views and all things of interest on the age that feels familiar, but has just begun today.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store