# Brand DNA: KPX AG

> Single-Source-of-Truth für die KoeAds-Demo-Pipeline (Werbemittel, 2 LP-Varianten, Präsentation).
> Quelle: Live-CSS `kpx-it.ch/_next/static/chunks/0jsgq8k7x_x6u.css` + Live-HTML, analysiert 2026-06-14.
> **Korrektur Vorbefund:** Site ist **Next.js + Tailwind** (custom `kpx`-Color-Scale), NICHT Framer.
> Markt: Schweiz (de_CH) — „Grösse" mit ss, kein ß.

## Farben (exakt aus Site-CSS)

### Marken-Skala `kpx-*` (Tailwind-Token)
| Token | Hex | Semantik |
|-------|-----|----------|
| kpx-900 | `#001b37` | Deep Navy — dunkle Sektions-Hintergründe (Hero, Footer) |
| kpx-500 | `#0094bd` | **Primär-Akzent Cyan** — CTAs, Links, Marken-„it", Tagline (oklch 0.62 0.14 225) |
| kpx-200 | `#9acde2` | helles Cyan — Borders, Akzent-Flächen |
| kpx-100 | `#d6f0f9` | sehr helles Cyan — Card-Tints, Badges |
| kpx-50  | `#ecf3f5` | Cyan-Wash — Section-Background hell |

### Erweiterte Marken-Blautöne (aus CSS-Nutzung)
| Hex | Semantik |
|-----|----------|
| `#13294a` | **Heading-Navy** — Überschriften-Text auf Hell (oklch 0.22 0.07 250) |
| `#0057a8` | Sekundär-Blau — Flächen, Icons, Gradient-Stops |
| `#007e9f` | Cyan-Hover (kpx-500 dunkler) |
| `#004676` | Mid-Blue — Tiefenstaffelung |

### Neutral / Funktional
| Hex | Semantik |
|-----|----------|
| `#ffffff` | Reinweiß — Schrift auf Navy, Card-BG |
| `#0f172a` / `#334155` / `#475569` | Slate — Body-Text dunkel auf Hell |
| `#64748b` / `#94a3b8` | Slate-Muted — Meta/Sekundär-Text (NUR auf soliden hellen Flächen) |
| `#f8fafc` / `#f1f5f9` | Slate-Wash — neutrale Sektionen |
| `#f59e0b` | Amber — sparsamer Warn-/Highlight-Akzent |

**Kern-Trio für Pipeline:** Primary `#001b37` (Navy) · Secondary `#0057a8` (Blau) · Accent `#0094bd` (Cyan).

## Typografie
- **Headlines:** DM Sans, Weights 700/800 (bold/extrabold) — Fallback `DM Sans, sans-serif`
- **Body:** DM Sans, Weights 400/500 — Fallback `DM Sans, sans-serif`
- **Akzent/Tagline:** Mono-Stack `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace` — nur für die Tagline „we make IT" und kleine Tech-Labels, in Cyan `#0094bd`
- Tracking: weite Labels nutzen `tracking-wider` (.05em); Headlines `leading-tight` (1.25)

## Logo-Charakteristik
- „kpx"-Wortmarke, **lowercase, Navy `#13294a`**, geometrisch-clean (kantige Schnitte am „k"/„x")
- „it"-Mark: rechteckiges Klammer-Icon, Cyan `#0094bd` + helles Cyan `#9acde2`-Block — bildet eine eckige „[ ]"-IT-Anmutung
- Tagline „we make IT" in Mono-Cyan, immer unter/neben der Wortmarke
- **Usage:** Navy-Logo auf hellen Headern; **weisse Logo-Variante** auf Navy-Sektionen (Hero/Footer). Logo nie auf unruhigem Foto ohne solide Plakette.

