Information

Visual Language

 

The new WMF visual language communicates the pleasure of making things.

It combines premium with real life: we aren't presenting a staged, artificial world, but rather a subtly enhanced reality - with the product in the centre.

The basic ingredients of every image are drawn from the trinity of people, food and product. Even in situations in which we don't see whole people or hands, the individual always remains tangible in the form of traces (chopped vegetables, half-empty glasses, a knife left on the tablet, etc.). Not only that, but the products are actually used!

In other words, we always show SITUATIONS, never an individual product that is separated from its context. We never zoom too much into a motif in order to show an individual pot, for example – we only use knock-outs for product explanations. The situations involving preparation, cooking, eating and drinking recount a little story and have an emotional effect.

Do & Don't

Do: The styling must not be too fixed, but instead provide freedom arising from the moment. Natural foods.

Don't: Artificial, overly-decorated or sterile-looking, colourless sets and lifeless studio situations. Models must not come across as overstyled.

Do: In collages, close-ups and moments are combined in a vibrant and harmonious way.

Don't: In collages, we never show more than two images with the same content (such as only hands, only close-ups). No extreme close-ups!

Text Language

 

In the same way as the new visual language, the actual language used must also communicate the pleasure of creation and ideally in an emotional, real-life way.

The most important textual ingredients: we address the customer directly, often with active imperatives. We use specific words, not artificial ones. All texts have a degree of lightness, inviting the reader to chop, cook and enjoy. We not only communicate product benefits, but also create an underlying mood; we describe situations which, just like the images, are based on the trinity of people, food and products.

In headlines, readers are addressed with an emotional, informal style.

Color Palette

The WMF brand has a distinct color palette that should be used.

C-Black

RGB: 26, 26, 26

HEX: #1a1a1a

C-Green

RGB: 113, 180, 48

HEX: #71B430

C-Darkgreen

RGB: 88, 140, 37

HEX: #588C25

C-Red

RGB: 224, 0, 0

HEX: #E00000

C-Orange

RGB: 249, 183, 0

HEX: #F9B700

Product Line

RGB: 136, 199, 214

HEX: #88C7D6

C-Lightblue

RGB: 143, 207, 249

HEX: #8FCFF9

Website Colors

 

C-Dark

RGB: 51, 51, 51

HEX: #333333

C-Gray

RGB: 102, 102, 102

HEX: #666666

C-Mediumgray

RGB: 165, 165, 165

HEX: #A5A5A5

C-Lightgray

RGB: 219, 223, 224

HEX: #DBDFE0

C-Light

RGB: 226, 226, 226

HEX: #E2E2E2

C-Silver

RGB: 242, 242, 242

HEX: #F2F2F2

C-Silverblue

RGB: 241, 242, 243

HEX: #F1F2F3

C-Shadowgray

RGB: 246, 247, 248

HEX: #F6F7F8

Gray Colors

 

C-Coffee

RGB: 218, 215, 206

HEX: #DAD7CE

C-Lightbrown

RGB: 144, 123, 100

HEX: #907B64

C-Brown

RGB: 114, 97, 79

HEX: #72614F

WMF Coffee Colors

 

Hotel

RGB: 0, 103, 136

HEX: #006788

WMF Hotel Colors

 

White

RGB: 255, 255, 255

HEX: #ffffff

Anthracite

RGB: 60, 59, 58

HEX: #3c3b3a

Silver

RGB: 177, 178, 179

HEX: #b1b2b3

Blue

RGB: 94, 138, 180

HEX: #5e8ab4

L-Blue

RGB: 143, 207, 249

HEX: #8fcff9

WMF Group Colors

 

Typefaces

All text is typeset in WMF’s house font, “WMF Rotis”. This font is the only one used in all communications.

WMF Rotis

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Ä Ö Ü
a b c d e f g h i j k l m n o p q r s t u v w x y z ä ö ü ß
0 1 2 3 4 5 6 7 8 9
Markup

