Design tokens (YAML front matter)

name: OTTO
colors:
  brand: '#eb001f'
  primary: '#dc001d'
  foreground: '#212121'
  interactive: '#2366cb'
  interactive-hover: '#1c50a0'
  interactive-pressed: '#143b75'
  text-secondary: '#6d6d6d'
  disabled-text: '#949494'
  frame: '#f0f0f0'
  disabled-background: '#e5e5e5'
  disabled-border: '#cccccc'
  canvas: '#ffffff'
  hint: '#dcf2ff'
  success: '#227642'
  warning: '#ae4518'
  error: '#b30023'
  sustainable: '#50734d'
typography:
  body:
    fontSize: 16px
    fontWeight: 400
    use: the header search field
  small:
    fontSize: 14px
    fontWeight: 400
    use: product tiles
rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  xxl: 24px
components:
  link-product:
    type: button
    backgroundColor: transparent
    textColor: '#2366cb'
    rounded: 0px
    typography: 14px / 400
    hover: 'fg #1c50a0'
    pressed: 'fg #143b75'
    use: A product tile link on a search results page — the interactive blue darkens a step on hover and another on press.
  input-search:
    type: input
    backgroundColor: transparent
    textColor: '#212121'
    rounded: 0px
    height: 48px
    padding: 1px 2px 1px 16px
    typography: 16px / 400
    hover: transparent
    focus: transparent
    use: The header search field (Wonach suchst du?). None of its measured values change on hover, press or focus.
  link-nav:
    type: button
    backgroundColor: transparent
    textColor: '#212121'
    rounded: 0px
    height: 40px
    hover: rgba(0,0,0,0.03)
    pressed: rgba(0,0,0,0.09)
    use: Mein Konto in the header. The link itself does not change; an ::after overlay darkens it by 3% on hover and 9% when pressed.
omitted:
  - section: spacing
    reason: No verified values in current evidence.
fonts:
  roles:
    sans: OTTO Sans

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.

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.

Palette

At a glance

Design System · OTTO