Layout System

Layout Principle

Our layout principle provides the foundation on which to build any DHL medium – whether print or digital, emotional or functional. Review this guide to learn how easy it is to structure your canvas, apply our distinctive Postyellow gradient, place text and more.

This guide contains

Essentials

The “Gradient Module” is our distinctive design element. It is used in all DHL layouts to highlight our logo. It can also be used to set the visual focus on key messages and functions. Made up of a Postyellow background that slowly fades to transparent based on a set gradient, there are a variety of options for placing the module on the layout canvas.

DHL layouts are clearly structured, never overloaded and have a clear visual hierarchy. The focus is on the most important information or function.

A simple formula: The two fundamental elements of a DHL layout are the canvas (with or without image) plus Gradient Module.

Examples

Structuring your canvas

Create a full-format layout or subdivide

In order to achieve a clear overall picture, we recommend a simple full-format layout. However, the canvas may also be subdivided into two sections. Whether horizontal or vertical, the sections in a subdivided canvas are always straight and rectangular and given a bleed. Each section should have a purpose. Avoid empty sections.

We recommend using simple division ratios that generate an asymmetrical appearance, such as 1:2, 2:3, 2:5 or the golden ratio (1: ≈1.618). Use the Gradient Module or an image to fill a section background, but do not use two images or two Gradient Modules in combination.

If you have lots of text and information to place, consider dividing the viewport (the visible part of a layout on a screen) into a few more sections. This will be helpful for digital media like websites or print media like factsheets and the inside pages of brochures. You can use white, light gray tones, and our Postyellow full-format gradient as an additional section background.

Dos and Don’ts

Strive for a clear and simple appearance.

Don’t create visually complex layouts. Avoid overlaps, too many visible sections, more than one image and sections with no function.

Margins

Respect type and branding areas

The margin in your layout and layout section must be at least one base unit from the branding area and two base units from the type area. The branding and type areas are defined as follows:

The branding area includes the free-floating Gradient Module, infoboxes, tiles, smaller images, etc. (see area outlined in magenta below). The margin around this area must be at least one base unit from the edge of your layout.
The type area includes all logo and text elements (icons, digital components, additional logos, etc.). The margins around this area must be at least two base units from the edge of your layout.

Know your area: Place free-floating Gradient Module within the branding area (magenta), and place the logo and text within the text area (blue).

Adjust margins to one base unit in small media

In small media, you have the option of placing the DHL logo and other design elements at the minimum distance of one base unit from the canvas margins. Use this option for mobile apps, smartwatch displays, small web banners, and print media A7 or smaller. In this case, the type and branding areas merge into one.

The Gradient Module

Our Postyellow Gradient Module can be applied in two ways:

With a highlight gradient
With a full-format gradient

Colors

Highlight gradient

The highlight Gradient Module may be placed anywhere on the canvas, but it may not overlay two or more sections. The distance between the Gradient Module and the edge of your layout (canvas margin) is at least one base unit. This is the “branding area” (see also chapter on Margins).

Construction

The highlight Gradient Module is composed of three elements: the DHL logo, the Postyellow box (on which the logo is placed), and the highlight gradient.

Placing the DHL logo

Place the DHL logo in any corner of the Postyellow box. Minimum distance to the Gradient Module margins is one base unit.

Full-format gradient

The full-format Gradient Module fills the whole background of the entire layout or a section. All logo and text elements must be placed in the type area, which has a margin of at least two base units on all four sides.

Construction

The full-format Gradient Module is composed of two elements: the DHL logo and the full-format gradient on which it is placed.

Placing the DHL logo

Place the logo within the type area in one of the four corners of the section – at least two base units from the edge of the layout. Ensure that it is positioned on the side of the gradient that is 100% Postyellow.

Inside spreads, back covers, subpages

The layout principle is adaptable for inside spreads, back covers, subpages and other places where the DHL logo is not needed. Simply apply the Gradient Module without our logo as shown below.

Dos and Don’ts

Use the highlight gradient module as a free-floating element. The minimum distance from the edge of the canvas is one base unit.

Don’t use the full-format gradient as a free-floating element.

The highlight gradient module maintains a minimum distance of one base unit from the edge of the canvas.

Don’t place the highlight gradient module at a distance of less than one base unit from the margins.

Don’t use the highlight gradient to fill the background of a section.

Don’t reduce the highlight gradient to the point that the gradient it is no longer visible. It should have a length or height of at least eight base units.

Try not to place a full-format gradient section next to a gray section.

Don’t fill section backgrounds with gray tones in combination with highlight gradient.

The highlight gradient module maintains a minimum distance of one base unit from the edge of the canvas.

Use narrow horizontal full-format gradient sections as headers in digital media.

Don’t use narrow horizontal full-format gradient sections in print media.

Placing Text

Create a typical text block

A standard text block includes the following components

Main headline
Topline (optional)
Subline (optional)
Copy text (optional)
Business Unit, claim, and web address (optional)

Typography

Align text to Gradient Module margins

The placement of headlines and text is oriented on the inner margins of the Gradient Module. Align headlines and text flush-left.

At least one line of the main headline must extend across the entire width of the highlight gradient (a). An exception can be made when the highlight gradient itself fills the whole width of a canvas. In this case the width of the headline can be smaller (b).

a) At least one line of a main headline extends across the entire width of the gradient.

b) Exception: Highlight gradient fills the whole width of a canvas.

Maintain a distance of two base units to the logo

The space between the DHL logo and other elements (such as main headline or product/solution logo) is two base units. This keeps the primary focus on the DHL logo. If necessary, the distance can be reduced to one base unit for small media, such as web banners, smartwatches, and small print applications (A7 or smaller). In these cases, elements can also be placed to the left or right of the DHL logo.

Lines and spacing

Use clear spacing or fine lines to separate elements and organize content. Use solid lines to separate elements of dense content and insert lines to separate related content. If you have a lot of content and multiple columns, read the Design Guide Tables and Charts.