font-family: 'Rotis II Sans', Arial, sans-serif;

font-family: 'Rotis II Sans Bold', Arial, sans-serif;

font-family: 'Rotis II Sans Italic', Arial, sans-serif;

For Headlines WMF Rotis Regular, WMF Rotis Bold and WMF Rotis Regular Italic is used.

 

Headings

For the web WMF Rotis is used for Headings. Print Headings are only WMF Rotis Regular, WMF Rotis Regular Italic, WMF Rotis Medium and WMF Rotis Bold can be used.

h1. The quick brown fox jumps over the lazy dog

h2. The quick brown fox jumps over the lazy dog

h3. The quick brown fox jumps over the lazy dog

h4. The quick brown fox jumps over the lazy dog

h5. The quick brown fox jumps over the lazy dog
h6. The quick brown fox jumps over the lazy dog
Markup

/* h1 */ font-size: 40px; font-family: 'Rotis II Sans', Arial, sans-serif;

/* h2 */ font-size: 34px; font-family: 'Rotis II Sans', Arial, sans-serif;

/* h3 */ font-size: 25px; font-family: "Rotis II Sans",Arial,sans-serif;

/* h4 */ font-size: 40px; font-family: 'Rotis II Sans', Arial, sans-serif

/* h6 */ font-size: 40px; font-family: "Rotis II Sans",Arial,sans-serif;

/* h7 */ font-size: 40px; font-family: "Rotis II Sans",Arial,sans-serif;

!WMF Rotis must be licensed if the font-family will be used as a webfont (@font-face). Contact GDM for more details.

Grid

 

a

b

c

d

Markup

<div class="f-grid">
<div class="f-grid__cell"><p class="notification">a</p></div>
<div class="f-grid__cell"><p class="notification">b</p></div>
<div class="f-grid__cell"><p class="notification">c</p></div>
<div class="f-grid__cell"><p class="notification">d</p></div>
</div>

Grid Multiline

 

x6

x6

x3

x3

x4

x2

Markup

<div class="f-grid f-grid--multiline">
<div class="f-grid__cell f-grid__cell--6"><p class="notification">x6</p></div>
<div class="f-grid__cell f-grid__cell--6"><p class="notification">x6</p></div>
<div class="f-grid__cell f-grid__cell--3"><p class="notification">x3</p></div>
<div class="f-grid__cell f-grid__cell--3"><p class="notification">x3</p></div>
<div class="f-grid__cell f-grid__cell--4"><p class="notification">x4</p></div>
<div class="f-grid__cell f-grid__cell--2"><p class="notification">x2</p></div>
</div>

Media Queries

Website content is limited to a width of 1170px inside a centered container. The container changes the size depending on the current viewport size.

Markup

/* Large devices */ @media only screen and (max-width: 1199px) { ... }

/* Medium devices */ @media only screen and (max-width: 1023px) { ... }

/* Small devices */ @media only screen and (max-width: 767px) { ... }

/* Very small devices */ @media only screen and (max-width: 488px) { ... }

Website Content Width

Size NameWidth
Default 1170px
Large 940px
Medium 720px
Small 90%

Iconography

 

ajax-loader

arrow-down-34x18

arrow-left-18x34

arrow-left-neg-s-10x16

arrow-left-s-10x16

arrow-left-s-7x11

arrow-right-18x34

arrow-right-neg-s-10x16

arrow-right-neg-s

arrow-right-s-10x16

arrow-right-s-7x11

arrow-up-34x18

caret-features-tabs-40x20

caret-flyout-24x12

caret-left-dark

caret-left-lightblue

caret-left-slider

caret-meta-16x8

caret-meta-20x10

caret-meta-dark-up

caret-meta-dark

caret-meta-fly

caret-right-dark

caret-right-lightblue

caret-right-slider

cart-white-20x20

check-dark

checkbox-box

checkbox-checked

close-18x18

close-22x22

close-bright-22x22

basket-dark

delete

search-dark

divider-dunkel.png

