Fragmente

Grundfarben

Die Grundfarben von OTTO bestehen aus Rot- und Grautönen. Primärfarbe ist das "OTTO-Rot", genannt red100.

Die Farbcodes stehen als SASS-Variablen zur Verfügung und können für beliebige CSS-Eigenschaften eingesetzt werden.

 

$grey25

#F6F6F6

 

$grey50

#EEEEEE

 

$grey100

#E6E6E6

 

$grey200

#C4C4C4

 

$grey300

#9E9E9E

 

$grey400

#777777

 

$black50

#333333

 

$black100

#222222

 

$red50

#F00020

 

$red100

#D4021D

 

$red200

#BA0019

Sonderfarben

Die Sonderfarben bilden Einsatzzweckbezogene Spezialfarben ab und sollten nicht in anderen Kontexten verwendet werden. Neben einem Grauton für deaktivierte Elemente und einem Gelbton für Services, gibt es Farben für Fehlermeldungen, Hinweise, die Verfügbarkeiten und die Energielabels.

Die Farbcodes stehen als SASS-Variablen zur Verfügung und können für beliebige CSS-Eigenschaften eingesetzt werden.

 

$error-font-color

#FFFFFF

 

$error-background-color

#F24E63

 

$error-inverted-color

#E6344B

 

$error-form-color

#FFBEC6

 

$hint-font-color

#FFFFFF

 

$hint-background-color

#318CD7

 

$hint-inverted-color

#217AC4

 

$success-font-color

#FFFFFF

 

$success-background-color

#71BA24

 

$success-inverted-color

#69AF1F

 

$warning-font-color

#222222

 

$warning-background-color

#F4E245

 

$warning-border-color

#FFD387

 

$warning-inverted-color

#F1B500

 

$warning-inverted-icon-color

#FFD200

 

$warning-form-color

#FFF6A6

 

$disabled-color

#CCCCCC

 

$service-color

#FBB100

 

$service-background-color

#FDD87F

 

$availability-green

#198504

 

$availability-orange

#EE9201

 

$availability-red

#DA2031

 

$energy-label-dark-green

#009640

 

$energy-label-medium-green

#50AF31

 

$energy-label-light-green

#C7D301

 

$energy-label-yellow

#FFED00

 

$energy-label-light-orange

#FBB900

 

$energy-label-dark-orange

#EC6707

 

$energy-label-red

#E30613

Schriftgrößen

Die hier definierten Schriftgrößen inklusive der passenden Zeilenhöhen bilden alle verschiedenen Größen ab, die auf otto.de zum Einsatz kommen sollen. Auf ihnen basieren auch die Copy- und Headline-Patterns.

Die Schriftgrößen sind als SASS-Variablen implementiert und können so auf beliebige Elemente angewendet werden. Sie werden als Teil der Global-Frontend-Settings via Git und Nexus bereitgestellt.

Das SASS-Mixin font-size() übersetzt die Variablen automatisch in font-size- und line-height-Angaben in REM mit px-Fallback.
Beispiel: @include font-size($font350);

Font Größe Line-Height Beispiel-Klasse
$font75 12px / 0.75rem 18px / 1.125rem copy75
$font100 14px / 0.875rem 20px / 1.25rem copy100, headline25
$font125 16px / 1rem 22px / 1.375rem
$font150 18px / 1.125rem 24px / 1.5rem headline50
$font175 20px / 1.25rem 26px / 1.625rem
$font200 22px / 1.375rem 28px / 1.75rem headline75
$font225 24px / 1.5rem 30px / 1.875rem
$font250 26px / 1.625rem 32px / 2rem headline100
$font275 28px / 1.75rem 34px / 2.125rem
$font300 30px / 1.875rem 36px / 2.25rem
$font325 32px / 2rem 38px / 2.375rem
$font350 34px / 2.125rem 40px / 2.5rem headline150

Schriftschnitte

