OTTODesign System

Presentations

Sample deck: OTTO Design System

Twelve slides in the OTTO theme, as an introduction to the design system for design, development and content. The components slide runs the real OTTO components, and every figure comes from the design system itself.

OTTO Design System

Ein System für alles, was OTTO zeigt.

Einführung für Design, Entwicklung und Content

OTTODesign System · Einführung

Agenda

Was dich erwartet

  1. Warum ein SystemEinmal entscheiden, überall gleich umsetzen
  2. GrundlagenFarbe, Typografie, Layout und Bewegung
  3. KomponentenEchte Bausteine aus der Bibliothek
  4. TokensWerte, die hell, dunkel und in OneX funktionieren
OTTODesign System · Einführung

01

Warum ein System?

OTTODesign System · Einführung

Das Prinzip

Einmal entschieden, überall gleich.

Farben, Abstände und Komponenten kommen aus einer Quelle. So sieht OTTO in der App, im Shop und auf jeder Folie gleich aus.

OTTODesign System · Einführung

In Zahlen

Was das System heute enthält

42

Komponenten mit Varianten, Zuständen und Regeln

1.583

Design-Tokens, von Basiswerten bis zu Komponenten

427

Icons, dazu kleine Varianten für enge Stellen

OTTODesign System · Einführung

02

Grundlagen

Die Entscheidungen unter jeder Oberfläche.

OTTODesign System · Einführung

Grundlagen

Drei Bausteine tragen jede Seite

Farbe

OTTO-Rot als Akzent, neutrale Flächen, semantische Farben für Zustände.

Typografie

OTTO Sans in klaren Stufen, die schwarze KO-Variante für große Botschaften.

Layout

Ein Raster, feste Abstände und Breakpoints von S bis XL.

OTTODesign System · Einführung

03 · Komponenten

Echte Bausteine, direkt aus der Bibliothek

Buttons

In den WarenkorbMerken

Chips

SofasSesselHocker

Switch

Newsletter erhaltenPush-Nachrichten
OTTODesign System · Einführung

04 · Tokens

Werte statt Handarbeit

  • Semantische Tokens für alles, was live geht
  • Hell, dunkel und OneX aus denselben Namen
  • Basiswerte nur als Referenz in Entwürfen
OTTODesign System · Einführung
Rot bleibt Akzent: höchstens 30 Prozent einer Fläche.

MarkenregelOTTO Brand Hub

OTTODesign System · Einführung

Bildwelt

Material in OTTO-Rot

OTTODesign System · Einführung

Danke.

Fragen zum System?
Das Design-System-Team hilft dir weiter.

OTTODesign System · Einführung

Layouts in this deck

Slide Layout Ground
1 Title on a full-bleed picture frame grey with the red-material still life
2 Agenda with numbered rows white
3 Chapter opener OTTO red with the letter sculpture
4 Statement white
5 Three key figures frame grey
6 Chapter opener ink
7 Three picture cards white
8 Live components on panels frame grey
9 Split: list and picture white and frame grey
10 Rule as a quote OTTO red
11 Gallery of three pictures white
12 Closing frame grey with the letter sculpture

Sources of the figures

  • 42 components: the component pages.
  • 1,583 design tokens: base 291, component 947, feature component 60, feature semantic 32, semantic 253 (tokens).
  • 427 icons: the icon set, without the small 50 variants.
  • Red at most 30 % of an area: OTTO Brand Hub.