# Visual Style Guide

## Logo Generation Guidelines

General prompt template for logos:

Style: modern, minimalist, professional
Format: flat design with geometric elements
Elements: abstract motif combining a craftsman's tool (e.g. a stylized compass, ruler, or chisel) with a clean typographic treatment; optionally a subtle shield or badge shape evoking mastery and qualification
Mood: trustworthy, competent, academic — the feeling of a master craftsman's certificate

Default logo prompt base:
"A modern minimalist logo for a German vocational training platform called 'DiAgnostiK', flat design style, geometric shapes, featuring a stylized craftsman's tool or compass integrated into a clean badge or shield motif, dark navy blue (#1A2F5E) and gold (#C9A84C) color palette, white background, professional and trustworthy atmosphere, scalable vector style, suitable for digital and print use."

---

## Logo Color Palette

Primary color: `#1A2F5E` — Marineblau (deep navy blue)
Secondary color: `#C9A84C` — Handwerksgold (warm medium gold)
Accent color: `#F4F0E6` — Elfenbein (warm off-white / ivory — for logo background or text contrast)
Background: `#FFFFFF` — Weiß

Color usage:
- Primary: Main logo shape, wordmark, primary UI elements, headings
- Secondary: Accent elements, badge details, highlights, call-to-action
- Ivory: Soft backgrounds within the logo, inner glow, contrast layer
- Background: Canvas, page backgrounds

---

## Course Image Generation Guidelines

General image style template for course materials:

Visual style: clean photorealistic or high-quality illustrated; shows real trade environments and tools
Color scheme: muted and professional; dominant navy and neutral tones with gold accent highlights
Composition: rule-of-thirds, clear subject focus, minimal clutter
Lighting: bright, natural, workshop-quality lighting; no dramatic shadows
Mood: professional, calm, instructional — like a well-made vocational textbook

Default image prompt base:
"A clean professional photograph (or high-quality illustration) showing [subject], rule-of-thirds composition, muted natural tones with dark navy blue accents, bright natural workshop lighting, calm and instructional atmosphere, suitable for vocational training materials, German craftsmanship context."

Image specifications:
- Aspect ratio: 16:9 (default for slides), 4:3 (handouts), 1:1 (icons/thumbnails)
- Resolution: 1920×1080 px minimum for slides
- Format: JPG for photos, PNG for illustrations and diagrams with transparency
- Accessibility: always include meaningful alt text

---

## Image Consistency Rules

To maintain visual consistency across all course images:

1. Color palette: Use navy (#1A2F5E) and gold (#C9A84C) as accent tones — never as dominant background colors in images
2. Style: Consistent photorealistic or illustrated style — do not mix both within one trade group
3. Characters: If showing people, use realistic trade workers in appropriate PPE and work clothing; no stock-photo clichés
4. Icons: Flat line icons — consistent weight (2px stroke), navy fill or gold highlight
5. Typography in images: Roboto or similar sans-serif; navy on white or white on navy; always in German
6. Spacing: Generous padding, breathing room — never crowded
7. Background: White (#FFFFFF) or light neutral (#F4F6FB) — no colored backgrounds in instructional images

---

## Website Color Palette

Primary color:
- Main: `#1A2F5E` — Marineblau — headings, section headers, navbar, primary buttons, borders
- Light variant: `rgba(26, 47, 94, 0.10)` — tinted section backgrounds, hover states, info boxes

Accent color:
- Main: `#C9A84C` — Handwerksgold — highlights, call-to-action buttons, quiz success indicators, active nav links, badges
- Light variant: `rgba(201, 168, 76, 0.15)` — warm tinted backgrounds, tip boxes, featured content

Text colors:
- Primary text: `#1A1A2E` — very dark blue-black (easier on eyes than pure black)
- Secondary text: `#5A6380` — muted blue-gray — captions, metadata, secondary labels
- Text on colored background: `#FFFFFF` — white — used on navy and gold backgrounds

Background colors:
- Main background: `#FFFFFF` — page background
- Surface / card background: `#F4F6FB` — slight cool tint — content boxes, cards, sidebar panels
- Warm surface: `#F4F0E6` — ivory tint — tip boxes, highlighted sections, pull quotes

Semantic colors:
- Success / correct: `#2D7A4F` — forest green
- Error / incorrect: `#C0392B` — signal red
- Warning / attention: `#E8841A` — amber (retained from original brand as a warning signal)
- Info: `#2471A3` — medium blue

---

## Typography

Headings: **Roboto Condensed Bold** or **Source Sans Pro Bold** — navy (#1A2F5E)
Body text: **Roboto Regular** or **Open Sans** — dark (#1A1A2E), 16–18px base size
Monospace / code: **Roboto Mono** — for technical content, code examples, keyboard shortcuts
Caption / metadata: **Roboto Regular** — secondary text color (#5A6380), 13–14px

Typography scale:
- H1 (course title): 2.4rem, navy, condensed bold
- H2 (section): 1.8rem, navy, bold
- H3+ (subsections, inside containers only): 1.3rem, dark, semi-bold
- Body: 1rem / 16px, dark, regular
- Caption: 0.875rem / 14px, secondary, regular

---

## Example Prompts

Logo example:
"A modern minimalist flat design logo for 'DiAgnostiK — Lehr- und Lernraum', incorporating a stylized geometric compass or master craftsman's badge, dark navy blue #1A2F5E and warm gold #C9A84C color palette, clean white background, professional and trustworthy, scalable SVG format, suitable for use as website favicon, course header, and print materials. German vocational training context."

Course image example (Tischler):
"A clean professional photograph of a skilled carpenter's workbench with high-quality hand tools neatly arranged — chisels, marking gauge, hand plane — on a light wooden surface, rule-of-thirds composition, bright natural workshop lighting, muted natural tones, calm and instructional atmosphere, no people, suitable for German vocational training materials."

Diagram example:
"A clean flat-design infographic showing the 4 steps of applying contact adhesive (Kontaktkleber): (1) Auftragen auf beide Flächen, (2) Ablüften, (3) Zusammenfügen, (4) Andrücken. Dark navy blue (#1A2F5E) numbered steps, gold (#C9A84C) arrows, white background, German labels, minimal and clear, suitable for educational slide material."