Die Schriftschnitte sind CSS-Klassen die dazu genutzt werden können, den Schriftschnitt von Fließtexten zu definieren. Neben der normalen Schriftstärke stehen eine fette und eine dünne Variante zur Verfügung.

Die copyThin darf erst ab einer Schriftgröße von mindestens 22px ($font200) eingesetzt werden. Auf den Breakpoints S und M ist die copyThin nicht verfügbar und wird automatisch durch die copyNormal ersetzt.

copyNormal

Diese Bauknecht Waschmaschine Super Eco 6413 besticht vor allem durch Ihre Alltagstauglich- keit: Mit 6kg Ladevolumen fasst Sie eine Menge Wäsche und dank der Energieeffizienzklasse A+++ schonen Sie nicht nur die Umwelt sondern auch Ihre Haushaltskasse - der Stromverbrauch ist nämlich äußerst gering. Beim Strom sparen hilft Ihnen zusätzlich der praktische Eco Monitor, in dem er den voraussichtlichen Stromverbrauch des gewählten Programms anzeigt.

copyBold

Diese Bauknecht Waschmaschine Super Eco 6413 besticht vor allem durch Ihre Alltagstauglich- keit: Mit 6kg Ladevolumen fasst Sie eine Menge Wäsche und dank der Energieeffizienzklasse A+++ schonen Sie nicht nur die Umwelt sondern auch Ihre Haushaltskasse - der Stromverbrauch ist nämlich äußerst gering. Beim Strom sparen hilft Ihnen zusätzlich der praktische Eco Monitor, in dem er den voraussichtlichen Stromverbrauch des gewählten Programms anzeigt.

copyThin

Diese Bauknecht Waschmaschine Super Eco 6413 besticht vor allem durch Ihre Alltagstauglich- keit: Mit 6kg Ladevolumen fasst Sie eine Menge Wäsche und dank der Energieeffizienzklasse A+++ schonen Sie nicht nur die Umwelt sondern auch Ihre Haushaltskasse - der Stromverbrauch ist nämlich äußerst gering. Beim Strom sparen hilft Ihnen zusätzlich der praktische Eco Monitor, in dem er den voraussichtlichen Stromverbrauch des gewählten Programms anzeigt.

Webfonts

Die Webfonts beinhalten vier verschiedene Schriftart-Definitionen, über die die OTTO Sans mit ihren drei Schriftschnitten Regular, Bold und Thin sowie die OTTO Icon-Font zur Verfügung gestellt werden können. Auf otto.de müssen sie nicht mehr integriert werden, sondern stehen über die Global Resources bereits seitenübergreifend zur Verwendung bereit. Auf Mobilgeräten (den Breakpoints S und M) wird aus Performancegründen auf das Laden der OTTO Sans Thin verzichtet und als Fallback die OTTO Sans Regular verwendet.

Bitte beachten: Die Schriften sind lizenziert und auf OTTO beschränkt! Sie dürfen nicht für Konzern-Themen oder andere Unternehmen/Töchter der Gruppe eingesetzt werden.

Wichtiger Hinweis zur Nutzung: Die unten stehenden @font-face Definitionen enthalten keine stabilen Pfade zu den Schriften! Unter Umständen existieren bereits neue Versionen der jeweiligen Schrift, da die Dateien versioniert sind. Entnehmen Sie die aktuelle Version bitte entweder direkt aus otto.de Webseite oder aus diesem Link: https://www.otto.de/assets-static/global-resources/assets.global-resources.fonts.latest.css.

OTTO Sans Regular

