Skip to content
TYPO3Soul Design System

Illustrations

An illustration supports a tool or an article without an explanation. It gives a card a visual register after its heading and summary have named the subject. If a reader must understand a position, a connection, a quantity or a label in the picture, use a diagram.

That separation makes an illustration safe to crop or reduce. The copy still carries the subject when a decorative edge leaves the frame. A diagram cannot make the same trade, because its positions and labels are the claim.

An illustration sits in an explicit media slot. It is never a page ground behind text. Page surfaces stay flat, and the frame shows where decoration ends and content starts.

The language#

  • One person, object or still-life gesture, reduced to five to eight broad, hard-edged silhouettes.
  • A flat, almost orthographic view. Use overlap and at most two flat tones per object instead of perspective, materials or light.
  • Near-black charcoal, warm greys and muted taupes on a quiet, almost neutral warm-white ground.
  • One contained field of regular halftone dots and exactly one small #FF8700 detail. Neither carries a meaning.
  • No text, labels, arrows, charts, workflows, code or UI screens.

Every illustration is a 1200 × 750 PNG with crop-safe space around its subject. The same file serves light and dark mode. Its warm-white ground is the canvas of the image, not a match for the page. A second dark rendering is a duplicate asset whose composition drifts.

The set#

Illustrations — the set · 1400x835

Another one#

The rules above with the generator's vocabulary: the medium, the negative constraints, the choice of subject. It stands here in full because it is a thing to hand over. Copy the whole block and replace [SUBJECT], the one field that changes. A new medium or a new rendering language starts a second style, and a set in two styles is no set.

The prompt carries no list of subjects already drawn. packages/frontend/assets/placeholders/ owns that list. A copy in the prompt is an inventory that falls behind the assets.

The illustration prompt — replace only the subject
markdown
# Editorial spot-colour illustrations

An illustration gives a tool or an article a visual register without an
explanation. A diagram carries a claim. An illustration only supports the
subject the heading and summary beside it name. If a reader must understand
a position, a connection or a quantity in the image, draw a diagram instead.

## The fixed language

- **Format:** 1200 × 750 PNG. One file serves light and dark mode. There is
  no mode pair.
- **Composition:** one person, object or still-life gesture, drawn as five to
  eight large silhouettes in a flat, almost orthographic view. Leave
  generous, crop-safe space around it.
- **Colour:** a quiet, almost neutral warm-white ground, near-black charcoal,
  warm greys and taupes, plus exactly one small `#FF8700` detail. No second
  accent.
- **Form:** broad, hard-edged matte planes with simplified proportions. A
  sparse dark line can describe a cable, an edge or a joint, never a relation
  or a process.
- **Texture:** one regular halftone field in one contained plane. It is the
  print texture of the illustration, not the dashed state of a diagram.
- **Depth:** use overlap and at most two flat tones per object. You can add
  one pale, shape-like ground wash. Realistic cast shadows, highlights,
  materials and continuous modelling are out. The wash does not license a CSS
  shadow or an interface gradient. The linked card's lit frame stays the only
  one.
- **People:** adult proportions, quiet posture, no identifiable facial detail.
- **Accessibility:** the files are decorative support. Use an empty `alt`
  when the copy beside it already names the subject.

## Prompt

Replace `[SUBJECT]` and leave the rest unchanged:

```text
Use case: stylized-concept
Asset type: decorative card illustration, wide 8:5 landscape

Primary request: Create a mature editorial spot-colour illustration of
[SUBJECT] for a restrained technical design system.

Style/medium: flat drawn editorial illustration with a restrained
cut-paper/printmaking character; broad hard-edged matte silhouettes;
deliberately simplified geometry; at most two flat tones per object; one
controlled field of regular vintage halftone dots.

Composition/framing: 1200 × 750; one clear subject or still-life gesture;
flattened, almost orthographic view with very shallow perspective; generous
nearly neutral warm-white negative space matching #F7F6F2; crop-safe on all
sides; readable at card size; no border or frame.

Colour palette: warm off-white, near-black charcoal, warm grey, muted taupe,
and exactly one small vivid orange #FF8700 element. No other hue.

Rendering rules: five to eight dominant silhouettes; clean simplified
contours; no small functional detail. A sparse line may describe a cable,
edge or joint but must not form a process or diagram. Put the halftone inside
one contained object plane only. If grounding is needed, use one pale flat
wash shaped like a shadow, never realistic lighting.

Constraints: decorative, not explanatory; no text, letters, numbers, logos,
watermark, labels, arrows, charts, workflows, code or UI screens.

Avoid: photorealism, product rendering, realistic perspective, realistic
materials, lenses, reflections, highlights, continuous shading, cast-shadow
gradients, paper grain, cream or parchment backgrounds, bright multicolour
palettes, dramatic lighting, glossy 3D, childish character design, retro
travel posters, speech bubbles, dense detail, fine hatching and decorative
clutter.
```

## The subject

One concrete thing, taken from what the heading beside it names: an object,
or a person with an object. The copy carries the subject, and the image only
sets a register beside it. So the thing itself is enough, and the idea behind
it is not the subject.

Draw it at rest, not at work. A drawer with no cards in it, an unwritten
sheet, one module outside its socket. The moment before or after the work
reads as an object. The work itself needs position, sequence and quantity,
and that is a diagram.

Which subjects a set has spent is a property of that set, not of this prompt.
The prompt produces one image and knows nothing of the others. Somebody who
sees all the cards at once composes the view that shows them.