Imagery

Setup (always)

Pick a style

Each style is a brief file with a ```brief block that the script prepends to the motif. The brief fixes ground, palette (exact hex from tokens), light, composition and what must never appear.

OTTO (the retailer, otto.de) and Otto Group (the corporate group) look and speak differently; see OTTO vs Otto Group and tone of voice. Never mix the two in one piece.

Rules that apply to every style

• No text, letters, numbers or logos in generated images. Headlines are set in OTTO Sans in HTML or the layout; logos are placed from the original SVG (storybook/components/logo/svg).
• No functional colours (error red, success green, warning orange, hint purple) as decoration.
• The model only approximates hex values. Where a ground must be exact (colour fields, illustration grounds), recolour the connected background from the image edges afterwards; keep the original in original/.
• Illustrations: one subject, no text, generic and metaphorical, 8:3 master croppable to 4:3 (guidelines). Prefer an existing official motif; generated ones are drafts in the OTTO style, not OTTO artwork.
• Check anatomy on every picture with people or characters: crop each hand at 100 % and count five fingers, the thumb on the correct side, fingers growing from the palm, a natural wrist; also eyes, ears, teeth and glasses. One error rejects the picture. Prefer poses that keep hands simple (crossed arms, hands in pockets, an open wave) over pointing or gripping; the model gets pointing hands wrong.
• Look at every result at 100 % before using it; rewrite the prompt for a weak motif instead of feeding the result back in.
• Deliver web images as JPEG (quality 82) or WebP at twice the display size; keep the PNG and its sidecar as the master.

Command pattern

source ~/.config/capability-bench/load.zsh
node ~/.agents/skills/brand-pdf/scripts/magnific.mjs generate \
  --brief imagery/styles/<style>.md \
  --prompt "<motif, one or two sentences, colours as hex>" \
  [--ref <original image> ...] \
  --aspect 2:1 \
  --out <target>.png

Resolution 2K, quality medium and variant sunburst are the script defaults, so no flags are needed for them. Write the motif like a shot list: subject, pose or view, the one or two colours that matter as hex, what is left empty.

Recipe: a real person as an OTTO 3D figure

Tested 28.09.2026 with Leander Endres (all results and measurements).

1. Take a professional, well-lit portrait and make a tight face crop.
2. Brief otto-3d-illustration. A real person gets a natural skin tone taken from the photo and fixed as hex (Leander: base #eeac93, light #f6c3ae, shadow #d4907a); only invented characters use the OTTO character skin #bc829c. Motif: list the person's recognisable features (hair, glasses, beard, face shape) and clothing in OTTO palette hex; say that the photos give identity only, never light or realism, and name the skin hex.
3. References in this order: first two or three official illustrations (026-illustration-service, 017-illustration-poster, 003-illustration-error), then the portrait and the face crop.
4. Measure lit skin against the base hex and shaded skin against the shadow hex with imagery/check_colour.py; below delta E 8 passes, otherwise regenerate.
5. Check both hands at 100 % (see the anatomy rule above); a twisted or extra finger rejects the image.
6. For a themed, playful figure add one signature feature and the theme as props, and frame closer (chest up, face about a third of the height), see portrait-to-3d-figure-ai-ninja.txt.
7. Only with the person's consent; the figure is a new character, not Yuki or Mika.

Verified samples (photo styles)

Verified sample

samples/otto-3d-illustration/illustration-wishlist.png (28.09.2026, 2K medium sunburst, brief otto-3d-illustration, three official illustrations as references, prompt in prompts/illustration-wishlist.txt): clay material, palette and ground match the official set; measured ground #f5e5d6 against the target #f5e6d7.

Samples by style

OTTO red material

• brand
• components
• foundations
• getting started
• home red
• home
• imagery
• references
• rules red wide
• rules red
• rules
• storybook
• tokens

Otto Group layered photo

• conversation through plants
• headphones through shapes
• over shoulder laptop
• still life toy
• warehouse symmetry
• woven lamps

OTTO lifestyle photo

• lifestyle kids room
• lifestyle living room
• lifestyle parcel doorstep
• otto lifestyle doorstep

OTTO product still

• product armchair
• product headphones
• product sneaker

OTTO colour field

• colour field parcel
• colour field plant
• colour field sneaker

Otto Group corporate photo

• corporate campus meeting
• corporate executive portrait
• corporate logistics hall
• otto group logistics lead

OTTO 3D illustration

• illustration wishlist
• components
• foundations
• getting started
• imagery
• references
• rules
• storybook
• tokens