Rules

What an agent or designer may and may not do when producing anything that should look and behave like OTTO: app screens, web pages, prototypes, PDFs, slides, social graphics. Every rule points to its source page in this repository. Where the OTTO Design System says nothing, the rule is marked derived and explains how it follows from the system.

Read in this order before generating:

1. This file (hard rules, per-medium rules, component chooser).
2. The foundation page for what you are about to decide (colour, type, layout, motion ...).
3. The component page in design-system/components for every component you use.
4. Its API in storybook (tag name, attributes, variants, slots, events).
5. The exact values in tokens. Never type a hex, px or ms value that is not a token.

All 401 official Do / Don't / Caution cards, grouped by page: zeroheight-rules.md (machine-readable: zeroheight-rules.json).

1. Hard rules (never break)

Brand and logo

• Use only the official logo files (Logo; 31 SVGs in storybook/components/logo/svg, e.g. pl_logo_otto.svg, pl_logo_otto-white.svg, pl_logo_otto-up.svg, pl_logo_otto-app.svg). pl_logo_otto-deprecated.svg must not be used. Never redraw, recolour, stretch, outline or generate a logo.
• Default logo height is 40px; scale proportionally in 4px or 8px steps. Width is never set independently.
• Logo only on grounds with sufficient contrast. Never in the bleed area. Only OTTO red or white, never black (Brand Hub: „Ein schwarzes Logo wird nie verwendet“). The red logo only on light grounds; in brand communication the white logo only on OTTO red (the UI design system also allows it on darker interface grounds). Aligned to the type area, never cropped, distorted or placed inside a headline or running text.
• Logo categories: OTTO, Payment, Social, Seal, App. Use each only for what it represents (a payment logo marks an accepted payment method, nothing else).
• For brand communication beyond the interface (campaigns, PDFs, print, social) the public OTTO Brand Hub applies in addition; its rules are summarised in section 3a below and captured in references/brandhub.

Typeface

• OTTO Sans only (files and @font-face in tokens/fonts). Display styles use black (800), headlines bold (700), copy regular (400); medium (500) exists in the files but no text style uses it. No second family, no fallback styling that shows (fallback stack: 'OTTOSans', Arial, Helvetica, sans-serif). Source: Typography.

• Text styles, size / line height (1rem = 16px):

  Style	Size	Line height	Use
  display300	48px / 3rem	56px	desktop display, once per page
  display200	40px / 2.5rem	48px	mobile display, once per page
  display100	32px / 2rem	40px	mobile display, once per page
  headline400	28px / 1.75rem	36px	token only (--oc-semantic-font-headline-400), not in the zeroheight type table
  headline300	24px / 1.5rem	32px	top headline
  headline200	20px / 1.25rem	28px	section headline
  headline100	16px / 1rem	24px	default headline
  headline50	14px / 0.875rem	20px	small headline, minimum for components
  headline25	12px / 0.75rem	16px	short secondary labels only
  headline10	10px / 0.625rem	12px	short secondary labels only
  copy125	16px / 1rem	24px	larger body
  copy100	14px / 0.875rem	24px	default body text
  copy75	12px / 0.75rem	16px	short secondary text only
  copy50	10px / 0.625rem	16px	short secondary text only

• Display styles appear at most once per page and never as body text.

• Headline levels follow the HTML hierarchy (h1, h2, h3 in order); a headline300 never sits below a headline100 in the same section.

• Nothing below copy100 or headline50 for body text or in components unless the text is short and secondary.

• Weights carry fixed meanings: regular = body; bold = highlighting in text; underline = links on colour; strikethrough = old price only.

• Left-align. Centre or right only after careful consideration (Caution).

• Text contrast at least 4.5:1 against its background.

Colour

Source: Color, Functional communication, Design tokens.

• Live work uses semantic tokens only (oc-semantic-*). Base tokens (oc-base-*) are for drafts and special cases. Component tokens ($oc-component-*) are internal and never used directly.

• Three clusters:

  • Neutral (black, grays, white): the foundation of every view.
  • Exclusive (success-green, error-red, warning-orange, hint-purple, interactive-blue, sustainable-green, service-blue): only for their meaning. Error-red never decorates; interactive-blue marks interaction; sustainable-green marks sustainability.
  • Corporate (otto-red 100/125, mint, blue, green, purple, pink, warm-red, orange, yellow, beige, scales 70 to 140): represents the brand, not exclusive; allowed for different purposes (Do), but not reserved for one case.

• Colour use falls along the customer journey: inspirational (more corporate colour) at the beginning, focused (less colour) towards checkout.

