OTTODesign System

Foundations

Logo

A logo is a visual representation of a brand or app. The components contain all logos used at otto.de. It is provided to guarantee that all logos are up to date and are the same on all pages.

Overview

All logos can be found in the overview. The logos are separated into the following categories:

  • OTTO
  • Payment
  • Social
  • Seal
  • App

For usage of the OTTO logos, also see our brandhub guidelines.

OTTO OTTO UP OTTO UP, Dein Vorteilsprogramm
UP Otto … find' ich gut.
OTTO OTTO UP OTTO UP, Dein Vorteilsprogramm
LiveOTTO logos
HTML
<div style="margin:0;background:var(--oc-base-color-white-100,#fff)">
<div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:32px 40px;padding:40px 32px 24px">
  <img src="/assets-static/icons/pl_logo_otto.svg" alt="OTTO" style="height:40px;width:auto;background:none">
  <img src="/assets-static/icons/pl_logo_otto-up.svg" alt="OTTO UP" style="height:40px;width:auto;background:none">
  <img src="/assets-static/icons/pl_logo_otto-up-claim.svg" alt="OTTO UP, Dein Vorteilsprogramm" style="height:57px;width:auto;background:none">
<div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:32px 88px;padding:8px 32px 40px">
  <img src="/assets-static/icons/pl_logo_up.svg" alt="UP" style="height:40px;width:auto;background:none">
  <img src="/assets-static/icons/pl_logo_slogan.svg" alt="Otto … find' ich gut." style="height:40px;width:auto;background:none">
