Layout Structure
Layouts feature subdivisions, both horizontally and vertically, to create flexible yet structured narratives.
"The division is straight, rectangular and bled to the edge; it can be either symmetrical or clearly asymmetrical. Both the number of the spaces and their size relative to each other is flexible."
Horizontal Subdivisions (Asymmetrical)
1/3 Space
Perfect for navigation or key intro text.
2/3 Space
Ideal for main content or high-impact imagery.
Vertical Subdivisions (Symmetrical)
Top Section
Bottom Section
Brand Colors & Imagery
Spaces can appear as brand color blocks or consist of an image bled to the edge.
Focus
Full-tone spaces lend emphasis to typography, buttons, and icons.
Optical Connection
Specific elements can overlay multiple divisions to connect them optically.
Subdivision into Blocks
"The layout is generously subdivided into blocks, vertically and horizontally, so as to clearly structure the content and content sections."
Header Block
Feature A
Subdivided horizontally within a vertical block structure.
Feature B
Flexible number and size of spaces.
Footer Block Area
Structuring by means of Tiles
Content can be displayed inside rectangular tiles. Tiles are used in the brand colours and can be separated from one another using narrow padding.
Brand Blue Tile
A rectangular block used for structured content.
Brand Black Tile
Offers high contrast and brand identity.
Full Image Tile
Ensure sufficient contrast to the background.
Cards (Tiles with Functions)
If tiles are assigned one or more functions, they are known as cards. Cards can be used both in the brand colours and in grey scale.
Standard Card
A simple tile with interaction and standard elevation.
Brand Blue Card
Functional card using brand identity.
Gray Scale Card
Subtle alternative for secondary functions.
Subdivided Tiles
Tiles can in turn be divided in themselves according to the layout structure (e.g., image and colour field).
Subdivided Tile
Combining imagery and brand color within one tile.
Horiz. Split
Symmetrical or asymmetrical subdivisions.
Flexible brand integration.
Placement Principle: Horizontal and Vertical
"Elements are placed vertically and horizontally flush to each other for a calm, balanced overall look. Clear axes provide orientation."
Flush Layouts
Removing gaps and padding creates a monolithic block structure where content feels unified.
Flush Blue Block
Flush Black Block
Flush Gray Block
Clear Axes
Aligning elements to common horizontal and vertical lines provides instant orientation.
Design Principle: User-Centricity
"The user is our benchmark. It is the user’s activities and needs that provide the key focus. User interaction options are designed clearly and simply."
Simplicity in Motion
The components and the layout offer wide-ranging options for the inspiring presentation of content and functions, but always with a focus on simplicity.
Balanced Experience
Layout structure and subdivisions are not just aesthetic choices – they are tools to guide the user's attention and facilitate their journey.
Usage
<div class="l-subdivision-container l-subdivision-container--h">
<div class="l-subdivision l-subdivision--white l-subdivision--flush">
<!-- Content sit flush to the division line -->
</div>
<div class="l-subdivision l-subdivision--image">
<!-- Imagery bled to edge -->
</div>
</div>