Imagery · OTTO Design System

Pictures for OTTO and Otto Group work, from app screens to reports and social posts. Seven picture styles cover the common needs. Each fixes the ground, the palette in exact colour values, the light, the composition and what never appears, so that a series looks like one shoot.

Choose a style

Style	Use for	Brief	Reference pictures
OTTO 3D illustration	empty states, onboarding, error and success, chapter openers	Brief	two to four motifs from the official illustration set
OTTO product still	product tiles, mock-ups without a real product photo	Brief	the real product photo, if one exists
OTTO colour field	social posts, OG images, covers and title slides; type and logo are added in the layout	Brief	none, or a real object photo
OTTO lifestyle photo	campaign, category and editorial images	Brief	real OTTO photography
OTTO red material	section heroes, chapter openers and covers in a calm, professional register	Brief	none; OTTO red #eb001f is named in the brief
Otto Group corporate photo	annual report, corporate, employer and sustainability material	Brief	real Otto Group photography
Otto Group layered photo	Otto Group presentations and the corporate website: professional photos with a blurred foreground layer	Brief	the presentation master pictures and the ottogroup.com pictures of 2026

OTTO, the retailer behind otto.de, and the Otto Group look and speak differently. One piece never mixes the two: see OTTO or Otto Group? and the tone of voice.

Rules for every style

No text in the picture. No letters, numbers or logos. Headlines are set in OTTO Sans in the layout, and logos are placed from the original files.
No functional colours as decoration. Error red, success green, warning orange and hint purple keep their meaning.
Exact colours in the layout. Where a ground or a red must match exactly, the layout sets it, not the picture.
Illustrations show one subject, no text, generic and metaphorical, in 8:3 and croppable to 4:3 (illustration guidelines). An existing official motif always comes first.
People are checked at full size: hands (five fingers, thumb on the right side, a natural wrist), eyes, ears, teeth and glasses. One flaw rejects the picture. Poses that keep hands simple, like crossed arms, hands in pockets or an open wave, work better than pointing or gripping.
Web delivery as JPEG (quality 82) or WebP at twice the display size.

People as OTTO 3D figures

A real person can appear as a figure in the OTTO 3D illustration style, always with their consent. The figure keeps the person's recognisable features, such as hair, glasses, beard and face shape, dresses them in the OTTO palette and gives them their own natural skin tone as a fixed colour value. It is a new character, never Yuki or Mika.

Leander Endres as an OTTO 3D figure