• Colour is never the only indicator: combine colour with icon and text.

• Components keep their intended colours; never recolour a component. Hierarchy differences (primary / secondary) show in different colours; equal colours for different hierarchy are not allowed.

• Scale suffix: higher number = darker shade.

• Core values (light theme; dark values and every other token in tokens):

  Role	Semantic token	Value
  page frame (level 0)	--oc-semantic-color-background-frame	#f0f0f0
  canvas (level 1)	--oc-semantic-color-background-canvas	#fff
  default text	--oc-semantic-color-text-default	#212121
  secondary text	--oc-semantic-color-text-secondary	#6d6d6d
  interactive text / links	--oc-semantic-color-text-interactive	#2366cb
  focus outline	--oc-semantic-focus-outline-color	#418ade, 2px, offset 2px
  divider	--oc-semantic-color-divider	black 10 %
  OTTO red (brand)	--oc-base-color-otto-red-100 / -125	#eb001f / #dc001d
  error	--oc-base-color-error-red-100	#b30023
  success	--oc-base-color-success-green-100	#227642
  warning	--oc-base-color-warning-orange-100	#ae4518
  hint	--oc-base-color-hint-purple-100	#7d00ea
  sustainable	--oc-base-color-sustainable-green-130	#50734d
  illustration ground	--oc-base-color-beige-90	#f5e6d7

  The base colours above are listed so values can be checked; in code, use the semantic token that wraps them.

• The corporate-color-spectrum-* base tokens are deprecated; use the corporate scales (mint, blue, green, purple, pink, warm-red, orange, yellow, beige).

• Five functional types, each with its own colour, reserved: error, warning, success, hint, info. Never build your own functional message with custom colours; use the component variants (Banner, Badge, Snackbar, form states).

Layout and space

Sources: Grid, Spacing, Responsiveness, Main siteframe, Dialog siteframe.

• 8px grid as standard, 4px grid for small spacings and fragments inside components. Components are sized in 8px increments.
• Spacing tokens in 4px steps (spacing-25 = 4px, -50 = 8px, -75 = 12px, -100 = 16px, ... -250 = 40px). Small spacing for related content, large for unrelated (proximity).
• Content grid: 12 columns, margins and gaps spacing100 (16px), gaps may be spacing50. For long text on breakpoint L: offset 2, content on the middle 8 columns.
• Page grid: 12 columns, no margins, spacing25 gaps; desktop only, never on mobile.
• Every view is built from blocks and cards on the frame.
• Breakpoints (container-based, not viewport-based): minimum 360px (nothing needs to work below), minor 448px, major 768px (fundamental layout change), minor 992px, maximum 1232px (above it only the side margins grow). Sizes S, M, L, XL, XXL. The zeroheight image labels 448px as 26rem; the text says 28rem, and 448 / 16 = 28.
• On XXL the content is capped at 1152px, with the skyscraper (ad) sticky on the right; breakout sections may use the full width.
• Mobile first. Default frames: Mobile Web and Android 360 × 800 px/dp, iOS 393 × 852 pt.
• Dialog siteframe: content max 600px, only ever with a focused dialog inside; logo left on S, centred from M.
• In the app the web header is hidden (native top and bottom bar), the newsletter is hidden and the footer minified.

Elevation, surfaces, radius

Sources: Elevation, Border.

• The frame is only gray, the canvas only white. Only cards or blocks sit directly on the frame. No custom shadows, no changed elevation styles.
• Radius signals interactivity: interactive components at least 4px, default 8px (buttons, text fields), large interactive containers 16px (media object card, promo card). Static components (block, banner, tag) at most 2px, decorative only.
• Nested radii: spacing = outer radius − inner radius.

States

Source: States.

• Default, hover (pointer only, never on touch, one at a time), active/pressed (stronger than hover), checked (only in card, checkbox, chip, media object card, pagination dots, promo card, radio button, selection tile, switch, row, tab bar), focused (outline with 2px offset, same look everywhere), disabled (grays, may fail contrast; prefer hiding or an error over disabling).

Icons and illustration

Sources: Icons guidelines, Illustration guidelines.