<div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:32px 40px;padding:40px 32px;background:var(--oc-base-color-black-100,#212121)">
  <img src="/assets-static/icons/pl_logo_otto-white.svg" alt="OTTO" style="height:40px;width:auto;background:none">
  <img src="/assets-static/icons/pl_logo_otto-up-white.svg" alt="OTTO UP" style="height:40px;width:auto;background:none">
  <img src="/assets-static/icons/pl_logo_otto-up-claim-white.svg" alt="OTTO UP, Dein Vorteilsprogramm" style="height:57px;width:auto;background:none">
OTTO Payments Mastercard Visa
PayPal PayPal SEPA Lastschrift SEPA Lastschrift
Livepayment logos
HTML
<div style="margin:0;padding:40px 32px;background:var(--oc-base-color-white-100,#fff);display:flex;flex-direction:column;align-items:center;gap:40px">
<div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:32px 48px">
  <img src="/assets-static/icons/pl_logo_otto-payments.svg" alt="OTTO Payments" style="height:40px;width:auto;background:none">
  <img src="/assets-static/icons/pl_logo_mastercard.svg" alt="Mastercard" style="height:40px;width:auto;background:none">
  <img src="/assets-static/icons/pl_logo_visa.svg" alt="Visa" style="height:40px;width:auto;background:none">
<div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:32px 48px">
  <img src="/assets-static/icons/pl_logo_paypal.svg" alt="PayPal" style="height:40px;width:auto;background:none">
  <img src="/assets-static/icons/pl_logo_paypal-monogram.svg" alt="PayPal" style="height:40px;width:auto;background:none">
  <img src="/assets-static/icons/pl_logo_sepa-horizontal.svg" alt="SEPA Lastschrift" style="height:40px;width:auto;background:none">
  <img src="/assets-static/icons/pl_logo_sepa-vertical.svg" alt="SEPA Lastschrift" style="height:40px;width:auto;background:none">
Facebook GitHub Instagram LinkedIn Pinterest Snapchat TikTok XING YouTube
Livesocial logos
HTML
<div style="margin:0;padding:40px 32px;background:var(--oc-base-color-white-100,#fff);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px 48px">
<img src="/assets-static/icons/pl_logo_facebook.svg" alt="Facebook" style="height:24px;width:auto;background:none">
<img src="/assets-static/icons/pl_logo_github.svg" alt="GitHub" style="height:24px;width:auto;background:none">
<img src="/assets-static/icons/pl_logo_instagram.svg" alt="Instagram" style="height:24px;width:auto;background:none">
<img src="/assets-static/icons/pl_logo_linkedin.svg" alt="LinkedIn" style="height:24px;width:auto;background:none">
<img src="/assets-static/icons/pl_logo_pinterest.svg" alt="Pinterest" style="height:24px;width:auto;background:none">
<img src="/assets-static/icons/pl_logo_snapchat.svg" alt="Snapchat" style="height:24px;width:auto;background:none">
<img src="/assets-static/icons/pl_logo_tiktok.svg" alt="TikTok" style="height:24px;width:auto;background:none">
<img src="/assets-static/icons/pl_logo_xing.svg" alt="XING" style="height:24px;width:auto;background:none">
<img src="/assets-static/icons/pl_logo_youtube.svg" alt="YouTube" style="height:24px;width:auto;background:none">
EHI Geprüfter Online-Shop
Liveseal logo
HTML
<div style="margin:0;padding:40px 32px;background:var(--oc-base-color-white-100,#fff);display:flex;justify-content:center">
<img src="/assets-static/icons/pl_logo_ehi.svg" alt="EHI Geprüfter Online-Shop" style="height:40px;width:auto;background:none">
OTTO App Laden im App Store Jetzt bei Google Play
Liveapp logos
HTML
<div style="margin:0;padding:40px 32px;background:var(--oc-base-color-white-100,#fff);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:32px 80px">
<img src="/assets-static/icons/pl_logo_otto-app.svg" alt="OTTO App" style="height:40px;width:auto;background:none">
<img src="/assets-static/icons/pl_logo_app-store.svg" alt="Laden im App Store" style="height:40px;width:auto;background:none">
<img src="/assets-static/icons/pl_logo_play-store.svg" alt="Jetzt bei Google Play" style="height:40px;width:auto;background:none">

Behavior

Interaction

You can optionally make the logo interactive.

States

If interactive, it uses states of interactive overlay.

OTTO

Default

OTTO

Hover

OTTO

Pressed

OTTO

Focus

LiveStates
HTML
<div style="margin:0;display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--oc-base-color-gray-25,#f0f0f0)">
<div style="display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;background:var(--oc-base-color-white-100,#fff)"><span style="display:block;padding:2px;border-radius:4px"><img src="/assets-static/icons/pl_logo_otto.svg" alt="OTTO" style="height:40px;width:auto;background:none"></span><p class="demo-label">Default</p></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;background:var(--oc-base-color-white-100,#fff)"><span style="display:block;padding:2px;border-radius:4px;background:rgba(0,0,0,.03)"><img src="/assets-static/icons/pl_logo_otto.svg" alt="OTTO" style="height:40px;width:auto;background:none"></span><p class="demo-label">Hover</p></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;background:var(--oc-base-color-white-100,#fff)"><span style="display:block;padding:2px;border-radius:4px;background:rgba(0,0,0,.09)"><img src="/assets-static/icons/pl_logo_otto.svg" alt="OTTO" style="height:40px;width:auto;background:none"></span><p class="demo-label">Pressed</p></div>
<div style="display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;background:var(--oc-base-color-white-100,#fff)"><span style="display:block;padding:2px;border-radius:4px;outline:var(--oc-semantic-focus-outline-width,2px) solid var(--oc-semantic-focus-outline-color,#4b89dc);outline-offset:0"><img src="/assets-static/icons/pl_logo_otto.svg" alt="OTTO" style="height:40px;width:auto;background:none"></span><p class="demo-label">Focus</p></div>

Fitting

The logos can be scaled freely because they are provided as SVG files. When scaling the logo, try to stay inside the grid and use 4px or 8px steps. All logos have a default fixed height of 40px. The width is fixed, and should always be scaled proportionally. For the width, it is also possible to use fill-parent.

OTTO32px
OTTO40px (Default)
OTTO80px
Livescaling
HTML
<div style="padding:40px 24px;background:var(--oc-base-color-white-100,#fff);display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,auto));justify-content:space-evenly;align-items:start;gap:40px 24px;color:#f06;font:0.8125rem/1.25rem ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center">
<div style="display:flex;flex-direction:column;align-items:center;gap:24px"><span style="display:flex;align-items:flex-start;height:80px"><img src="/assets-static/icons/pl_logo_otto.svg" alt="OTTO" style="height:32px;width:auto;background:none"></span>32px</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:24px"><span style="display:flex;align-items:flex-start;height:80px"><img src="/assets-static/icons/pl_logo_otto.svg" alt="OTTO" style="height:40px;width:auto;background:none"></span>40px (Default)</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:24px"><span style="display:flex;align-items:flex-start;height:80px"><img src="/assets-static/icons/pl_logo_otto.svg" alt="OTTO" style="height:80px;width:auto;max-width:none;background:none"></span>80px</div>
fixed width
40px
OTTO
Livefitting
HTML
<div style="margin:0;padding:32px 24px 48px;background:var(--oc-base-color-white-100,#fff);display:flex;justify-content:center;color:#f06;font:0.8125rem/1.25rem ui-monospace,SFMono-Regular,Menlo,monospace">
<div style="display:grid;grid-template-columns:auto auto;gap:8px 12px;align-items:center">
  <span></span>
  <div style="display:flex;flex-direction:column;align-items:center;gap:6px">fixed width<span style="width:119px;height:7px;border:1px solid #f06;border-top:0;border-bottom:0;background:linear-gradient(#f06,#f06) center/100% 1px no-repeat"></span></div>
  <div style="display:flex;align-items:center;gap:8px;height:40px">40px<span style="width:7px;height:40px;border:1px solid #f06;border-left:0;border-right:0;background:linear-gradient(#f06,#f06) center/1px 100% no-repeat"></span></div>
  <img src="/assets-static/icons/pl_logo_otto.svg" alt="OTTO" style="height:40px;width:auto;background:none">

Best practices

OTTO
DoUse logos on backgrounds with sufficient contrast.
OTTO
DoUse the white logos on darker backgrounds.
OTTO
Don'tLogos should not be placed on backgrounds with low contrast.
OTTO UP PayPal
Don'tLogos should not be placed within the bleed area.
OTTO Otto … find' ich gut.
Don'tLogo should not be distorted or bent.

Willkommen bei OTTO

Bezahl einfach mit Visa bei uns

CautionLogos should not be integrated in headlines or continuous text.

Accessibility

According to the web content accessibility guidelines (WCAG) 2.1, graphic objects, including logos, must have a contrast ratio of at least 3:1.

For further information on accessibility, refer to the technical documentation.

Status

Implementation

Note: For full technical documentation of logos, visit Storybook/Logo.

Updated 10 June 2026