OTTO DESIGN.md

Design System Inspiration of OTTO

Overview

Visual Theme & Atmosphere

OTTO is a German online shop and the retail brand of the Hamburg-based Otto Group. Its story starts on 17 August 1949, when the 40-year-old Werner Otto founded "Werner Otto Versandhandel", a mail-order company with three employees, in barracks in Hamburg-Schnelsen. The first catalogue followed in 1950. In 1960 the business moved to Hamburg-Bramfeld, where the group is still based.

In 2022 OTTO relaunched its corporate design with the agencies Mutabor and C/O Setzkorn Kemper. Mutabor describes a new house typeface, a versatile colour spectrum, clear layouts and expressive imagery. With type designer Henning Skibbe they made OTTO Play, a campaign face whose letters each carry one of four brand tonalities, swapped in automatically through OpenType contextual alternates. It sits alongside OTTO Sans, the typeface the shop renders in.

The shop is white and calm, with dark #212121 text, blue #2366cb for interactive text, and red — #eb001f for the brand, #dc001d for sale and primary fills.

What makes it worth reading:

• A public, layered system. OTTO Components tokens run base → semantic → component (--oc-base-color-*, --oc-semantic-color-text-interactive, --oc-component-button-*).
• Commerce as its own layer. 92 --ofc-* tokens cover what a shop needs and a generic system doesn't: EU energy labels, product colour swatches, the wishlist heart, price information.
• Two reds. Brand red and sale red are separate tokens, a shade apart.

Primary tasks

• Search and browse categories; open a product.
• Sign in; manage the wishlist, basket and orders.

Brand Narrative

From a Hamburg mail-order business with three employees to a national online shop, OTTO has reinvented its channel more than once. The 2022 relaunch gave it its own type — a calm sans for the shop and an expressive campaign face — and the design system behind otto.de is public, layered and extended for commerce.

Principles

• Blue acts, red sells. Interactive text is blue; red is brand and sale.
• Tokens in layers. Base, semantic, component, then commerce.
• Calm shop, loud campaigns. OTTO Sans in the interface, OTTO Play on posters.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured with getComputedStyle on otto.de: 729 root custom properties — about 630 --oc-*, 92 --ofc-*, and small --font-*, --icon-*, --label-* groups. No framework namespace.

Brand and ink

• Brand (#eb001f) — --oc-semantic-color-brand, --oc-semantic-color-text-brand.
• Primary (#dc001d) — --oc-semantic-color-background-primary, --oc-semantic-color-sale-background.
• Foreground (#212121) — --oc-semantic-color-text-default; 62 of 65 <p> elements.
• Text secondary (#6d6d6d) · Disabled text (#949494).
• Canvas (#ffffff) · Frame (#f0f0f0, --oc-semantic-color-background-frame).

Interactive

• Interactive (#2366cb) — --oc-semantic-color-text-interactive; links and product tiles.
• Interactive hover (#1c50a0) and pressed (#143b75) — the tile link's states.
• Hint (#dcf2ff) — --oc-semantic-color-background-hint.

Disabled

Disabled background #e5e5e5 · Disabled border #cccccc.

Status

Success #227642 · Warning #ae4518 · Error #b30023 · Sustainable #50734d. A range of soft, block and card backgrounds (yellow, mint, purple, beige, pink …) serves editorial and campaign surfaces.

Typography

Font family

OTTO Sans — OTTOSans, Arial, Helvetica, sans-serif on body, headings and buttons, served by OTTO. document.fonts loaded 400, 700 and 800. The campaign face OTTO Play did not load on the pages measured.

Scale

Measured: the search field 16px/400, product tiles 14px/400.

Layout

• White pages with grey #f0f0f0 frames; product grids on search and category pages.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

One elevation: --oc-semantic-shadow-above = drop-shadow(0 1px 2px #00000040) drop-shadow(0 4px 6px #0000001a). --oc-semantic-shadow-stacked is empty — no shadow.

Motion & Easing

Not measured.

---

Tier 1 sources: https://www.otto.de/ (live homepage — 729 root custom properties read via getComputedStyle, OTTO Sans loaded, search field and header link measured, captured 2026-09-26); https://www.otto.de/suche/sofa/ (search results — product tile link measured at rest, hover and press, captured 2026-09-26); https://designsystem.otto.de/ (OTTO Design System on zeroheight — nonsense path returns 404, read 2026-09-26); https://www.otto.de/design-system/getting-started (legacy docs — "Design System powered by OTTO Components", rendered; nonsense path renders "404 - OTTO Design System", read 2026-09-26); https://www.ottogroup.com/en/ueber-uns/historie-und-gruender.php (Otto Group history — 17 August 1949, Werner Otto, Hamburg-Schnelsen, Bramfeld 1960, read 2026-09-26); https://www.mutabor.de/work/otto (Mutabor case study — 2022 corporate design relaunch, OTTO Play, read 2026-09-26); https://page-online.de/kreation/clevere-open-type-hausschrift-fuer-otto/ (PAGE, 15 Feb 2022 — OTTO Play with Henning Skibbe, OTTO Sans, read 2026-09-26)

Components

Measured on otto.de and a search results page after declining cookies (OneTrust), focus read under a real Tab key, and a hover counted only when :hover matched.

• Product tile link — #2366cb, 14px. Hover darkens it to #1c50a0, press to #143b75.
• Search field — transparent, #212121, 48px, 1px 2px 1px 16px, 16px/400. Nothing measured changes on hover, press or focus.
• Header link — Mein Konto, #212121, 40px. The link's own properties do not change; an ::after overlay adds rgba(0,0,0,0.03) on hover and rgba(0,0,0,0.09) when pressed.

Radius

Semantic radii 0, .25rem, .5rem (buttons), .75rem, 1rem, 1.5rem, and focus-ring radii that are each 2px larger than the shape they surround.

States

Hover: product links darken to #1c50a0; the search field does not change; the header link gains a 3% ::after overlay. Press: #143b75 on product links, a 9% overlay on the header link. Focus on the search field changes nothing. The product-page basket button could not be reached (product pages returned HTTP 400 to automation).

Do's and Don'ts

Do

• Use #212121 for text and #2366cb for interactive text; darken to #1c50a0 and #143b75.
• Keep brand red #eb001f for the brand and #dc001d for sale and primary fills.
• Put commerce details (energy label, swatches, price) on their own token layer.

Don't

• Don't swap the two reds.
• Don't use red for links; interactive text is blue.
• Don't use OTTO Play for interface text; it is a campaign face.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#eb001f brand · #dc001d sale / primary · #212121 ink · #2366cb interactive · #1c50a0 / #143b75 hover / pressed · #6d6d6d secondary · #f0f0f0 frame

Example Component Prompts

• "A product tile with a #2366cb 14px OTTO Sans title that darkens to #1c50a0 on hover."
• "A sale badge filled #dc001d with white text."

Governance

Known Gaps

• Contrast, link-product. Text #2366cb on #00000000 measures 3.83:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, input-search. Text #212121 on #00000000 measures 1.30:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, link-nav. Text #212121 on #00000000 measures 1.30:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.