The “Wer liefert was” style guide

wlw Logo

Visual appearance of “Wer liefert was”


The present style guide gives an overview of the structure and elements of the corporate design of “Wer liefert was”. It serves as a guide for the creation of printed and digital means of communication and helps at the same time to ensure that the appearance of the company is both consistent and vibrant across all media.

Corporate design is the visual expression of the identity and character of a company. Consistent use at every level of communication ensures continuity and enhances brand awareness. In addition to information on the application of our corporate design for printed materials, this style guide also provides assistance in the design of digital formats. The style guide doesn’t claim to be exhaustive and doesn’t therefore cover all applications.

In this style guide you will find all the important documents to download. Explanatory texts and pictures are intended to help you to correctly use the tools for the design of our look (logo, colors, typography, etc.).

1. Basic elements

.

In this area you will find explanatory texts and images that will help you to correctly use the tools for the design of our look.

1.1. Logotype and company name

Download basic logo

Logotype & company name

The logo is an important component of a look. It boldly and clearly encapsulates the basic idea behind and positioning of the “Wer liefert was” brand and forms the basis of all further design elements.

The “Wer liefert was” wordmark is written within the logo and in continuous text without a question mark. The question mark is, however, retained in the company name, which remains Wer liefert was? GmbH. The “Wer liefert was” logo is also used for the registration of the trademark in the context of trademark protection.

logopanel

Logotype

wordmark

Wordmark

Trademark protection area

A well-defined protection zone clearly positions the trademark and emphasizes its value. No other elements, such as writing or third-party logos, may be placed in the protection area.

logoclearspace

Position in the print layout

In the print layout, the “Wer liefert was” logo is always placed in the bottom right-hand corner.
The distance of the logo to the right-hand and bottom edges must always be greater than the green square in the logo.
In exceptional cases, other logo positions are possible.

logo-position

Size definition

logo_100

Print area 100%

logo_80

Print area 80% = minimum size
To guarantee the best possible visibility of the trademark in all media, its size in print may not be less than 28 mm.

logo_online-size

Digital media

Formats and use

The use of various file formats and color versions is shown here using the example of the basic logo..

logopanel

Special color, 2 c (Pantone shades)
Letterhead, business cards

logopanel

RGB
Online ads, website, PPT

logooutlinecolour

Negative outline logo, bicolor
(Car graphics)

logooutlineblack

Outline logo, black
Postage meter, engravings

logopanel

CMYK, 4c
Brochures such as media brochure, print ads

logobw

Black-and-white logo
Fax, job ads

logooutlinewhite

Negative outline logo, white
Screenprint

Domain addition

There are three variants of the logo with the appropriate domain addition for clearly defined use in Germany, Switzerland and Austria. The basic logo is used if it is not possible to use the domain addition.

logodomain_de

“DE” is the domain code for Germany

logodomain_at

“AT” is the domain code for Austria

logodomain_ch

“CH” is the domain code for Switzerland

1.2. Slogan and URL

Use of slogan and URL

Use of slogan in print media
In addition to the word and figurative mark, the brand slogan “the leading B2B marketplace” is used for print media. The logo is always used with the slogan. For the print area, the short URL is also used alongside the slogan.

  • The URL is shown in bold and in “Wer liefert was” green.
  • Three spaces between the slogan and URL clearly separate the two elements.
claim-lockup_en_1
claim-lockup_en_2

The position of slogan and URL in the layout

Position 1
Our brand slogan is positioned to the left of the logo. If there are multiple URLs, these are positioned on separate lines

If the logo is used at 100% size, the font size is 13.5 pt and the line spacing 15.75 pt.
In this case, the top of the uppercase letters is aligned with the baseline of the word “WER” in the logo.
The baseline of the second line is aligned with the baseline of the word “WAS”.

The distance between the logo and the right-hand edge of the claim is 75% of the width of the green square in the logo.

claim-lockup_en_1a
claim-lockup_en_1b

