Otto Design System Deep Dive

1. Brand Overview

Otto is one of Germany's household e‑commerce names. You open otto.de and immediately feel: this isn’t a Silicon Valley startup aesthetic. It’s European retail confidence, tuned for mass‑market. Crisp, utilitarian typography. A disciplined color system that nods to long‑standing brand recognition. Functional, not ornamental.

The vibe is direct. Buttons look clickable without over‑animating, forms feel stable. Even the friendly rounded corners are controlled — 8px and 16px radii are the workhorses — forming a consistent edge language that flows from product tiles to CTAs.

The site is clearly built for inclusivity of ages: the typography is large enough, the contrasts are strong, and the breakpoints suggest they care about scaling from small phones up to broad desktop screens without breaking visual flow.

They've also preserved the iconic Otto red (#eb001f in the palette) but deploy it sparingly — reserved for action states that truly matter, like sales or primary CTAs. You don't see decorative red splashes everywhere, which keeps attention focused. Complementary blues (rgb(0,143,253) primary) take on the role of interactive or focus states, helping differentiate brand red from action‑blue.

This is a system for high‑volume browsing — think "multiple tabs open, comparing products" — so clarity and predictability win. You can tell the designers enforced a 8px rhythmic grid almost everywhere. No sloppy spacings, no unaligned elements. It’s corporate e‑commerce efficiency with just enough warmth in the rounded shapes to feel approachable.

2. Color System

2.1 Primary Colors

