Layout System

This system brings structure to our visual narrative, ensuring a professional and consistent appearance across all platforms. It is the architecture of our visual language, translating our engineering excellence into every brand touchpoint and guiding us toward design precision.

Basic Division

The foundation of our Layout System is defined by these Basic Divisions.
This is the backbone of our visual consistency.
We compose our layouts strictly by full areas, halves or thirds. Every element must align with these proportional structures.

Full area

Area divided by 2

Area divided by 3

Content arrangements

Content can be arranged in mulitple ways within these basic layout divisions.

Uplifting line

The Uplifting Line as the central design element fits perfect into the basic divisions.

Finished Design

You can create a wide range of layout options that are clear and structured across the board.

Units

Measurement
The Unit is a defined measurement within the design system and serves as the basis for safe areas, spacing, and logo sizing. It ensures consistency and visual balance across all layouts.

For structuring layouts, the Unit can be calculated based on the format – by dividing the short side of the layout by a variable ratio of 15 to 25 or 5 to 15, depending on format, layout, and intended visual impact.

Safe area 
The safe area is determined by the technical requirements of the medium and should be at least 1 Unit. If necessary, it can be extended by half or whole Unit increments. The margin defines the design zone in which the content is placed at least 1 Unit apart.

Column spacing 
When creating multi-column layouts, the column spacing is also based on the Unit. The standard column spacing is ½ Unit, but it can be adjusted as needed for visual balance.

Variable Ratio of 15 - 25

General applications such as Print (eg. DIN A formats, stationery, magazines, ...) and digital formats such is presentations, Social Media.

Variable Ratio of 5 - 15

Smaller applications and extreme formats (eg. business cards, hang tags, pylons, billboards, online banners, ...).

Layout system examples for square social media, DIN A4 print, and 16:9 presentation formats using unit ratios and defined safe zones

MEDIA TYPES	FORMAT NAME	FORMAT SIZE	DIVIDE SHORT SIDE	UNIT SIZE / LOGO HEIGHT
Print	A3	210 x 297 mm	/25	12 mm
	A4	210 x 297 mm	/25	8,4 mm
	A5	148 x 210 mm	/20	7,4 mm
	A6	105 x 148 mm	/20	5 mm
Social Media	4:5 / 1:1 / 9:16	1080 x 1350 / 1080 x 1080 / 1080 x 1920 px	/15	72 px
Presentation	Screen 16:19	1920 x 1080 px	/20	54 px
Online-banner	Skyscraper	120 x 600 px	/3,5	34 px
	Leaderboard	728 x 90 px	/2	45 px
Motion Branding	4:5 / 1:1 / 9:16 / 16:9	1080 x 1350 / 1080 x 1080 / 1080 x 1920 / 1920 x 1080 px	/8	135 px

Step by step

Define Unit size

1. In the first step you define the Unit size. Therefore you divide the short side of your format by the recommended number, in the example below for DIN A4 it is 25: 210 mm/25 = 8,4 mm (Unit size) The Unit defines your (minimum) safe area within the layout und also the logo size.