Position 2
The brand claim can also be used as a heading in the footer if there is other text, such as an address block.

This position can also be used if the slogan is shown without the logo (see as an example the footer of our website).

claim-lockup_en_2a
claim-lockup_en_2b

1.3. wlw and Europages

Download logo

Gemeinsame Darstellung

„Wer liefert was“ und EUROPAGES agieren als eigenständige Schwestergesellschaften unter dem Dach von Paragon Partners. Die gebildete Allianz der beiden größten europäischen B2B-Marktplätze wird durch ein gemeinsames Signet visualisiert. Innerhalb der Schreibweise wird EUROPAGES stets in Versalien geschrieben.

Position Logos

Die beiden Logos werden zentral übereinander gesetzt. Der Abstand zwischen den Logos beträgt 1/2 x.
Eine fest definierte Schutzzone von 1 x positioniert das Markenzeichen eindeutig. Im Bereich des Schutzraums dürfen keine anderen Elemente, wie Schrift oder Fremdlogos, positioniert werden.

logo-kombi-wlw-ep_muster
logo-kombi-wlw-ep_abstaende

1.4. Typography

Download Source Sans Pro

Source Sans

As with our logo, the consistent use of our house font Source Sans reinforces the brand identity of “Wer liefert was”.
Source Sans Pro is a serif typeface with a humanistic look. The slightly narrow letters of Source Sans Pro are ideal for user interfaces which offer little space. Source Sans works in print media just as well as it does on the screen.

Source Sans is also available as a webfont and can be found on Google Fonts.
Source Sans webfont

Source Sans Pro

Examples of Source Sans

Source Sans A-Z and numbers

Source Sans A-Z, numbers, and special characters


Print media

In print media, we use a wide range of font widths: Light, regular, semibold, bold and black. We always try to keep the typography light/airy.

  • Top headlines should be set in Source Sans Light.
  • Source Sans Regular is used for the continuous text.
  • We use Source Sans Bold to establish a hierarchy and occasionally to emphasize/highlight text.
  • Source Sans Black is used very sparingly, especially for special items such as eyecatchers.
  • Source Sans Italics is used for emphasis/highlighting - but only in light and regular.
  • Source Sans SemiBold Italic and Source Sans Bold Italic are not used.
Font weights

Weights


Digital media

The following weights for the in-house font Source Sans are used in digital media: Light, Regular and Semibold.
The font sizes for the screen follow a harmonious gradation. This facilitates the organization of content and creates a balanced typographic hierarchy. Our largest sizes - Kilo, Mega and Giga - should be used sparingly and only for special content such as “large numbers”.

Source Sans Pro

Font weights and sizes for digital media

Fallback font: Arial

To ensure maximum compatibility with browsers and operating systems, Arial is set as the fallback font for the website. Arial is a sans-serif font and can be used without time-consuming adjustments because of the similarity of its tracking.
Arial is used whenever no webfont can be loaded, for example for e-mail newsletters or e-mail communication.

Fallback fonts

Arial

CSS font stack

font-family: "Source Sans Pro", Arial, "Helvetica Neue", Helvetica, sans-serif;

Text alignment

Continuous text is always left-aligned (ragged).
There are a few exceptions for the use of centered text: large numbers, key points in connection with an icon/symbol, eyecatchers and landing page headings.

flushleft

Left-aligned body text

centeredtext

Centered text

--

flushright

Do not right-align text

justified

Do not justify text


Text on color

It is permitted to set white text on dark colors. We would, however, recommend limiting this to headlines and short texts.
Colored text may not be set on a colored background.
Only exception: the URL in wlw green is placed on wlw blue.

Fallback fonts

White text on color background

Fallback fonts

URL in green on blue is allowed

Fallback fonts

Color text on color background

shadowtext

Never add shadows to the text

1.5. Colors

Download ASE file

Primary colors

Our main colors “Wer liefert was” blue and "Wer liefert was” green embody our brand. White will be the dominant color in the overall impression.