@font-face {
    font-family: 'OttoSans';
    src: url('https://www.otto.de/assets-static/global-resources/assets/otto-sans_88e5e760.woff2') format('woff2'),
         url('https://www.otto.de/assets-static/global-resources/assets/otto-sans_a4416f4.woff') format('woff'),
         url('https://www.otto.de/assets-static/global-resources/assets/otto-sans_c3506310.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

OTTO Sans Bold

@font-face {
    font-family: 'OttoSans';
    src: url('https://www.otto.de/assets-static/global-resources/assets/otto-sans-bold_89d38c21.woff2') format('woff2'),
         url('https://www.otto.de/assets-static/global-resources/assets/otto-sans-bold_f1a42f72.woff') format('woff'),
         url('https://www.otto.de/assets-static/global-resources/assets/otto-sans-bold_bce00337.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

OTTO Sans Thin

@font-face {
    font-family: 'OttoSansThin';
    src: url('https://www.otto.de/assets-static/global-resources/assets/otto-sans-thin_be4e47f1.woff2') format('woff2'),
         url('https://www.otto.de/assets-static/global-resources/assets/otto-sans-thin_cbdbbbd3.woff') format('woff'),
         url('https://www.otto.de/assets-static/global-resources/assets/otto-sans-thin_1836c4ca.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

OTTO Icons

@font-face {
    font-family: 'OttoIcons';
    src: url('https://www.otto.de/assets-static/global-resources/assets/OTTO-Icons_dad27dac.woff2') format('woff2'),
         url('https://www.otto.de/assets-static/global-resources/assets/OTTO-Icons_af3d05d7.woff') format('woff'),
         url('https://www.otto.de/assets-static/global-resources/assets/OTTO-Icons_9a5bcc97.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Icons

Über die Icon-Font wird eine Reihe von Symbolen zur Verfügung gestellt, die bei entsprechend gesetzter Schriftart allein durch die Angabe eines entsprechenden Zeichens eingebunden werden kann. Der Vorteil an dieser Variante im Vergleich zum Einsatz von Grafikdateien ist, dass Icon-Fonts aus Vektoren bestehen und so ohne Qualitätsverluste auf jede beliebige Größe skaliert werden können.

Sofern vorhanden, bitte anstelle des Characters die entsprechende HTML-Entität für das Icon verwenden. Andernfalls könnte es in älteren Browsern zu Fehlern in der Darstellung führen. (Symbol wird nicht erkannt und mit einem Fragezeichen ersetzt, das dann wiederrum über die Icon-Font formatiert wird)

⚫

⁈

w

w

t

t

B

B

L

L

s

s

e

e

#

#

h

h

±

±

⇐

▶

m

m

z

z

b

b

Φ

Φ

g

g

Π

Π

k

k

Ξ

Ξ

=

=

n

n

Θ

Θ

♥

*

*

/

/

o

o

+

+

-

-

p

p

?

?

i

i

!

!

√

ο

ο

⊕

↑

→

↓

∅

<

&lt;

>

&gt;

^

^

v

v

x

x

X

X

&#8277;

&#10521;

&#8857;

l

l

E

E

»

&raquo;

c

&#99;

&#x2421;

&#59648;

&#59649;

&#59650;

&#59651;

&#59652;

&#59653;

&#59654;

&#59655;

&#59656;

&#59657;

&#59658;

&#59659;

&#59660;

&#59661;

&#59662;

&#59663;

&#59664;

&#59665;

&#59666;

&#59667;

&#59668;

&#59669;

&#59670;

&#59671;

&#59672;

&#59673;

&#59674;

&#59675;

&#59676;

&#59677;

&#59678;

&#59679;

&#59680;

&#xe921;

&#xe922;

&#xe923;

&#xe924;

&#xe925;

&#xe926;

&#xe927;

&#xe928;

&#xe929;

&#xe930;

&#xe931;

&#xe932;

&#xe933;

&#xe934;

&#xe935;

&#xe92a;

&#xe92b;

&#xe92c;

&#xe92d;

&#xe92e;

&#xe92f;

Für dieses Pattern ist kein Konfigurator verfügbar!

Technische Hinweise

Für dieses Pattern sind keine technischen Hinweise vorhanden!