# Blog Featured Image Style Guide

**Last Updated:** 2026-02-14

Style guide for AI-generated featured images for ordio Insights blog posts. Ensures visual consistency across all Lexikon, Ratgeber, and Inside Ordio content.

## CRITICAL: Topic-Specific Elements

**Featured images must visually connect to the post topic.** Maintain the same colors, feel, and professional look—but adjust elements and design based on topic/keywords. Avoid generic office/desk imagery when the topic suggests a different scene. **On-theme:** Match scene type to topic meaning (e.g. Lohnersatzleistungen = support when you can't work → cozy chair by window, not office desk).

| Topic Keywords | Use Scene Type | Avoid |
|----------------|----------------|-------|
| Spesen, Reisekosten, Verpflegungsmehraufwand, Dienstreise | Travel/motion: window from train/car, blurred landscape, golden hour | Generic office, desk |
| Schichtplanung, Dienstplan | Tablet with abstract blocks, desk | Calendar, documents |
| Gastronomie | Cafe interior, silhouettes | Office |
| Zeiterfassung | Minimalist desk, laptop, plants | Abstract tech nodes |
| Stempeluhr | Timer/progress ring (no digits) like Industrieminuten, or minimalist desk with time-precision metaphor | Literal clock, stempeluhr device |
| Stundennachweis, Stundenzettel | Form-like abstract shapes, grid, or minimalist desk with time-document metaphor | Literal timesheet with text |
| HR, Personal, HR Trends | Silhouettes, collaboration, soft-focus office | Generic handshakes |
| Soft Skills | Silhouettes, collaboration, soft-focus office – Menschen im Austausch, nicht isoliert | Abstract nodes, generic handshakes, single person at desk |
| Rufbereitschaft | Night interior, soft lamp, chair by window, phone silhouette – on-call, waiting | Desk, daytime office |
| Überstunden | Abstract flowing sand or hourglass metaphor, muted – no clock | Generic clock, sundial |
| Urlaubsanspruch | Desk with plants, open window, warm light – relaxation | Generic office |
| Bundesurlaubsgesetz, BUrlG | Architectural/structural: soft geometric lines, layered forms, muted blues, warm light – law as foundation | Travel, desk, cafe |
| Lohnnebenkosten | Abstract stacked layers or pie-chart shape (no labels) – cost structure | Literal charts, text |
| Industrieminuten | Timer/progress ring (no digits), minimalist – time precision | Wall clock, sundial |
| Personalfragebogen | Form-like abstract shapes, grid, no text | Documents with content |
| Arbeitszeugnis | Pen, blank paper stack, professional | Certificate, document with text |
| Nacharbeit | Office at night, single desk lamp, dark blue tones | Daytime office |
| Sabbatical | Nature, growth, light through leaves – time away | Office, desk |
| HACCP | Clean surface, subtle control-point metaphor – no text | Checklists, documents |
| 8D-Report | Organized 8-section tray (empty, no labels) – conveys 8-step process, problem-solving protocol | Glowing center, circuit-like lines, data flow nodes |
| Personalcontrolling | Abstract connected nodes, data flow | Generic sphere, pie chart |
| Gleitzeit | Flexible, flowing abstract shapes – time flexibility | Rigid clock |
| Arbeitszeitmodelle | Tablet with abstract schedule blocks (no text) – conveys variety of models, shift structure | Flowing ribbons, cloud shapes, gear elements |
| Krankmeldung | Soft light, abstract rest/recovery metaphor | Medical documents |
| Lohnersatzleistungen, Krankengeld, Elterngeld, Arbeitslosengeld | Soft chair by window, warm light, cozy home interior – support during transition | Generic office desk, calculator |
| Probezeit | Minimalist desk, soft morning light, empty notepad, single plant – new beginnings | Contract, certificate |
| Arbeitsschutz | Safety metaphor: soft protective layer, structure – no text | Warning signs |
| Betriebsprüfung, Steuerprüfung | Organized stack of blank papers/folders, pen, desk – audit preparation | Abstract nodes, grid |
| Pausenzeiten | Subtle break metaphor: empty chair, soft light, rest | Clock, timer |
| Betriebliche Altersvorsorge | Abstract layered structure, growth metaphor | Charts, numbers |
| Employer Branding | Attraction metaphor: soft glow, connection nodes | Handshakes, logos |
| Arbeitstage | Abstract calendar-grid shapes (no dates) – time structure | Calendar with dates |
| Mindestlohn | Balanced scale metaphor, abstract – no text | Money, coins |
| Lohnarten | Organized desk with compartment tray (empty, no labels) – conveys classification, structure | Abstract stacked blocks, vertical columns |
| Initiativbewerbung | Silhouette at desk, pen, blank notepad, soft light – preparation, initiative | Pristine perfection, tablet with abstract blocks |
| Abfindung, Abfindungsabrechnung | Balanced scale metaphor or abstract transition – payment, exit, severance | Generic office, documents, support/rest (aufhebungsvertrag) |
| Fluktuation, Mitarbeiterfluktuation | Revolving door at office entrance – concrete turnover metaphor (people in, people out) | Abstract flowing shapes, layered forms, cafe (mitarbeiterbindung), doorway with empty chair (offboarding) |
| Resilienz | Warm interior/workplace: calm, organized workspace with natural light, healthy plants, organized but not empty – workplace resilience, recovery and strength | Abstract nature metaphors (tree trunk), minimalist empty desk (work-life-balance), silhouettes (soft-skills), cafe (employee-engagement) |

**Principle:** Each image should be identifiable as belonging to its topic. Prefer **on-theme, topic-specific** scenes (concrete, recognizable) over cryptic or abstract metaphors. Same palette (muted blues, greens, warm accents), same professional feel—but unique, diverse, and interesting composition that matches the content.

## CRITICAL: No Text in Images

**All featured images must contain zero text, letters, typography, signs, labels, or readable content.**

### What to Avoid in Prompts

Do **not** describe objects that invite AI to render text:

- Documents with content (contracts, certificates, forms)
- Calendars with dates or month names
- Checklists with text or checkmarks
- Screens with UI text or labels
- Signage, banners, or logos with words

### Use Instead

- Abstract shapes, silhouettes, blurred backgrounds
- Symbolic objects: "stack of blank papers" not "employment contract"
- "Tablet showing abstract colored blocks" not "calendar with dates"
- Mood and atmosphere: "soft morning light through window"

## On-Theme Over Abstract (Preferred)

**Principle:** Images should be **recognizably on-topic** – a reader should understand the connection without guessing. Prefer concrete, topic-specific scenes over cryptic or purely abstract metaphors.

### Prefer On-Theme, Topic-Specific

- **Concrete scenes:** Desk with organized trays for Arbeitsorganisation; workbench/assembly for Akkordarbeit; schedule grid on tablet for Arbeitsplan; empty desk with warm light for Feiertagsausgleich
- **Recognizable context:** Workplace, production, planning, rest – scenes that match what the topic is about
- **Mood/atmosphere:** Support the topic (e.g. "day off" feel for holiday compensation, "structure" for organization)
- **Rule of thumb:** If someone reads the post title, would they recognize the image as related? If not, make it more literal.

### Avoid Cryptic / Overly Conceptual

- **Abstract metaphors:** "Soft nodes, flowing lines", "abstract connected structure", "abstract flowing shapes" – too generic; use topic-specific alternatives
- **Vague symbolism:** "Conveys rhythm, output" without concrete context – reader cannot connect to topic
- **Generic abstract:** Blue spheres, vertical columns, stacked blocks – overused and not topic-specific
- **When in doubt:** Choose a concrete workspace, desk, or industry scene that matches the topic over an abstract metaphor

### Avoid Literal (Text/Readable Props)

- **Topic-name objects:** "Probezeit document", "Arbeitsvertrag", "certificate" (invites text)
- **Readable props:** "Calendar showing JANUAR", "checklist with items"
- **Off-topic generic:** Generic office/desk for travel/expense topics (Spesen, Reisekosten) – use travel/motion scene instead

## Overview

Featured images should convey a **modern, clean, professional** aesthetic that aligns with Ordio's brand. Images are illustrative or soft-photographic—avoid overly realistic stock-photo feels or cartoonish styles.

## Visual Style

### Core Characteristics

- **Modern:** Contemporary office, workspace, or industry-relevant settings
- **Clean:** Uncluttered composition, clear focal points
- **Professional:** Business-appropriate, productivity-oriented
- **Illustrative:** Soft textures, clean lines; may be digitally painted or stylized photography

### Color Palette

- **Primary:** Muted blues, greens
- **Accents:** Warm tones (orange, brown, light red)
- **Backgrounds:** Light, bright; white or light grey dominant
- **Avoid:** Vibrant neon, harsh contrasts, overly saturated colors

### Subjects (Topic-Dependent)

| Topic Type                   | Suggested Subjects (no text)                                                                 |
| ---------------------------- | --------------------------------------------------------------------------------------------- |
| Schichtplanung / Arbeitszeit | Tablet with abstract colored blocks (no readable text), soft desk surface                     |
| Gastronomie / Hospitality   | Cafe interior with silhouettes, natural light, no signage                                      |
| Office / HR topics           | Minimalist desk, monitor (blurred), laptop, plants, natural light                             |
| Finance / Buchhaltung        | Laptop showing abstract chart (no labels), desk, pen                                           |
| General                      | Clean workspace, organized desk, subtle productivity elements, no text                        |

### Composition

- **Landscape:** 16:9 ratio (1024×576 or 1280×720)
- **Focal point:** Left or center; avoid busy backgrounds
- **Depth:** Slight blur for background elements; foreground sharp

## Diversity (Scene-Type Taxonomy)

**Prefer variety:** Rotate scene types across posts so the blog index and category pages feel visually diverse. Desk/coffee/plant scenes are valid when they fit the topic – the goal is overall diversity, not avoiding any particular style.

### Scene Type Categories

| # | Category | Example | Use When |
|---|----------|---------|----------|
| 1 | Desk/workspace | Desk, laptop, monitor, plant, notepad | Schichtplanung, Zeiterfassung, office topics |
| 2 | Cafe/interior | Cafe interior, silhouettes, natural light | Gastronomie, hospitality |
| 3 | Travel/motion | Window view from train/car, blurred landscape, golden hour | Verpflegungsmehraufwand, Reisekosten |
| 4 | Abstract/metaphorical | Use sparingly; prefer topic-specific concrete scenes. Soft nodes, flowing lines only when no better alternative | Avoid for most topics; use desk/workspace instead |
| 5 | Silhouettes/people | Soft-focus office with silhouettes, natural light | Collaboration, presence |
| 6 | Nature/outdoor | Plants, light, growth metaphor | Personalentwicklung, Sabbatical |
| 7 | Architectural/space | Buildings, structure, space – conveys organisation | Organigramm, structure |
| 8 | Support/rest | Soft chair by window, warm light, cozy interior | Lohnersatzleistungen, support during transition |

### Rotation Rule

- Prefer a different scene type when adjacent posts already use similar imagery (e.g. several desk scenes in a row)
- Mix categories 1–7 across the blog for visual variety

### Diverse Prompt Examples

- **Abstract connection/collaboration:** "Soft glowing nodes, flowing lines, muted blues and greens – conveys organisation, teamwork"
- **Cinematic travel:** "Window view from inside train or car – blurred landscape, golden hour light streaming in, soft bokeh"
- **Soft-focus silhouettes:** "Office interior with silhouettes of people in background, natural morning light"
- **Desk/workspace:** "Minimalist desk with laptop, plant, natural light" (valid when topic fits)

## What to Avoid

- **Busy:** Overly complex compositions, too many elements
- **Abstract:** Pure geometric or abstract art
- **Cartoonish:** Comic-style, exaggerated illustrations
- **Stock cliché:** Handshakes, generic business people pointing at screens
- **Low quality:** Pixelated, AI artifacts, unnatural proportions
- **Text:** Any letters, words, labels, or readable content in the image
- **Too AI / sterile:** Pristine perfection, unnaturally smooth surfaces, spotless desk, generic stock photo aesthetic, tablet showing abstract blocks. Prefer: editorial photography, natural texture, lived-in feel, soft film-like quality.

## Common Pitfalls & Anti-Repetition

AI models return similar images when prompts lack granularity. **Explicitly exclude recurring motifs** and **vary composition** to break repetition.

### Repetitive Elements to Exclude

Embed in prompts: "Avoid: blue sphere, sundial shape, generic wall clock, single central vertical bar, floating pie chart, stock office with laptop."

| Element | Why Avoid |
|--------|-----------|
| Blue sphere | Appears across many AI outputs; generic |
| Sundial/clock-shaped object | Overused for time-related topics |
| Generic wall clock | Literal; invites similarity |
| Single central vertical bar | Common abstract motif |
| Abstract stacked blocks / vertical columns | Generic, overused for finance/structure topics; use topic-specific alternatives (e.g. organized compartment tray for Lohnarten) |
| Laptop-on-desk (when topic suggests another scene) | Default fallback; use only when topic fits |
| Identical blue/teal abstract rings | Overused in conceptual imagery |

### Composition Variation

Explicitly specify **one** per prompt to reduce repetition:

- **Camera angle:** Low angle, bird's eye, diagonal, eye-level
- **Focal length:** Wide shot, close-up on object, shallow depth of field
- **Layout:** Rule of thirds, asymmetric composition, foreground/background emphasis

### Negative Prompt Wording

Include at end of prompts:

```
Avoid: blue sphere, sundial shape, generic clock, floating pie chart, stock office with laptop.
```

### Anti-AI Look (Avoid Sterile/Generic Feel)

**Goal:** Keep professional look and feel – but avoid the "too AI" polished, stock-photo aesthetic.

**Add to prompts when relevant:**
- "Editorial photography, natural texture, soft film-like quality"
- "Lived-in feel – not pristine or sterile"
- "Slightly asymmetrical, natural arrangement"
- "Soft diffused light with subtle shadows"

**Explicitly avoid in prompts:**
- "Pristine perfection" / "spotless" / "perfectly aligned"
- "Generic stock photo aesthetic"
- "Tablet showing abstract blocks" (common AI fallback)
- "Unnaturally smooth surfaces"
- "Factory-new" / "sterile"

**Principle:** Same muted palette, professional vibe – but with organic texture, subtle imperfection, and editorial/documentary feel rather than generic corporate stock.

## Prompt Engineering Best Practices

### Granularity

Enumerate object counts, positions, background details, colors, and sizes. Example:

- ❌ "Desk with laptop and plant"
- ✅ "Single plant on left, laptop closed on right, window fills upper third, muted blue wall"

### Conceptual Scaffolding

State intent first, then map to concrete visual elements:

1. **Intent:** "Conveys X as…"
2. **Elements:** Concrete visual anchors (no text)

### Composition Picker

Require **one** per prompt: low angle, bird's eye, diagonal, wide shot, close-up on object. This reduces accidental repetition when DALL-E 3/Gemini lack layout details.

### Best Practice Reference

Use LLM to expand prompts with enumerated details when needed. Vague prompts ("minimalist desk") produce similar outputs; granular prompts ("single plant on left, blank notepad center, soft shadow from window upper right") produce distinct images.

## Anti-Patterns (Prompt Don'ts)

- "employment contract" / "Arbeitsvertrag" / "Probezeit document"
- "calendar showing first months" / "JANUAR, FEBRUAR"
- "checklist" / "subtle checklist"
- "certificate" / "Arbeitszeugnis"
- "documents with scheduling visuals" (use "abstract colored blocks" instead)
- "spreadsheet" (use "chart" or "abstract graph" without labels)

## Technical Specifications

| Property      | Value                                                                 |
| ------------- | --------------------------------------------------------------------- |
| Format        | WebP (preferred; ~30–50% smaller than PNG) or PNG                     |
| Aspect ratio  | 16:9                                                                  |
| Dimensions    | 1024×576 (minimum) or 1280×720; source from DALL-E: 1792×1024         |
| File location | `v2/img/insights/`                                                    |
| Public URL    | `/insights/bilder/{filename}.webp`                                    |
| Quality       | WebP quality 85 (Pillow or cwebp)                                    |

### Responsive Images (srcset)

For performance (LCP, Core Web Vitals), use responsive variants:

| Variant  | Width | Use case                 |
| -------- | ----- | ------------------------ |
| 640w     | 640px | Mobile                   |
| 1024w    | 1024px| Tablet                   |
| 1280w    | 1280px| Desktop (primary/default)|
| 1792w    | 1792px| Large screens            |

**Post JSON schema** (optimize-blog-featured-image.py outputs this):

```json
{
  "featured_image": {
    "src": "/insights/bilder/{slug}-1280w.webp",
    "alt": "Post title | Ordio",
    "width": 1280,
    "height": 585,
    "srcset": [
      {"src": "/insights/bilder/{slug}-640w.webp", "width": 640},
      {"src": "/insights/bilder/{slug}-1024w.webp", "width": 1024},
      {"src": "/insights/bilder/{slug}-1280w.webp", "width": 1280},
      {"src": "/insights/bilder/{slug}-1792w.webp", "width": 1792}
    ]
  }
}
```

**HTML sizes attribute:** `(max-width: 640px) 640px, (max-width: 1024px) 1024px, 1280px`

The blog template (PostHeader.php) renders `srcset` and `sizes` automatically when present. LCP preload is added in the post head when a featured image exists.

## Prompt Template for AI Generation

Use this template when generating images via DALL-E 3, Gemini, or similar. **Always start with the no-text instruction.**

```
CRITICAL: No text, letters, typography, signs, or readable content in the image.
Professional featured image for a German HR/workforce management blog article about [TOPIC].
Style: Modern, clean, conceptual. Muted color palette (blues, greens, warm accents).
Light background. [TOPIC-SPECIFIC: conceptual, no text-inviting objects].
Photorealistic or soft digital painting. 16:9 landscape.
No people's faces clearly visible. Professional business aesthetic.
```

### Topic-Specific Prompt Additions (Conceptual, No Text)

Mix scene types for variety (see Diversity section). **Choose scene by topic keywords**—do not default to desk when topic suggests travel, cafe, etc.

- **Spesen / Reisekosten / Verpflegungsmehraufwand:** "Window view from inside train or car – blurred landscape streaming past, golden hour light, soft bokeh – conveys business travel, journey"
- **Schichtplanung:** "Tablet displaying abstract colored blocks (no readable text), soft desk surface"
- **Gastronomie:** "Cafe interior with silhouettes, natural sunlight, no signage"
- **Zeiterfassung:** "Minimalist desk with laptop, light wooden stand, plants, natural light"
- **HR/Lexikon:** "Soft-focus office with silhouettes of people – conveys collaboration, human presence" or "Professional office setup, monitor (blurred), notepad, minimalist desk"
- **Probezeit:** "Minimalist desk with soft morning light, empty notepad, single plant — conveys new beginnings"

## Reference Examples

Existing posts that exemplify the style (no text, conceptual):

| Post | Filename | Style |
| ---- | -------- | ----- |
| Vertrauensarbeitszeit | pexels-ken-tomita-389818-scaled.webp | Clean desk, monitor, laptop, plants, leather mat, natural light |
| Schichtmodelle | schichtmodelle-1024w.webp | Tablet with colored blocks (no readable text), documents, shelving |
| Personalkosten Gastronomie | Maren_Kaspers_*cafe*.webp | Cafe interior, silhouettes, natural light |
| Bewirtungskosten | (abstract) | Folded paper, blue cylinders, artistic |

## Related Documentation

- [BLOG_FEATURED_IMAGE_GENERATION.md](BLOG_FEATURED_IMAGE_GENERATION.md) – API setup and script usage
- [DATA_STRUCTURE_MAPPING.md](reference/DATA_STRUCTURE_MAPPING.md) – `featured_image` JSON schema