“Wer liefert was” blue is used mainly for headings and can also be reduced for use as a background or surface element.

“Wer liefert was” green is used to highlight elements and “large numbers”. In our UI it is used to declare a “call-to-action”.

colours_primary
colours_white

Secondary color palette

Our main colors are complemented by two neutral shades of gray, light blue, turquoise, iris and orange.

Light blue is used in the Marketplace context for highlighting, backgrounds, symbols, buttons, links, etc.

Turquoise is primarily used for signalling our Premium service packages. It can also be used for soft highlights, such as labels, panels, infographics, etc.

Iris can be used for soft highlights, such as labels, panels, infographics, etc.

Dark grey is only used for text.

Light grey is used for backgrounds.

Orange is used for eyecatcher motifs. In addition, it can be used as a complimentary alert color, expressing warning.

colours_secondary_01
colours_secondary_02

Alert colors (platform)

The alert colors are only and exclusively used for highlighting urgent/important information in the core product.

Red is used to signal errors or critical information.

Yellow is used to make the user take notice.

colours_alert

Color references

  • „Wer liefert was“-Blau PANTONE 289 CMYK 100 | 60 | 0 | 65 RGB 0 | 25 | 60 HEX #00193C
  • 80% RGB 51 | 71 | 99 HEX #334763
  • 60% RGB 102 | 117 | 138 HEX #66758A
  • „Wer liefert was“-Grün PANTONE 376 CMYK 55 | 0 | 100 | 0 RGB 137 | 186 | 23 HEX #89BA17
  • 80% RGB 161 | 200 | 69 HEX #A1C845
  • 60% RGB 184 | 214 | 116 HEX #B8D674
  • White CMYK 0 | 0 | 0 | 0 RGB 255 | 255 | 255 HEX #FFFFFF
  • Bright blue PANTONE 299 C CMYK 86 | 8 | 0 | 0 RGB 0 | 163 | 222 HEX #00A3DE
  • 80% RGB 51 | 181 | 229 HEX #33B5E5
  • 60% RGB 102 | 200 | 235 HEX #66C8EB
  • Turquoise PANTONE 326 C CMYK 81 | 0 | 39 | 0 RGB 0 | 178 | 169 HEX #00b2a9
  • 80% RGB 51 | 193 | 186 HEX #33C1BA
  • 60% RGB 102 | 209 | 206 HEX #66D1CE
  • Iris PANTONE 7456 C CMYK 72 | 55 | 0 | 0 RGB 96 | 110 | 178 HEX #606eb2
  • 80% RGB 128 | 139 | 193 HEX #808BC1
  • 60% RGB 160 | 168 | 209 HEX #A0A8D1
  • Dark grey PANTONE 432 C CMYK 23 | 0 | 0 | 79 RGB 71 | 83 | 91 HEX #47535B
  • 80% RGB 108 | 117 | 124 HEX #6C757C
  • 60% RGB 145 | 152 | 157 HEX #91989D
  • Light grey PANTONE COOL GREY 3 C CMYK 25 | 19 | 19 | 0 RGB 202 | 201 | 199 HEX #CAC9C7
  • 80% RGB 213 | 212 | 210 HEX #D5D4D2
  • 60% RGB 223 | 223 | 221 HEX #DFDFDD
  • Orange PANTONE 144 C CMYK 0 | 47 | 100 | 0 RGB 255 | 135 | 0 HEX #FF8700
  • 80% RGB 255 | 159 | 51 HEX #FF9F33
  • 60% RGB 255 | 183 | 102 HEX #FFB766
  • PANTONE 192 C CMYK 0 | 96 | 60 | 0 RGB 228 | 22 | 72 HEX #E41648
  • 80% RGB 233 | 69 | 109 HEX #E9456D
  • 60% RGB 239 | 115 | 145 HEX #EF7391
  • PANTONE 123 C CMYK 5 | 26 | 94 | 0 RGB 244 | 191 | 12 HEX #F4BF0C
  • 80% RGB 246 | 204 | 61 HEX #F6CC3D
  • 60% RGB 248 | 217 | 109 HEX #F8D96D
  • RGB 218 | 221 | 222 HEX #daddde
  • RGB 236 | 237 | 238 HEX #ecedee
  • RGB 246 | 246 | 247 HEX #f6f6f7