## Bildsprache
Schweizer KMU, sachlich-vertrauenswürdig, ruhig-professionell. Echte Betriebe (Werkstatt, Büro, Lager), reale Menschen bei der Arbeit — IT bleibt dezent im Hintergrund (Server-Rack, Monitor, Netzwerk), nie verspielt/sci-fi. Tageslicht, klare Tiefenschärfe, kühle Blau-/Cyan-Akzente die zur Palette passen. Keine Stock-Klischees (Handschlag, Glühbirne, generische „Hacker"-Kapuze).

## Tone-of-Voice
**Adjektive:** verlässlich · klar · proaktiv (sachlich, nie verspielt; CH-KMU-Augenhöhe)
**O-Ton-Beispiel:** „Ihre IT läuft. Ihr Betrieb auch. Wir übernehmen die volle Verantwortung — Server, Clients, Microsoft 365, Cloud, Backup und Firewall, alles aus einer Hand."

---

## 3 Stil-Anker für Werbemittel (Genspark-Skeletons)

Gemeinsamer Konsistenz-Block (an jeden Prompt anhängen):
> *Style: clean Swiss corporate photography, natural daylight, cool blue-cyan accents matching #001b37 navy & #0094bd cyan, shallow depth of field, trustworthy and calm, no sci-fi, no cliché stock gestures. 16:9 and 9:16 variants.*

### Stil A — „IT läuft im Hintergrund"
- **Setting:** realer KMU-Betrieb (Schreinerei/Werkstatt/Büro), Mensch konzentriert bei der eigentlichen Arbeit; im Hintergrund unscharf ein laufender Bildschirm / kleines Server-Rack
- **Lighting:** warmes Tageslicht vorne, kühl-cyanfarbenes Glow am Tech im Hintergrund
- **Composition:** Betrieb scharf im Fokus (2/3), IT dezent + unscharf (1/3) — „IT unsichtbar zuverlässig"
- **Anker-Phrase:** *„Swiss SME at work in focus, IT infrastructure softly blurred in background, calm reliable atmosphere, navy+cyan tech glow."*

### Stil B — „Security / Schutzschild"
- **Setting:** Server-Raum/Netzwerk-Schrank, sauber, abstrakt-grafisches Schild-/Firewall-Motiv aus Linien (kein Klischee-Vorhängeschloss)
- **Lighting:** dunkler Navy-Raum `#001b37`, Cyan `#0094bd` als Lichtquelle/Linien
- **Composition:** zentrales geometrisches Schutz-Element, viel negativer Raum für Headline
- **Anker-Phrase:** *„Dark navy server environment, geometric cyan shield/firewall lines, premium secure mood, ample copy space, #0094bd accent."*

### Stil C — „Persönliche Betreuung vor Ort Zürich"
- **Setting:** KPX-Techniker:in (Hemd/Polo, sympathisch) erklärt KMU-Inhaber:in etwas am Laptop, vor Ort im Betrieb; Zürcher/Schweizer Kontext dezent
- **Lighting:** freundliches Tageslicht, warm + vertrauensvoll
- **Composition:** Zwei-Personen-Halbnah, Augenhöhe, echtes Gespräch — Nähe & Verlässlichkeit
- **Anker-Phrase:** *„Friendly Swiss IT technician advising an SME owner on-site, daylight, eye-level trust, subtle navy+cyan brand cues."*

---

## Cross-Persona-Hinweise

**Pain-Points (Content-Forge):**
- IT-Ausfälle stoppen den Betrieb (Umsatzverlust pro Stillstand-Stunde)
- Cyberrisiko trifft auch KMU — Ransomware/Phishing, kein eigenes Security-Know-how
- Keine eigene IT-Abteilung → Überforderung, Flickwerk, niemand zuständig
- Intransparente IT-Kosten → KPX: transparent kalkulierte, verbindliche Offerte
- Branchensoftware-Schnittstelle ungelöst → KPX deckt das mit ab

**Asset-Referenzen (Visual-Studio), Pfad `refs/`:**
`logo-kpx.png` · `ref-managed.webp` · `ref-prozesse.webp` · `ref-security.webp` · `og-image.png` · Branchen: `branche-{agentur,architekt,automechaniker,elektriker,logistik,maurer,sanitaer,schreiner}.webp`

**LP-Bauer (Header-Stil + CTA):**
- Header: Navy `#001b37` Hintergrund, weisses Logo, weisse Headline, Cyan-CTA-Button (`kpx-btn-cyan` = BG `#0094bd`, weisse Schrift). Sekundär-CTA als Outline (`kpx-btn-outline`).
- **Primär-CTA-Wording:** „Gratis Erstgespräch" (Lead-Ziel, KEIN Kauf). Stärkere Variante: „Jetzt individuelle Erstanalyse vereinbaren". Telefon-CTA: „044 589 695 5".
- Funnel-Logik als Trust-Element: **01 Gratis Erstgespräch → 02 Erstanalyse → 03 Verbindliche Offerte → 04 Betrieb & Weiterentwicklung.**
- Branchen-Segmentierung sichtbar machen (Handwerk, Agenturen, Architektur/Ingenieur, Treuhand, Kanzleien, Logistik, Produktion).

## Kontrast-Gate (Pflicht für alle Personas)
Muted-Slate (`#64748b`/`#94a3b8`) NUR auf soliden hellen Flächen. Auf Navy nur Weiss oder helles Cyan `#9acde2`. Text auf Branchen-Fotos immer mit Scrim + voller Deckkraft.