How otto.de, OTTO's corporate site and ottogroup.com look, as of 28 September 2026: full-page views on desktop and mobile, with the fonts, colours, type sizes and structure each site uses. Cookie banners were declined, so consent-based embeds such as social feeds, podcasts and videos show placeholders.
Full-page views
| Page | Desktop | Mobile (390 px) |
|---|---|---|
| otto.de start page | 1440 px | 390 px |
| otto.de/unternehmen | 1280 px | 390 px |
| ottogroup.com | 1440 px | 390 px |
| ottogroup.com, Über uns | 1440 px | 390 px |
The otto.de start page is personalised, so banners and product tiles differ with every visit. On otto.de/unternehmen a few scroll-animated photos stay blank in the desktop view (they appear in the mobile view), and the mobile view repeats the sticky header.
otto.de (shop)
| Aspect | Observed |
|---|---|
| Fonts | OTTO Sans 400, 700 and 800 loaded; font stack OTTOSans, Arial, Helvetica, sans-serif. Served cuts: OTTO Sans regular, medium, bold and thin, OTTO Sans KO Black, OTTO Play |
| Body | 14 px / 24 px, colour rgb(33,33,33) = #212121 |
| Headings | h1 24/32 px Bold #212121 („Willkommen bei OTTO"), section titles 16/24 px Bold; in the page body e.g. „Lass dich inspirieren", „Deine Top Marken" |
| Colours (frequency) | #212121 text, rgb(35,102,203) = #2366CB links, white, #6D6D6D secondary text, #F0F0F0 page background, OTTO red rgb(240,0,32) = #F00020 and sale red rgb(220,0,29) = #DC001D. The design tokens define the brand red as --oc-base-color-otto-red-100: #eb001f and -125: #dc001d |
| Header | red OTTO wordmark left, large rounded search field („Wonach suchst du?"), icon row right (Service, Mein Konto, Merkzettel, Warenkorb); second row „Alle Kategorien" plus Wohnen & Einrichten, Küche & Haushalt, Mode, Baby & Kind, Multimedia, Sport, Beauty, Sale in red |
| Page structure | light grey canvas with white cards; coupon strip (red percentage badges, „Zur Aktivierung" buttons); campaign banner (OTTO Days, purple, OTTO Play lettering, OTTO UP badge); OTTO UP bar in red; horizontal carousels („Lass dich inspirieren", „Beliebte Kategorien", „Outfits für dich", „Wohnideen für dich"); brand block; „Deal des Tages"; service teasers; long SEO text; newsletter; footer with payment methods, service links and the slogan „Otto... find ich gut." |
| Imagery | product cut-outs on white or light grey, lifestyle room sets, fashion on models, 3D-style illustrated teasers (OTTO UP „NEU", app, card) |
| Mobile | same order, single column, carousels scroll horizontally, footer links collapse into accordions |
Tone examples from otto.de: „Lass dich inspirieren" · „Sichere dir GRATIS Versand und sammle Punkte!" · „Gutschein für deine erste Bestellung" · „Wir sind gerne für dich da. 24 Stunden am Tag. 365 Tage im Jahr." · „Tauche ein in die Vielfalt unserer Produkte und genieße die Zeit beim entspannten Shopping rund um die Uhr, ganz ohne Parkplatzsuche oder Schlangestehen."
otto.de/unternehmen (OTTO corporate and press site)
| Aspect | Observed |
|---|---|
| Fonts | OTTO Sans 300, 400, 700 and 900 (900 is KO Black), self-hosted |
| Type | h1 75/77 px weight 900, red rgb(235,0,31) = #EB001F, letter-spacing 0.75 px („Willkommen bei OTTO"); h2/h3 28/40 px Light; body 16 px rgb(60,60,60) = #3C3C3C; small labels 15 px Bold with 0.5 px tracking |
| Colours | #3C3C3C, white, OTTO red #EB001F, warm grey rgb(94,86,84), light blue #DCF0FA, sand #F5E6D7, petrol #1E5A78, green #7EA87B (Sustainable Green), beige #DCBE96, dark teal #006058, pale yellow #FFFAAF, peach #FFE2D2 |
| Header | red wordmark left; nav Unternehmen, Verantwortung, Presse, Jobs; search, accessibility icon, DE/EN right |
| Structure | video hero with headline „Willkommen bei OTTO"; „Auf einen Blick" KPI tiles in petrol, light blue, yellow, peach; „Wir lieben unsere Kund*innen" story list with red short-dash category labels; employer block „Arbeiten bei OTTO?"; responsibility; press releases; social; press contacts; red footer |
| Imagery | real employees on campus, warm daylight, casual clothing; project photos (app, packaging) |
Tone examples from OTTO's corporate site: „Unsere Kultur, unser Campus, unsere Werte: Wir sind OTTO" · „In unseren ‚Stories' nehmen wir euch mit hinter die Kulissen von OTTO." · „Du möchtest direkt sehen, welche Stellen bei uns offen sind? Hier entlang!" · „Wir lieben unsere Kund*innen" · „Werbung, die ankommt: OTTO Advertising".
ottogroup.com
| Aspect | Observed |
|---|---|
| Fonts | Optimist 300 and 400 loaded, 600 declared; a leftover Gotham declaration is not loaded |
| Type | body 16/24 px rgb(25,25,25) = #191919; section titles 32/41.6 px Regular red; teaser titles 16 px Light; copy text 14/20 px Light; large intro paragraphs set in red Regular (Über uns) |
| Colours | #191919, red rgb(240,0,32) = #F00020 (links, headings, icons, rules, buttons), white, greys #717171 #5E5E5E #F8F8F8, beige rgb(245,240,225) = #F5F0E1, salmon rgb(255,210,200) = #FFD2C8 — the same pastels as the annual report |
| Header | „otto group" wordmark in red left, underlined search field in the centre, „Stories", „Menü" and a round „En" language button right; a thin red rule under the header |
| Structure | full-width photo carousel (people in offices); row of four large outlined nav tiles with arrows (Über uns, Strategie, Nachhaltigkeit, Karriereportal); two feature cards on beige and salmon (Benjamin Otto; „Geschäftsjahr 2025/26 Our future: powered by people and tech"); „Neues aus der Otto Group" newsroom grid in light grey panels (press releases with red „g" icon, social, events, videos, podcasts, further articles); „Stories" grid; newsletter and sitemap footer, all text red |
| Components | outline pill buttons with red 1 px border („Zum Newsroom", „Alle Stories", „Jetzt anmelden"); tag pills (Collaboration, Customer Centricity, Diversity, ...); round outline social icons; thin red grid lines around nav tiles |
| Imagery | editorial photos of employees and executives in warm interiors; stories with logistics robots, event photos; the Über uns hero is a colourful digital illustration of an office loft; red line illustration (binoculars) |
| Mobile | hamburger menu, stacked nav tiles as full-width rows with arrows, same red-on-white language |
Tone examples: „Vom Versandhändler zur weltweit agierenden Handels- und Dienstleistungsgruppe mit klarem Fokus auf Innovation und digitaler Transformation" · „Wir blicken mit Freude nach vorne. Weil wir davon überzeugt sind, dass Qualität, Innovation und Fairness sich durchsetzen." (Über uns) · „Immer auf dem neuesten Stand mit unserem Newsletter." (footer).
Takeaways
- OTTO's two sites differ: the shop is functional (
#212121text on light grey, blue links, red only for brand and sale), the corporate site is expressive (75 px KO Black red headlines, colour-block KPI tiles). - ottogroup.com is almost monochrome red on white with Optimist Light, outline pills and pastel cards; it mirrors the annual report one-to-one.
- Red values in the wild: OTTO
#EB001F(Brand Hub, tokens, corporate site),#F00020(shop accents, older OTTO PDFs, all Otto Group media), Otto Group logo SVG#EE0020.