1.6. Product icons

Service Packages

These icons help add value to the service packages, making them tangible as entities. Semi-abstract, they are suggestive rather than illustrative.

Each icon references implicitly the notion of the geographic reach of the package it represents.

"Basic" packages use our main brand colors. Premium packages have an additional turquoise accent.

Download Package icons in CMYK [5.3 MB]
Download Package icons in RGB [5.4 MB]
Download Package icons for web [89 KB]

packages
packages

Standard packages
National | Europe | Global
Local

packages
packages

Premium packages.

Products

Product icons translate sometimes complex products into simple, easy-to-understand and approachable symbols.

Each icon focuses on one key aspect of the product it represents.

Download Product icons in CMYK [8.4 MB]
Download Product icons in RGB [8.7 MB]
Download Product icons for web [170 KB]

packages
packages

Ad Booster | Homepage | Top Ranking
etracker | SEO | DACH

packages
packages

European Network | Active Hosting | Retargeting
Product Batch Upload | Product Data Feed | Sponsored Product


Sizes

When used on screen, always implement icons at the designated sizes to avoid poor rendering.
Do not resize icons randomly. Always respect the bounding box of the icon to make sure they scale proportionally.
Our base sizes are:

  • 64 x 64 px
  • 128 x 128 px
  • 256 x 256 px
packages
packages

Clear space

All product icons have a defined clear space equivalent to 1/4 of the icon size. No other content should be placed inside or overlapping this area.
The clear space extends to the width and baseline of the icon name when applied.

packages
packages
packages

Typography: Font weight

Packages

Font-weight: Semibold + Regular
Font-size: 0,375 x icon-height
Line-height: 0,375 x icon-height
Colour: wlw Blue + Turquoise

Products

Font-weight: Light
Font-size: 0,375 x icon-height
Line-height: 0,375 x icon-height
Colour: wlw Blue

packages
packages
packages

Typography: Primary position

Below centered

Font-weight: Light
Font-size: 0,375 x icon-height
Line-hight: 0,375 x icon-height
Colour: wlw Blue

The product name is placed centered below the icon, and on an extension of the icon grid.
The distance from the icon mid-point to the text baseline equals the height of the icon.
The distance from the bottom of the icon to the text baseline equals half the height of the icon.

packages
packages
packages
packages

Typography: Secondary position

Right side middle
Use only when the primary position is not an option!

Font-weight: Light
Font-size: 0,375 x icon-height
Colour: wlw Blue

The product name is placed next to the icon, with vertically aligned centers.
The distance from the right edge of the icon to the left edge of the text equals 1/4 of the width of the icon.

packages
packages

Typography: Inline

When using icons “inline” make sure to respect the clear space area.
Typically, icons should be vertically aligned with the text.

Ideally, the font-size should be no larger than three-quarters the height of the icon.

inline icons

Color background: Dark background

Icons can be placed on a dark background ( “Wer liefert was” blue or Dark grey).
Dark blue fills in the actual icon as well as the product/package name are reversed and filled white.

Download reversed Package icons [293 KB]
Download reversed Product icons [803 KB]

icon_icons_products_reversed
icon_icons_packages_reversed
icon_icons_products_reversed_name

Color background: Light background

