Der Loader ist ein kreisförmiger Ladeindikator, mit dessen Hilfe dem Nutzer angezeigt werden kann, dass Seiteninhalte geladen werden. Er steht in drei Größen zur Verfügung.

Mit Hilfe der Hinweiskommunikation können dem Nutzer Informationen auf der Seite mitgeteilt werden. Der Inhalt eines Hinweises kann ein- oder mehrzeilig sein.

Es gibt insgesamt vier Arten von Hinweisen:

• Hinweis: Eine neutrale Information.
• Erfolg: Eine Information über eine erfolgreich durchgeführte Aktion.
• Warnung: Ein Hinweis auf ein mögliches Problem oder eine andere wichtige Information. (In einem Flow kommt der Nutzer auch ohne Behebung des Problems weiter.)
• Fehler: Eine wichtige Information über ein Problem, das das Ausführen einer gewünschten Aktion verhindert hat. (In einem Flow muss das Problem gelöst werden, bevor der Nutzer weiterkommt.)

Zusätzlich gibt es die Möglichkeit, ein "Schließen-X" in die Hinweiskommunikation zu integrieren, über das die Meldung ausgeblendet werden kann.

Links innerhalb von Hinweisblöcken können mit der Klasse p_message__link um einen dezenten Hover-Effekt ergänzt werden.

Das Lieferbarkeit-Pattern dient der Formatierung von Lieferbarkeitsaussagen. Es stehen drei Zustände mit unterschiedlichen Farben zur Verfügung: "Schnell lieferbar", "Bald lieferbar" und "Nicht lieferbar".

Mit Hilfe des Badges können Zustände an Stellen visualisiert werden, an denen nur wenig Platz zur Verfügung steht. Es wird momentan zum Beispiel im Header zur Darstellung des Login-Status oder der Anzahl der Artikel im Warenkorb und Merkzettel eingesetzt.

Mit Hilfe des Badges können Zustände an Stellen visualisiert werden, an denen nur wenig Platz zur Verfügung steht. Es wird momentan zum Beispiel im Header zur Darstellung des Login-Status oder der Anzahl der Artikel im Warenkorb und Merkzettel eingesetzt. Ein Badge darf nur Icons oder Zahlen enthalten.

Standardhintergrundfarbe ist das grey400, es kann aber auch eine beliebige andere Hintergrundfarbe definiert werden.

Mit Hilfe des Labels können ergänzende Informationen an Stellen hervorgehoben werden, an denen nur wenig Platz zur Verfügung steht.

Standardhintergrundfarbe des Labels ist das red100, es kann aber auch eine beliebige andere Hintergrundfarbe definiert werden.

Das Flag ist ein Störer mit dem ein Status, wie beispielsweise die Rabattierung eines Produkts, hervorgehoben werden kann.

Hintergrundfarbe des Flags ist das red100.

Das Energielabel dient dazu, die Energieeffizienzklasse eines Produkts gemäß EU-Verordnung darzustellen. Das Pattern besteht aus einem Pfeil in einer von zwei definierten Größen, einer von sieben Farben und einer von zehn Beschriftungen. Die sieben Farben sind von der EU vorgegeben und keine OTTO-Farben. Sie sollen nicht in anderen Kontexten eingesetzt werden!

Bitte beachten: Die Farben und Beschriftungen sind nicht aneinander gekoppelt. Dies ist notwendig, da die beste Energieeffizienzklasse, die immer dunkelgrün dargestellt wird, je nach Produktkategorie zwischen A, A+, A++ und A+++ variiert. Somit können Energielabel mit gleichen Buchstaben unterschiedliche Farben besitzen.

Das Energielabel-Pattern beinhaltet keine Funktionalität. So muss beispielsweise das Öffnen eines Layers mit dem detaillierten Energielabel selbst implementiert werden.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 20'>
    <path fill='$FARBE' d='M26.1 0H0v20h26.1L35 9.6z'/>
    <path fill='#ffffff' d='M0 0h8v20H0z'/>
    <path d='M4.1 16.5h1v.6c-.1.1-.3.2-.5.3s-.3.1-.5.1c-.3 0-.6-.1-.8-.4s-.4-.8-.4-1.4.1-1 .3-1.3.5-.4.9-.4c.2 0 .4.1.6.2s.3.3.3.6l.8-.2c-.1-.5-.3-.8-.6-1.1s-.7-.4-1.2-.4c-.4 0-.8.1-1.1.3s-.4.6-.6 1-.3.8-.3 1.4c0 .5.1 1 .3 1.4s.4.7.7.9.7.3 1.1.3c.3 0 .7-.1 1-.2s.6-.3.8-.5v-2H4.1v.8zM3.2 5.4h1.6l.4 1.1h.9l-1.6-5h-.9L2 6.5h.9l.3-1.1zm.9-2.7l.6 1.9H3.5l.6-1.9zM5.6 8.9L4 7.5 2.3 8.9l.6.6.7-.6v3.3h.8V8.9l.6.6z'/><path d='M26.1 20H0V0h26.1l9 9.6-9 10.4zM.5 19.5h25.3l8.6-9.9L25.8.5H.5v19z'/>
</svg>

Mit Hilfe des Kundenbewertungs-Patterns kann eine Sterne-Bewertung visualisiert werden. Es gibt halbe, volle und leere Sterne, so dass Bewertungen zwischen null und fünf Sternen in 0,5er-Schritten abgebildet werden können.

Das Pattern "Notiz" dient dazu, Kommentare oder Hinweise zu verschiedenen Produkten und Funktionen auf otto.de zu ermöglichen. Es existieren zwei Varianten, die durch ihre unterschiedliche Pfeilausrichtung entweder über unter dem zu kommentierenden Element eingefügt werden können.

Das Pattern der Status-Schritte zeigt eine definierte Anzahl an Schritten an und visualisiert, in welchem Schritt sich der Nutzer gerade befindet. Jeder Schritt besteht aus einer Zahl und einer Beschriftung.