Information

WMF verwendet Cookies, um die Webseite bestmöglich an die Bedürfnisse unserer Besucher anpassen zu können. Mit Verwendung dieser Webseite stimmen Sie zu, dass Cookies auf Ihrem Computer gespeichert werden. Nähere Informationen:  Datenschutzerklärung

    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.

    Sinova Pro

    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: 'Sinova Pro', Arial, sans-serif;

    font-family: 'Sinova Pro Medium', Arial, sans-serif;

    font-family: 'Sinova Pro Italic', Arial, sans-serif;

    For body text Sinova Pro, Sinova Pro Medium and Sinova Pro Italic is used.

    Headings

    For the web WMF Rotis and Sinova Pro is used for Headings. Print Headings are not in Sinova Pro and 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: "Sinova Pro",Arial,sans-serif;

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

    /* h6 */ font-size: 40px; font-family: "Sinova Pro",Arial,sans-serif;

    /* h7 */ font-size: 40px; font-family: "Sinova Pro",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

    Markup

    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 Name Width
    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

    Button Color
    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

    Head Head Head Head
    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