Icons can be placed on a light grey background.
To ensure enough contrast, the background should be no darker than our 60% Light Grey ( #DFDFDD).

icon_icons_products_light_background
icon_icons_packages_light_background

1.7. Other symbols and icons

Round symbols

Round symbols are elements that show the way. They help the user to quickly scan a page for specific information or give feedback on a (completed) action. Round symbols should be used in content-oriented contexts, such as in marketing/sales proofpoints, dashboards, etc.

Download symbols

symbols
symbols

UI icons

UI icons symbolize an action, a file, or a status. Their shapes are simplified and geometrical to ensure readability and clarity even with smaller font sizes. They should be used in action-oriented contexts, such as in links, buttons, notifications etc. They are used exclusively on our domains.

Color
On a bright background, the fill color of the UI icons is the same as the text color: # 47535 b.
The color of the inactive/disabled icons is: # b5babd.

Download UI icons

You will find more details in our CSS pattern library:
https://www.wlw.de/wlw_styleguide#atoms-general-icons

symbols

1.8. Charts

Charts help present developments and statistics in a striking and comprehensible way. In the implementation of a graphic, the chart style that most easily and unmistakably reflects the content should be selected. Two presentation options are available for this: Pie charts and bar charts.

diagramm_barchart

You should restrict the use of colors.

diagramm_barchart_highlight

If the chart is a key visual, use one color.

diagramm_barchart_blue

If necessary, use one color for highlighting.

diagramm_piechart

In the pie charts, color-code categories.

1.9. Imagery

bildwelt
bildwelt

The imagery of “Wer liefert was” is a powerful tool that helps us communicate our product and our brand values, position ourselves and distinguish ourselves from others. Photos should document an experience for the customers (or employees) in an authentic manner so that they can identify with it.

Always try to show authentic environments, natural light, and real people in their working environment. Use images that explain and were made intentionally for the purpose. Tell a story. Spark off curiosity and a desire to engage.

Yes and No

The concept is understandable

A clear concept shows an authentic scene with real people and not “models”. The image doesn’t depict a staged photoshoot but a recording of a real scene in natural light.

discuss

Yes.
A clear concept in an authentic environment and natural light. The gestures and facial expressions of the people reflect reality and don’t appear staged.

stock_board

No.
The image was brightened, and the protagonists are models and do not inhabit the same context. The image shows a generic situation and has no depth

Don’t use stock photos if possible.

Use only images that tell a real story and have a distinctive voice.
For specific circumstances, use particular images. For more abstract content, you can be more interpretive.
Don’t use stock photos. Stock photo imagery and clip art is neither specific nor interpretative.

pleased

Yes.
The image shows a real scene.

handshake

No.
The image detail is taken out of the context and is therefore generic and meaningless.

Tell a story

Create a compelling story and generate a sense of context. Make the mood friendly and accessible. What is the story that the image is supposed to underscore? What is the atmosphere like? Focused? Solemn? Is the company small or large?

arteka_task

Yes.
The image shows a real scene with a clear relationship to its environment.

arteka_produkt

Yes.
The focused product is in relationship with its environment. Image depth through clear sharpness and blur.

task_bad

No.
A picture whose story is missing cannot convey mood, brand or context.

duesenhalter_arteka

No.
A motif detached from its context is uninteresting.

References

Use a standard image format for reference portraits. The hexagon shape is reserved for service packages.

reference_sq

Yes.
Use a standard image format for reference portraits.

reference_hexagon

No.
The hexagon shape is reserved for service packages.


Aspect ratio

To ensure coherence, images should always be cropped in a standard aspect ratio. The following aspect ratios are recommended:

  • 16:9
  • 3:2
  • 4:3
  • 1:1
  • 3:4
image ratios


Text on images: Ensure readability

To ensure the legibility of text on an image, we use a transparent gradient which sits on the screen. It is a semi-transparent black gradient. The text that sits on it is white.

textscreen

To ensure that the transparency gradually fades out, the value of 50% is pushed to 1/3 of the distance from the 100% mark.

textscreenapply

The transparency is usually set to approx. 30-70%. This can vary depending on the image..

2. Applications in print media

In print we use the standard DIN formats.

DIN A4 210 x 297 mm (2480 x 3508 px at 300 dpi)
DIN A5 148 x 210 mm (1748 x 2480 px at 300 dpi)
DIN A6 105 x 148 mm (1240 x 1748 px at 300 dpi)

printdin-formats

Examples

2.1. wlw brochure

Download wlw broschure [4,6 MB]

Cover

Logotype
The A4 media brochure uses a full-sized logo.

Margins and columns
Head margin: 11,6 mm
Foot margin: 25 mm
Inside margin: 14,5 mm
Outside margin: 11,6 mm
Columns: 8
Columnsspace: 12 pt

titel_engl

Double page

Generel Headline: Source Sans Pro Semibold / light 27 pt / ZAB 28 pt in blue (Pantone 289 C)
Runnig text: Source Sans Pro Regular / 11 pt auf 14 pt in Dark Grey (Pantone 432 C); Space to Headline 1x ZAB
Bold runnig text: Source Sans Pro Semibold in Dark Grey (Pantone 432 C)
headlines inbetween: Source Sans Pro Semibold / light / 14 pt / 14 pt ZAB in Bright Blue (Pantone 299 C) or blue (Pantone 289 C)
Information text (Bullet-Points): Headline: Source Sans Pro light / 14 pt / ZAB 14 pt; Fließtext Source Sans Pro regualr 8 pt / 10 pt ZAB
Footnote: Source Sans Pro Regular / 7pt / 10 pt ZAB, nicht auf Raster in Dark Grey (Pantone 432 C)
Levels over Pictures: 55% opacity, normal, Bright Blue (Pantone 299 C)

innen_1_engl
innen_2_engl

Lead-in/back page

back_engl

2.2. Flyers DIN A4 landscape

flyer-design-muster-2016

Logotype
Flyers in A4 format use a 90 % logo.

Margins and columns
Margin: 12.75 mm all round
Base grid: 12 columns of 18.5 mm, column spacing 4.5 mm
Head line: Position 1mm thick, position 40 mm from the top
Content field: Position 55 mm from top
Logotype protection area: Position 164.5 mm from top

Typography
Source Sans Pro
Headline: 24 point light/regular, 30 line spacing
Content area: Headline 12 point semibold, continuous text 9 point regular, line spacing 13 point
Claim/URL: 12.5 point regular/bold
Address data: 7 point semibold/regular, 9 point line spacing

Colors
Head line, tagline: Pantone 289 (dark blue)
URL: Pantone 376 (green)
Texts in the content area and address data: Pantone 432 (dark gray)

flyer-design-muster-2016_raster

Examples of use

pricelist
flyer_wlw_europe_eng

3. Digital media applications

3.1. Newsletter templates (BETA)

E-mail with image header

Example: Performance report

In design terms, the e-mail template is based on the “Wer liefert was” website. The colors use the primary and achromatic range of “Wer liefert was”.

erfolgsanalyse_email
email_erfolgsanalyse_structure

Elements

Header image

emailheader_ratio
emailheader_typo
emailheader_focus
Main content

The main content is text-heavy and is strongly focused on the primary call-to-action.
The main content is expanded by supplementary content. They are positioned on the same panel but the background is light gray.

email_maincontent
email_secondarycontent
Additional content and footer

Additional content is placed on panels and separated by a break.

email_support

The footer is depicted at reduced size to guarantee clarity and to highlight the brand claim. The link to the legal notice of wlw.de contains all the legal information.
A possible alternative is the extended footer that includes all legal information and partner logos.

email_footer
email_footer_extended

E-mail without image header A / B

email_no-hero
email_text-only

3.2. Pattern library

All the documented UI elements of the wlw.com platform can be found in our pattern library.
→Pattern library

5. Info & Support

Further information
Contact person:
Jochen Baumann
Senior Brand Manager
T +49 (0)40 2 54 40 153
Jochen.Baumann@wlw.de

Contact
Wer liefert was? GmbH
ABC-Straße 21
20354 Hamburg