OTTODesign System

ImageryPicture styles

Style: OTTO 3D illustration

Soft clay figures and objects for empty states, onboarding, error and success moments, and chapter openers in apps and PDFs. The style follows the official illustration set and its guidelines: same material, proportions and palette.

Yuki and Mika belong to OTTO and appear only in work for or with OTTO. Whenever one of the 35 official motifs fits, it comes first; new motifs in this style are drafts, not OTTO artwork.

The brief

style: soft 3D clay illustration, matte plasticine-like surfaces with fine hand-made texture, rounded chunky forms, slightly oversized hands, friendly and calm, like the reference images
ground: flat seamless beige #f5e6d7 (OTTO base token beige-90), no horizon, no gradient, soft contact shadow under the subject only
palette: pastel and mid tones only, taken from the OTTO base palette: yellow #fffaaf and #ffeb91, sky blue #c5eaff and #6ea0eb, lilac #c5afe9, violet hair #6c49cf, pink #ffbef5 and #e89fdd, mint #b4e1d7, warm red #de3e64 for small accents, cardboard brown for parcels; no neon, no black surfaces except phone screens
skin: invented characters (Yuki, Mika, new generic figures) always the OTTO stylised dusty mauve clay, mid tone #bc829c, lit #c891a8, shaded #a86b86; figures of real people use their own natural skin tone as a fixed hex given in the motif (see the person's reference page), never the mauve and never taken freely from the photo light
character (only when the motif asks for Yuki): young person with voluminous violet curly hair, mauve skin as above, oversized soft yellow sweater, light blue jeans, red sneakers, simple dot eyes and a small smile
light: soft even studio light from the top left, gentle ambient occlusion, no rim light, no glare
composition: one subject, centred, generous empty beige space on both sides, whole subject inside the frame, format 8:3 so it can be cropped to 4:3 without losing the subject
never: text, letters, numbers, logos, watermarks, UI text on screens (use simple grey wireframe blocks), photographic realism, glossy plastic, busy backgrounds, more than one scene

Skin stays the same

A character has the same skin in every picture.

Character Skin (mid / lit / shade) Source
Invented OTTO characters (Yuki, Mika, generic figures) #BC829C / #C891A8 / #A86B86 measured on the official illustrations
Leander Endres #EEAC93 / #F6C3AE / #D4907A his press photo, corrected for the warm light (portrait page)

The mauve keeps invented characters neutral and tied to no one. On a real person it looks unnatural, so real people keep a natural tone, fixed once per person and reused.

A picture passes when two or three skin spots (cheek, arm, hand, not clothing) sit within a colour difference of 8 (delta E) of the character's mid tone; the official illustrations measure 1.0 and 3.4. When a real photo serves as reference, it gives identity only: face shape, hair, glasses, beard and clothing, never skin colour, light or realism.

Example motifs

  • A soft heart-shaped cushion resting on an open gift box.
  • Yuki looking into an empty shopping bag, puzzled but relaxed.
  • A parcel on a doormat next to a potted plant.

Pictures in this style

Select a picture to see it at full size.

  • A heart cushion in an open gift boxA heart cushion in an open gift box
  • Card, switch and checkbox stackedCard, switch and checkbox stacked
  • A fan of colour swatches and blocksA fan of colour swatches and blocks
  • A rocket lifting off a cloudA rocket lifting off a cloud
  • A camera and an instant photoA camera and an instant photo
  • Notebooks under a magnifying glassNotebooks under a magnifying glass
  • A clipboard with ticks and a pencilA clipboard with ticks and a pencil
  • A pop-up book of interface partsA pop-up book of interface parts
  • Paint pots and colour blocksPaint pots and colour blocks