# Design Handover — "AI as your lever" (PHINEO Workshop 2)

*Paste this whole file into a fresh Claude/design session. It is self-contained — no external files needed.*

## The ask
Elevate two artifacts from "clean and functional" to **premium / editorial** design, while keeping the copy and facts exactly as given (they're validated — see "Locked"). Deliver an interactive **HTML deck** and a print-ready **A4 field guide**, plus an editable handoff (PPTX or Google Slides).

## Who it's for
~20 **Corporate-Citizenship / CSR managers at large DACH companies** — non-technical, compliance-conscious, presented to live over **MS Teams** (screen-share, often a laptop/phone window). Tone: restrained, credible, German-corporate — *not* flashy or startup-y. Avoid generic AI-slop aesthetics.

## Brand system (PHINEO — pulled from phineo.org)
**Colours**
- Petrol (signature dark): `#20383A` · deeper `#0E1D1F`
- Teal: `#298294` · dark `#1D6675` · light `#6CBDC6`
- Lime (accent): `#94C11F` · dark `#6F9216`
- Paper/cream: `#F7F5F0` / `#EDE9E0` · Ink `#20383A` · Grey `#5D5D5D`
- RAG (status): go `#6F9216` · amber `#C2901C` · red `#C0492F`

**Type:** **Besley** (serif, display/headlines) + **Inter** (sans, body/UI). Both Google Fonts. Headlines Besley bold; labels Inter uppercase + letter-spacing.

**Feel:** editorial, confident, lots of structure; colour used as *architecture* (bands, panels, badges) not decoration. Premium without heavy shadows.

## Artifact 1 — the deck (interactive, 16:9)
**8 slides** (keep this order, copy, and the throughline *"AI advises — you decide and you sign"* said on slides 1/3/6):
1. **AI as your lever** — frame: *a lever needs a fulcrum and an arm; this is the fulcrum.*
2. **One fulcrum, two directions** — Inward (your own CC work) / Outward (to nonprofits).
3. **AI across your CC value chain** — RAG row: partner research (green) · application scoring (amber) · CSRD/impact draft (green) · stakeholder comms (green) · grantee/funding decision (red). "CC owns the responsible-AI call."
4. **Live demo — "Draft it. Catch it. Sign it."** — draft a CSRD paragraph → it invents a number → you catch it → rehearse your CFO/GC/CEO. (Delivered as a pre-recorded 75s clip.)
5. **Which tool** — Copilot (safest, in your data boundary) · Langdock/Mistral (EU-hosted) · DeepL · Briink/SAP Joule. Honesty line: *"EU-hosted is the start, not the finish — needs DPA, DPIA, Betriebsrat sign-off."*
6. **Get it approved** — EU AI Act Art. 4 (literacy duty since Feb 2025; penalties Aug 2026) · shadow-AI risk · ask for an 8-week pilot (10 licenses, ~€25/user/mo).
7. **Your position + the outward lever** — starter AI-position paragraph + "who signs it"; partners MI4People · N3XTCODER · CorrelAid · Civic Coding; 5-step program.
8. **One ask** — "Pick one command. Try it this week." → into Breakout 2.

**Deck design goals:** a designed **slide master** (consistent kicker / headline / footer system); a real **lever (fulcrum + arm) diagram** on slide 1 instead of text; slide 3 as a polished **process-flow infographic** with RAG states + simple line icons; large type that survives Teams downscaling; subtle, tasteful **motion** for the web version (entrance + transitions); a line-**icon set** in the brand style for tools/sections. Each slide = one idea, headline-first, cue-card sparse (detail lives in speaker notes).

## Artifact 2 — the field guide (print, A4 portrait, 2 pages)
**Page 1 (the rules):** header band · value-chain ribbon · *Which tool* table · *Do & Don't* split panel · *Pre-/Post-flight* checklists.
**Page 2 (the actions):** *8 commands* (numbered) · *the pitch to steal* (highlighted) · *Point it outward* (5-step + partner lists).

**Field-guide design goals:** keep the modular-card direction but push craft — an **icon system**, a properly balanced grid (the Do/Don't card currently has dead space vs the taller tool table — rebalance), a small **data-viz** treatment for the stats (60% / Art. 4 / Aug 2026), and a refined checkbox/checklist style. Consider a single elegant page or a foldable A4 as an alternative. Print-safe colour.

## Locked — do NOT change
- **All copy, claims, numbers, tool names, and source URLs.** They were stress-tested across 3 rounds with 7 audience personas. Specifically keep: EU AI Act dates *(literacy duty since Feb 2025; penalties Aug 2026)*; Langdock customers framed as *"Merck, BASF — vendor-stated, verify"*; *"GDPR-capable ≠ compliant; needs DPA/DPIA/Betriebsrat"*; "you decide and you sign."
- **Real source citations only** (e.g. `artificialintelligenceact.eu`, `zew.de`). **Never reference local files or filenames** — this gets published standalone.
- **No colour emoji** (use CSS/vector marks, line icons, typographic glyphs).

## Open — your call as designer
Layout, grid, composition, icon/illustration system, hero treatment, motion, the lever and value-chain diagrams, photography (PHINEO uses restrained real imagery — a single editorial cover image is welcome), and whether the guide is 1 page / 2 pages / fold.

## Deliverables & specs
- **Deck:** responsive HTML (self-contained, works offline; keyboard + speaker-notes), 16:9, exportable to PDF; plus an **editable** version (PPTX or Google Slides) PHINEO can restyle.
- **Field guide:** print-ready A4 PDF (color-adjust on) + a web HTML version.
- Fonts via Google Fonts (Besley + Inter) with safe fallbacks (Georgia / system-ui).

## Starter prompt for the design session
> "You are designing for PHINEO (German nonprofit consultancy). Using the brand tokens and locked content below, produce a premium, editorial **8-slide 16:9 HTML deck** and a **2-page A4 field guide**. Petrol `#20383A` + lime `#94C11F` + teal `#298294`; Besley headlines + Inter body. Build a real fulcrum/arm diagram, a value-chain process infographic with RAG states, and a line-icon system. Keep all copy and source URLs exactly; no local-file references; no colour emoji; large, Teams-legible type. Verify with screenshots before finishing."
