OTTODesign System

OTTO Design System

Presentations

HTML presentations: the viewer, brand themes, a sample deck and the Otto Group master they come from.

Presentations on a fixed 1920 × 1080 canvas, with one theme per brand and one shared viewer. This section shows the slide styles, a sample deck for each brand and the official Otto Group master the Otto Group theme follows.

The viewer

Control Mouse or touch Keyboard
Next, previous arrow buttons, click the right or left fifth of the slide, swipe → ← Space, Page Up, Page Down
First, last thumbnail rail Home, End
All slides grid button G, Esc to close
Fullscreen fullscreen button; controls fade after 2.5 s without movement F
Link to a slide the address shows the slide number, for example #3

The viewer is neutral (charcoal surround, white controls, one accent for the progress bar and the current thumbnail) so that the slides carry the brand. Motion is one short slide-in (425 ms, expressive-out), switched off under reduced motion.

Building a deck

  • One brand per deck. An OTTO deck uses the OTTO theme and follows the OTTO rules: OTTO Sans, OTTO red #eb001f on at most 30 % of the area, the logo only red on light or white on red. An Otto Group deck uses the Otto Group theme: Optimist, red #F00020, sand #F5F0E1 and a footer with the wordmark. The two never mix; see OTTO or Otto Group?
  • Pictures: Otto Group decks use the layered photo style; OTTO decks use OTTO red material or real OTTO photography.
  • Layouts: the presentation styles and the sample decks show every slide type.