• Icons: official set only (486 SVGs in storybook/components/icon/svg, names in storybook/components/icon). Outlined, 1px stroke; icon100 = 24px (1.5rem), scalable in 0.5rem steps, never smaller; icon50 = 12px (0.75rem), never scaled. Default colour text-default.
• Reserved icons (marked * in the library) only in their context; the heart is only the wishlist.
• Same function, same icon everywhere; no new icon for a function that has one. Side-by-side icons share a size. Label icons; unlabelled only when the meaning is obvious.
• An interactive icon is always an Icon button, never a bare icon.
• Illustrations: 3D style with the characters Yuki (main character; one Figma note calls her "Yuko") and sidekick Mika. Use them to inspire, explain complex tasks or fill empty states (empty basket, error page). Never as decoration only, never as the only carrier of information.
• Illustration format: 8:3, 3200 × 1200 px PNG, centred so 4:3 crops lose nothing, 1:1 for object motifs. Default beige ground oc-base-color-beige-90 (#f5e6d7) or transparent over light base colours (e.g. yellow-80). No text in illustrations, no detail clutter, generic and metaphorical.
• Derived: do not generate new OTTO illustrations with image models and present them as OTTO artwork; the characters are brand property. For drafts, use the existing illustrations in design-system/_images/illustration-overview and mark generated stand-ins as placeholders.

Motion

Sources: Motion, App experience.

• Transitions (start and end state) first; keyframe animations only when a transition cannot express the movement or a special action needs emphasis.

• Use semantic motion tokens (duration + easing combined); base duration and easing tokens only when no semantic token fits:

  Transition	Duration	Easing
  appear	125ms	default-out cubic-bezier(0,0,.4,1)
  disappear	50ms	default-in cubic-bezier(.8,0,1,1)
  enter	425ms	expressive-out cubic-bezier(.2,1,.4,1)
  exit	200ms	expressive-in cubic-bezier(.6,0,.8,0)
  expand / collapse	200ms / 125ms	default-in-out cubic-bezier(.8,0,.4,1)
  navigate	200ms	default-out
  reduced motion	0s	–

  Duration scale: instant 15ms; short 50 / 125 / 200ms; medium 275 / 350 / 425ms; long 500 / 750 / 1000ms.

• Longer distance = longer duration. User-initiated motion slightly slower. Invite (appear) slower than dismiss (disappear). Expressive easings only for special moments, and then with at least a "medium" duration.

• Respect reduced motion.

• App transition patterns: slide in/out, fade in/out, push, expand/collapse; subtle, consistent (same action, same transition), never janky.

• App gestures: vertical scroll, horizontal scroll (galleries, variants, carousels), single touch, pinch, long touch, swipe, drag and drop; always with immediate visual (and where suitable haptic) feedback.

• Feedback patterns: visual, haptic, audible (sparingly).

Accessibility

Sources: Accessibility, ARIA labels, Image alt texts.

• WCAG 2.1 AA. Text 4.5:1, large text (24px, or 18.5px bold) 3:1, meaningful graphics 3:1.
• Sizes in rem so text scales.
• Target size at least 24 × 24 px (WCAG 2.5.8); 48 × 48 px for main and touch use cases. Undersized components (link 50 and 75) need 24 × 24 px of dead space around their centre. Interactive icons via icon button.
• Every meaningful image has an alt text; decorative ones an empty alt.

Voice and wording (functional communication)

Source: Functional communication. German interface copy uses du (examples on the page: „Bitte prüfe deine Zahlungsdaten.“).

• General: clarity over creativity; the user's perspective, not system logic; plain language, no unexplained terms or abbreviations; direct and concrete; calm and respectful; active voice.
• Error: what went wrong, what it means, how to fix it (all required), an alternative (optional). Calm, serious, no irony or humour, never blame the user.
• Warning: state the risk and its consequences, factual, no drama, no false urgency.
• Success: confirm what was done, short, appreciative, no euphoria; say what happens next.
• Hint: optional, friendly, lightly conversational, never commanding or blocking.
• Info: neutral, factual, no opinion.
• Place messages next to their context; show only relevant ones.

2. Components: what to use for what

Only these components exist. Build with them; do not invent look-alikes. If nothing fits, say so instead of drawing a new component.

In code every component is a web component <oc-{name}-v{n}> (prefix oc, namespace, version). Components marked deprecated or "Not Ready For Use" in storybook must not be used.

3. Per medium

App screens (iOS, Android, hybrid)

• Frame 393 × 852 pt (iOS) or 360 × 800 dp (Android); native top bar and bottom bar replace the web header; footer minified.
• Native look and feel is the goal regardless of technology: fast, responsive, platform conventions, device functions where they add value (Device functions and native elements: camera, file access, geolocation, push, contacts, biometrics, native sheet, calling, device shake).
• Elevation level 5 (native) is only for native app components.
• Motion from the app transition and feedback patterns above.

Web pages

• Main siteframe (header, content, newsletter, footer as Edge Side Includes) or dialog siteframe for focused tasks.
• Mobile first at 360px, then 768px and 992px, capped at 1232px.
• Gray frame, white blocks and cards, 12-column content grid.

3a. Brand communication: campaigns, PDFs, social (OTTO Brand Hub)

Source: references/brandhub (brandhub.otto.de, read 28.09.2026). These rules apply to communication; inside product interfaces the design system above wins.

• OTTO red #EB001F (RGB 235/0/31, CMYK 0/100/95/0, Pantone 185 C, RAL 3028). At most 30 % red in a layout, so it does not look too salesy (exception: employer branding).
• Headlines in OTTO Sans KO Black (italic allowed) or combined with OTTO Sans Regular; campaign headlines may use OTTO Play (files in tokens/fonts), never for the word „OTTO“ itself. Never all caps except short tags like „NEU“.
• Headlines only in OTTO red on light grounds or white on dark grounds; body text dark grey on light, white on dark.
• Red text at least 18 pt Regular or 14 pt Black; OTTO Play at least 19 pt on web, 32 pt in print.
• Three typographic levels (headline, subline, body), always inside the grid, never running over colour areas.
• Sustainable Green 110 #7EA87B only for sustainable products and content, never combined with red areas. Service Blue (#213D4F … #C1DAEB) for OTTO services.
• Modular palette: 8 steps per colour (dark 130–140, accents 90–130, light 70–80), beige 5 steps; campaign palettes combine white, OTTO red and two or three of these families (examples in farben.txt).
• The logo download packages on the Brand Hub sit behind a partner usage agreement, which was not accepted; use the design system's logo SVGs.

OTTO or Otto Group?

OTTO (otto.de, the retailer) and the Otto Group (the holding) are different brands with different logos, typefaces, colours and voices. This repository's design system is OTTO's. For Otto Group material follow OTTO vs Otto Group and the PDF style analysis (Otto Group: typeface Optimist, red #F00020, text #191919, pastel areas, A4 landscape); Optimist is licensed and not in this repository.

PDFs, slides and print (derived)

The design system is written for screens. For documents apply it like this:

• OTTO Sans (plus OTTO Play for campaign headlines); keep the type roles (display once, headline hierarchy, copy for body) and the Brand Hub rules in 3a (red headlines on light grounds, at most 30 % red). Real OTTO PDFs for comparison: references/pdfs, analysed in pdf-style.md. Convert px to pt 1:1 at 96 dpi (copy100 14px ≈ 10.5pt; headline100 16px = 12pt).
• Colours from tokens; the same cluster rules (exclusive colours only for their meaning; corporate colours for brand moments).
• 8px (≈ 6pt) spacing rhythm, 12-column grid.
• Surfaces: the frame / canvas idea translates to white pages with gray25 areas for grouping; no shadows in print.
• Logo from the official SVG at its proportions, with clear space and contrast; never on busy pictures.
• Illustrations only from the official set, no text inside them.
• Print colour: OTTO red CMYK 0/100/95/0 or Pantone 185 C. Paper and print profiles are not specified publicly: flag them.

Social and OG images (derived)

• OTTO Sans set large, a white or gray25 ground or a corporate colour field, the official logo composited from SVG, never generated. No functional colours as decoration.

4. Never

• Invent components, variants, icons, colours, shadows, radii or type sizes that are not in the system.
• Use base tokens in live work, or component tokens at all.
• Use functional colours (error, warning, success, hint, info) or their icons for anything but their meaning.
• Use colour as the only signal.
• Put text into illustrations, generate OTTO characters, or recreate the logo.
• Show hover states on touch, or more than one hover / active / focused state at a time.
• Place content directly on the frame without a block or card; colour the frame or the canvas.
• Use deprecated or "Not Ready For Use" components.
• Use irony, humour, blame or drama in error and warning messages.

5. Gaps: ask before deciding

• Photography style and image selection: not covered by the design system.
• Campaign, print and brand usage beyond the interface: OTTO brandhub.
• Marketing tone of voice beyond functional communication: not covered.
• The Figma libraries (OTTO Base Token Library, OTTO Design System Library, icon library) are referenced but not public; everything here comes from the public zeroheight documentation and Storybook.

6. Copy and pictures

• Tone of voice per brand (OTTO: retail, "du"; Otto Group: corporate): references/tone-of-voice.md. UI messages additionally follow Functional communication.
• Generated pictures: imagery/README.md (Magnific, GPT-Image 2.5 sunburst, 2K, quality medium, one style brief per series, original references only).