Main interactive hue: Primary Blue — rgb(0, 143, 253) (hex #008ffd).
Blue in this saturation reads clean, digital, and trustworthy. It's similar to functional blues used by Amazon's focus outlines or Apple's links, but Otto's variant is brighter — leaning toward cyan — which makes it pop more against white and dark neutrals.

Secondary is transparent (rgba(0, 0, 0, 0)), mostly a placeholder semantic value.

Where’s the Otto red? That's in the palette as #eb001f. Critical to note: Otto red is NOT the primary action indicator in interactive states. It’s more brand anchoring and for special promotions — think sale banners.

Psychology: Blue for action, red for brand anchoring. This keeps "click me" separated from "this is Otto".

Competitor comparison: Amazon uses yellow for primary CTAs — Otto refuses to go warm for interaction, instead they keep warmth in promotional contexts.

2.2 Complete Palette

Here's every extracted RGB with normalised hex and observed usage context where we can infer from sources:

…and then the massive token list in cssVariables. Those include brand spectrum colors and stateful colors:

Example slice:

Yes, there’s a huge corporate spectrum dataset here — from mint-100 (#64c8b9) to purple-140 (#522eb7). This is clearly a multi‑theme capable system, not just Otto retail. Colors for sustainable greens, warm reds, denim blues — they could skin sub‑brands easily from this token set.

2.3 Color Relationships

Contrast: #008ffd on white is solid — easily > 4.5:1. The deeper brand red #eb001f on white is borderline for thin text but fine for bold headings; they use it mostly in large/filled shapes where contrast is high.

Neutrals scale from #212121 down to light grays #bdbdbd. No full "light mode background" beyond pure white. Dark mode? There's no extracted dark theme — this system is tuned for light backgrounds.

Accessibility: Focus outline (#4b86df) is distinct from primary blue. Smart: ensures WCAG focus indicators difference.

2.4 Usage Guide

Workhorse combos:

• Primary button: #dc001d red or #008ffd blue text on white.
• Neutral text: #212121 on white backgrounds.
• Hover surfaces: lighter blues or light neutrals. Avoid:
• Red text on blue backgrounds — clash and readability drop.
• Mixing warm reds and sustainable greens unless semantic (error/success) — they’re tuned for meaning.

3. Typography

3.1 Font Families

Main typeface: OTTOSans, with Arial, Helvetica fallbacks. This is custom, proprietary — not from Google or Adobe.

Icon font: OttoIcons, again with Arial, Helvetica fallback. Used inline for glyphs.

No variable fonts detected.

3.2 Type Scale

Extracted styles:

3.3 Hierarchy

Hierarchy is tight. H1 at 48px stands out. But even 24px and 21px headings have clear bold weight so they punch above scale. They lean heavily on font‑weight to amplify hierarchy — lots of 700s in small text too.

Body is often 16px with roomy line height (1.50) for readability. Link weights vary — bold for primary nav, normal for body links.

The custom OTTOSans has the tone: corporate sans, slightly softer than Helvetica, which pairs with rounded UI elements without breaking the professional vibe.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px multiples dominate. They also use 4px for tight elements. Frequencies show:

4.2 Layout

Breakpoints: Many — from 360px up to 1280px, with dense increments (425, 426, 447…). This hints at fine‑tuned responsive adjustments.

This isn’t just mobile/tablet/desktop — they’re hitting device quirks.

5. Visual Elements

Border Radius: Controlled set:

Rounded but not “pill” everywhere — full radius used in specific circular badges.

Shadows: Minimal. Only two found:

• rgba(34,34,34,0.3) 0px 0px 9px and
• rgb(109,109,109) 0px 0px 10px.

This is nearly flat. Depth conveyed with color and radius, not heavy shadow.

Borders: Occasional 1px solid in light colors. Rare — not a heavy border UI.

6. Components

6.1 Buttons

Four variants extracted.

Nav Tile Button (14px, weight 400):

• Default: white background, #212121 text, radius 16px.
• Active: #4ab1ff background.

Secondary Button (pl_button100--secondary):

• Default: #e6e6e6 background, #222222 text, radius 8px, padding 12px 16px.
• Active/Focus: Outline #008ffd at 2px, background #4ab1ff.

Primary Red Button (700 weight):

• Default: #dc001d background, white text.
• Hover: Opacity 0.9, text turns bright blue — unusual.
• Active: Outline focus blue (rgba(0,143,253,0.5)), background token var, opacity 0.5.
• Focus: Outline #4b86df, keeps white text, blue background override.

Gray Utility Button (400 weight):

• Default: #e5e5e5 background, #212121 text, radius 8px.
• States similar to red button — same hover/active/focus pattern.

6.2 Links

Seven link styles:

• Black underline on default, lighten on hover.
• Light gray no underline default, underline hover.
• #256ad2 blue link, turns underline on hover.
• #008ffd (primary blue) link, underline hover. All consistent: hover always adds underline or changes shade to #565656.

6.3 Forms

Text inputs:

• Default: transparent bg, #212121 text, no border radius.
• Focus: Outline #4b86df, background fills #1eaedb (bright cyan), text turns white. Very strong focus indicator.

No checkboxes/radios extracted.

6.4 Cards

Radii 8px / 16px, white backgrounds, minimal shadow.

7. Design Tokens

Here's a CSS file grouping the key extracted tokens:

:root {
  /* Colors - Semantic */
  --color-primary: #008ffd; /* rgb(0, 143, 253) */
  --color-secondary: rgba(0, 0, 0, 0);
  --color-neutral-dark: #212121;
  --color-neutral-black: #000000;
  --color-neutral-gray: #6d6d6d;
  --color-link-blue: #256ad2;
  --color-brand-red: #eb001f;
  --color-neutral-gray2: #777777;
  --color-white: #ffffff;

  /* Example extracted token */
  --oc-semantic-focus-outline-color: #4b86df;
  --oc-semantic-color-error-100: #bc3339;
  --oc-semantic-color-success-75: #009b8d;
  --oc-semantic-color-sale-background: #dc001d;

  /* Typography */
  --font-family-main: "OTTOSans", Arial, Helvetica;
  --font-family-icons: "OttoIcons", Arial, Helvetica;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-40: 40px;

  /* Border Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft: rgba(34, 34, 34, 0.3) 0px 0px 9px;
  --shadow-medium: rgb(109, 109, 109) 0px 0px 10px;
}

8. AI Coding Assistant Prompt

# Otto Design System Specification

You are an Otto design expert. Build UIs matching their visual language exactly.

## Brand Context
Otto's visual language is utilitarian and trustworthy. Interaction color is bright blue, brand accent is strong red. Rounded corners (8px, 16px) and flat surfaces dominate. Minimal shadows, strong focus outlines ensure accessibility.

## Color Palette
- Primary Blue: #008ffd — CTAs, focus outlines, primary actions
- Secondary Transparent: rgba(0,0,0,0) — background placeholder
- Neutral Dark: #212121 — body text, icons
- Neutral Black: #000000 — borders, high-contrast text
- Neutral Gray: #6d6d6d — secondary text
- Link Blue: #256ad2 — inline links, secondary CTAs
- Brand Red: #eb001f — logo, sales banners
- Neutral Gray 2: #777777 — tertiary text
- White: #ffffff — page and card backgrounds
- Focus Outline: #4b86df — keyboard focus visual
- Error Red: #bc3339 — error states
- Success Green: #009b8d — confirmation states
- Sale Background Red: #dc001d — sale modules

## Typography
- Font family main: "OTTOSans", Arial, Helvetica
- Icon font: "OttoIcons", Arial, Helvetica

| Level/Context | Size | Weight | Line Height | Use |
|---------------|------|--------|-------------|-----|
| H1 Hero       | 48px | 700    | 1.50        | Page titles |
| Heading Large | 24px | 700    | 1.33        | Section headings |
| Link Large    | 21px | 400    | 1.29        | Menu links |
| Heading Med   | 20px | 700    | 1.40        | Subheadings |
| Body          | 16px | 400    | 1.50        | Paragraph text |
| Button        | 16px | 700    | 1.50        | CTA text |
| Caption       | 14px | 400    | 1.71        | Secondary info |
| Caption Bold  | 14px | 700    | 1.43        | Emphasis captions |
| X-Small Text  | 10px | 400/700| 1.00–1.60   | Fine print |

## Spacing & Grid
Base: 8px grid.
Scale: 1px, 2px, 4px, 6px, 8px, 12px, 16px, 24px, 40px.
Use for: Button padding (8px–16px), card gaps (24px), section gaps (40px).

## Border Radius
- xs: 2px — images, focus rings
- sm: 4px — thumbnails
- md: 8px — buttons, small cards
- lg: 12px — images
- xl: 16px — large product cards
- full: 50% — badges, avatars

## Shadows & Depth
Minimal:
- Soft: rgba(34,34,34,0.3) 0px 0px 9px
- Medium: rgb(109,109,109) 0px 0px 10px

## Component Specifications

### Primary Red Button
Default:
```css
background: #dc001d;
color: #ffffff;
padding: 12px;
border-radius: 8px;
font-weight: 700;
font-size: 16px;
border: none;
```
Hover:
```css
opacity: 0.9;
color: #008ffd;
```
Active:
```css
outline: rgba(0,143,253,0.5) solid 2px;
opacity: 0.5;
```
Focus:
```css
outline: 2px solid #4b86df;
background: #1eaedb;
color: #ffffff;
```

### Secondary Gray Button
Default: `background: #e5e5e5; color: #212121; border-radius: 8px;`
Hover: same as red button hover.
Active/Focus: same as red button active/focus.

### Navigation Link
Default: color matches context (`#212121` or `#777777`), no underline.
Hover: `color: #565656; text-decoration: underline;`

### Input Field
Default: transparent background, `color: #212121`, no border radius.
Focus: `outline: 2px solid #4b86df; background: #1eaedb; color: #ffffff;`

### Card
Background: #ffffff; border-radius: 8px or 16px; padding: 24px.

## Layout & Responsive Rules
Breakpoints: 360px, 425px–480px, 768px, 1024px, up to 1280px.
Max content width: 1280px.
Page padding: 16px mobile, 24px desktop.
Grid gap: 8px baseline.

## Interaction Rules
- Transition: `background-color 150ms ease` for hover/focus states.
- Focus indicators: Always visible outline color #4b86df for keyboard focus.
- Upgrade hover states with both color and underline for links.

## DO List
- Use ONLY palette colors.
- Maintain 8px grid — spacings must be multiples.
- Use OTTOSans for all text; OttoIcons for icons.
- Keep focus outlines exactly #4b86df.
- Reserve brand red for promotions or styled primary CTA.

## DON'T List
- No custom colors.
- Don’t mix sharp and rounded corners in same component.
- Avoid heavy shadows — stick to the two defined.
- Don’t reduce focus outline thickness.

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #dc001d;
  color: #fff;
  padding: 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
  border: none;
  transition: background-color 150ms ease;
}
.btn-primary:hover { opacity: 0.9; color: #008ffd; }
.btn-primary:focus { outline: 2px solid #4b86df; background: #1eaedb; color: #fff; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
}
```

### Input
```css
.input {
  background: transparent;
  color: #212121;
  border: none;
  border-radius: 0;
  padding: 1px 2px 1px 16px;
}
.input:focus {
  background: #1eaedb;
  color: #ffffff;
  outline: 2px solid #4b86df;
}
```

9. Summary

TL;DR — Otto’s system is bright‑blue interactive, brand‑red promotional, 8px grid religiously, rounded corners in controlled radii, near‑flat with minimal shadows, custom sans type for clarity.

Brand Keywords:

• utilitarian-ecommerce
• german-precision
• accessible-clarity
• warm-minimal
• color-disciplined