divider.png

filter-off-25x25

filter-on-25x25

icon-minus-9x9

icon-plus-9x9

icon_sprite.png

product-download-16x16

rss-30x30

scroll-arrow-30x16

select-arrow-dark-45x45

select-arrow-dark

select-back.png

star-big.gif

stars-empty.png

stars-full.png

stars-rating

flagg-31x49

storelocator-dark

storelocator-white

topscroll-arrow-45x45

youtube-26x18

facebook-12x18

facebook-16x24

facebook-circle-45x45

pinterest-circle-45x45

btn-facebook-35x35

btn-google-35x35

btn-xing-35x35

mein-wmf-logo-green

mein-wmf

meinWMF-100-gruen.png

Buttons

Buttons are available as <a> and <button> elements.

Link
Markup

<a href="#" class="button button-default">Link</a>

<button class="button button-default"><span>Button</span></button>

Default Buttons

ButtonColor
Link #333333
Button #71B430
Markup

<button class="button button"><span>Button</span></button>

<button class="button button-default"><span>Default</span></button>

<button class="button button-primary button-cart"><span>Cart</span></button>

<button class="button button-primary button-availability"><span>Availability</span></button>

Styled Buttons

Customized buttons to be used in specific areas.

Lists

  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
Markup

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>

  1. item 1
  2. item 2
  3. item 3
  4. item 4
  5. item 5
Markup

<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ol>

Tables

Simple Table

Table 1 Table 2
Table 2 Table 3
Table 4 Table 5
Markup

<table>
<tr><td>Table 1</td><td>Table 2</td></tr>
<tr><td>Table 2</td><td>Table 3</td></tr>
<tr><td>Table 4</td><td>Table 5</td></tr>
</table>

Table with head, body and foot

HeadHeadHeadHead
Foot Foot Foot Foot
Body Body Body Body
Markup

<table>
<thead><tr><th>...</th></tr></thead>
<tfoot><tr><td>...</td></tr></tfoot>
<tbody><tr><td>...</td></tr></tbody>
</table>

PDP Specification Table

Marke WMF
Kollektion WMF ProfiSelect
Artikelanzahl 2-teilig
Hauptmaterial Glas
Markup

<!-- Location Specific Table Style -->

Notifications

Tooltips

Forms

  • * Pflichtfelder
  • (z.B. zusätzliche Adresse oder Packstation)

Form Example

Forms Layouts are defined for a specific container or page.

Basic Input

Markup

<input type="text" name="input" class="input-text" placeholder="Placeholder" >

Email Input

Markup

<input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="email_address" class="input-text" value="" placeholder="E-Mail-Adresse">

Password Input

Markup

<input type="password" name="password" class="input-text" placeholder="Passwort">

Telephone Input

Markup

<input type="tel" name="telephone" value="" class="input-text">

Textarea

Markup

<textarea name="textarea" rows="3" class="input"></textarea>

Select

Markup

<select name="selected" class="wmf-select">
<option value="" disabled="disabled" selected="selected">-- Bitte wählen --</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>

Checkbox

Markup

<select name="selected" class="wmf-select">
<option value="" disabled="disabled" selected="selected">-- Bitte wählen --</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>

Radio

Markup

<select name="selected" class="wmf-select">
<option value="" disabled="disabled" selected="selected">-- Bitte wählen --</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>

Tabs

Breadcrumbs

Breacrumbs use Schema.org Microdata attributes to provide search engines with structured data.

Markup

<div class="breadcrumbs" itemprop="breadcrumb" itemscope="" itemtype="http://schema.org/BreadcrumbList"> <ul>
<li class="home" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a href="#stygd-breadcrumbs" title="Zur Startseite" itemprop="item"><span itemprop="name">Daheim</span></a>
<span>/ </span>
</li>
<li class="current_page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<strong itemprop="item">Breadcrumb location</strong>
</li>
</ul>
</div>

Modals

WMF Design

 

Open Layer Video Modal