# ProcessCube Brand-Kit

**Quelle:** www.processcube.io · **Stand:** 2026-09-01 · **Owner:** ProcessCube UG (haftungsbeschränkt) i.G.

---

## 1. Marke

- **Name:** ProcessCube
- **Rechtsform:** ProcessCube UG (haftungsbeschränkt) i.G.
- **Tagline:** *„Die richtige Frage kommt zuerst."*
- **Descriptor:** ProcessCube ist dein Werkzeugkasten für wiederkehrende Aufgaben, Abläufe und Entscheidungen — digital, automatisch, ohne Chaos.
- **Positionierung:** KI-Automatisierung für den DACH-Mittelstand. DSGVO-konform, on-premise möglich, EU AI Act ready.

### Produkt-Hierarchie

1. **ProcessCube** — BPMN-Plattform, technische Basis.
2. **Ticketpilot** — erstes fertiges Produkt auf ProcessCube (KI-Support).
3. **alfred** — nächste Stufe: vollständiges KI-Assistenten-Ökosystem.

---

## 2. Farbpalette

### 2.1 Primär

| Rolle | HEX | RGB | Einsatz |
|---|---|---|---|
| **Primär-Orange** | `#F8A923` | 248, 169, 35 | Buttons, Icons, Highlights, Logo-Icon |
| Orange Hover | `#d4901e` | 212, 144, 30 | Button-Hover, aktive Zustände |
| Orange Glow | `rgba(248,169,35,.14)` | — | Weiche Card-Backgrounds |
| Orange Glow Strong | `rgba(248,169,35,.26)` | — | Focus-Ringe, starke Hover-Glows |

> **Wichtig:** Das alte ProcessCube-Orange `#E8561A` wird nicht mehr verwendet.
> In neuen Materialien immer `#F8A923` einsetzen.

### 2.2 Sekundär / Akzent

| Rolle | HEX | Einsatz |
|---|---|---|
| Orange Deep | `#FF6B00` | Gradienten, sekundäre Akzente |
| Success | `#4ade80` | Bestätigung, Erfolgsmeldungen |

### 2.3 Neutrals (Dark Mode Default)

| Rolle | HEX | Einsatz |
|---|---|---|
| Background Primär | `#070707` | Haupt-Canvas |
| Background 2 | `#0f0f0f` | Sektions-Abgrenzung |
| Background 3 | `#161616` | Card-/Container-Backgrounds |
| Border | `rgba(255,255,255,.07)` | Feine Trennlinien |
| Border Hover | `rgba(255,255,255,.14)` | Border im Hover |
| Text | `#f0f0f0` | Primärer Text |
| Text Muted | `#aaaaaa` | Sekundärer Text, Descriptions |
| Text Faint | `#888888` | Labels, Kapitel-Marker |

### 2.4 Light Mode (für Print / helle Dokumente)

| Rolle | HEX |
|---|---|
| Background | `#ffffff` |
| Text | `#0F172A` |
| Text Muted | `#475569` |
| Text Faint | `#94A3B8` |
| Border | `rgba(0,0,0,.08)` |

Primär-Orange `#F8A923` funktioniert in beiden Modi.

---

## 3. Typografie

### 3.1 Display / Headlines

**Barlow Condensed** — kondensiert, kraftvoll, klar.

- Fallback: Impact, 'Arial Black', sans-serif
- Gewichte: 600, 700, 800, 900
- Letter-Spacing: −0.01em bis −0.02em (etwas gedrängt)
- Line-Height: 1.05
- Einsatz: H1–H3, Hero-Titel, Kapitel-Marker

### 3.2 Body

**Plus Jakarta Sans** — modern, freundlich, hoch lesbar.

- Fallback: system-ui, -apple-system, sans-serif
- Gewichte: 300, 400, 500, 600, 700, 800, 900
- Line-Height: 1.6 (Body), 1.4 (UI-Labels)
- Einsatz: Fließtext, Buttons, Labels, Formulare

### 3.3 Loader (Web)

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
```

---

## 4. Logo

- **Standard-Wortmarke:** weißer Text mit orangem Icon-Block links.
- **Nur auf dunklen Hintergründen** einsetzbar (Text ist weiß).
- Für helle Hintergründe wird eine Dark-Text-Variante benötigt — noch nicht vorhanden.

### Regeln

- **Freiraum:** Um das Logo mindestens die Höhe des Icon-Quadrats freihalten.
- **Mindestgröße:** 120 px digital, 30 mm print.
- **Nicht:** verzerren, umfärben, Effekte anwenden, auf lauten Hintergründen platzieren.

---

## 5. Layout / Radius

- **Standard-Radius:** 16 px (Cards, Buttons, Container)
- **Klein:** 8 px (Chips, Badges)
- **Groß:** 24 px (Hero-Bilder, Marketing-Karten)

---

## 6. Tonalität / Voice

### 6.1 Prinzipien

1. **Klarheit vor Cleverness** — keine Buzzwords, keine leeren Versprechen.
2. **Ehrlichkeit zuerst** — auch sagen, wo KI *nicht* hilft.
3. **Fragen vor Antworten** — die richtige Frage kommt zuerst.
4. **Konkret statt abstrakt** — Beispiele, Zahlen, Signale statt Adjektive.
5. **Kurze Sätze. Absätze mit Luft. Kein Marketing-Fluff.**

### 6.2 Ansprache

- **Du-Form** (informell, aber respektvoll)
- Ziel-Persona: Entscheider im DACH-Mittelstand, technisch-solide, skeptisch gegenüber Hype

### 6.3 Signature Phrases

- „Die richtige Frage kommt zuerst"
- „Kein Hype, sondern Klarheit"
- „DSGVO-konform · On-Premise möglich"
- „Mittelstand DACH"
- „Nicht als Blackbox — als Prozessteilnehmer"

### 6.4 Compliance-Botschaften (immer verfügbar halten)

- ✓ DSGVO-konform
- ✓ On-Premise möglich
- ✓ EU AI Act ready
- ✓ Vollständiger Audit-Trail

---

## 7. Do / Don't

### ✅ Do

- Dunkler Hintergrund (`#070707`) als Standard-Canvas
- Orange (`#F8A923`) als **einziger** Akzent — nie mit anderen Farben mischen
- Viel Weißraum um Headlines (Barlow Condensed atmet lassen)
- Fragen als Struktur-Element („Frage 1", „Frage 2")
- Kapitel-Marker in kleiner, muted Textfarbe

### ❌ Don't

- Kein zweites Signal-Rot/-Grün neben Orange
- Kein Verlaufsverlauf über die ganze Fläche (Orange nur punktuell)
- Keine emojiartigen Icons — lieber schlichte Line-Icons oder Symbol-Emojis wie 📨 ⚙️ 🧠 📊 wie auf der Website
- Keine Stock-Fotos mit Business-People (passt nicht zum Tonfall)
- Kein Titel-Case für Headlines — Sentence Case („Wo hilft KI dir wirklich?")

---

## 8. Content-Muster von der Website

### Struktur einer Argumentationskette

1. **Kapitel-Marker:** Klein, muted, römisch/nummeriert („Kapitel 1 — Die richtigen Fragen")
2. **Frage / These:** Große Headline in Barlow Condensed
3. **Kurzer Erklärtext:** 1–2 Absätze, Plus Jakarta Sans
4. **Signal:** „Signal: Wenn dein Team täglich dieselben 5 Fragen beantwortet →"
5. **CTA:** Klar formulierter nächster Schritt

### Beispiel-Übernahme

> Kapitel 3 — Ehrlichkeit zuerst
> ## KI ist kein Allheilmittel.
> Klarheit ist das Ziel.

Dieses „Kapitel — Aussage — Untertitel"-Muster in Dokumenten und Slides übernehmen.

---

## 9. Anwendungsbeispiele

### Slide-Template (Präsentation)

- **Hintergrund:** `#070707`
- **Titel:** Barlow Condensed 800, `#f0f0f0`, 48–72 pt
- **Untertitel:** Plus Jakarta Sans 500, `#aaaaaa`, 20–24 pt
- **Body:** Plus Jakarta Sans 400, `#f0f0f0`, 16–20 pt
- **Highlight-Wörter:** `#F8A923`, gleiches Gewicht
- **Kapitel-Marker oben links:** Plus Jakarta Sans 600, `#888888`, 12–14 pt, uppercase, letter-spacing +0.1em

### Dokument (Word/PDF, Light Mode)

- Hintergrund: `#ffffff`
- Text: `#0F172A`
- Akzent (Titel, Callouts, Icons): `#F8A923`
- Muted: `#475569`
- Fonts: Barlow Condensed (Titel), Plus Jakarta Sans (Body)

### E-Mail (HTML-Template)

- Header: dunkler Balken `#070707` mit Logo weiß
- Body: `#ffffff`, Text `#0F172A`
- CTA-Button: `#F8A923` mit dunklem Text `#0F172A`, 16 px Radius
- Footer: `#0f0f0f`, Text `#aaaaaa`

---

## 10. Design-Richtlinien für Content-Grafiken

Universelle Prinzipien für LinkedIn-Posts, Slide-Elements, Social-Reels, Pitch-Decks und Marketing-Grafiken. Ergänzen die Markenregeln aus Abschnitt 2–9 — gelten für **jede** visuelle Komposition, auch jenseits der Website.

### 10.1 Visuelle Hierarchie · „1 big, 2 medium, rest small"

Jede Komposition hat **genau eine Hauptaussage**. Alles andere unterstützt.

- **1 Hero-Element** — die Kernaussage (Headline, Zahl, Statement). Dominiert durch Größe + Orange-Highlight.
- **2 unterstützende Elemente** — Kontext, Subheadlines, Quelle, Chip. Mittelgroß, in `#f0f0f0` oder muted.
- **Rest klein** — Labels, Fußnoten, Decoration. Sehr klein, `#888888`.

Wenn der Betrachter nicht in 2 Sekunden das Hero-Element identifiziert, ist die Hierarchie falsch.

### 10.2 Farbverteilung · 60-30-10 Rule

Jede Komposition folgt einer disziplinierten Farbverteilung:

| Anteil | Rolle | Standard-Zuweisung ProcessCube |
|---|---|---|
| **60 %** | Hintergrund / Grundfläche | `#070707` (Dark) oder `#ffffff` (Light) |
| **30 %** | Content auf Grundfläche | `#f0f0f0` Text / `#161616` Cards (Dark) · `#0F172A` Text / Light-Cards (Light) |
| **10 %** | Akzent · Highlights · Icons | **Orange `#F8A923` — nur hier!** |

> **Regel:** Orange nie über 10 % der Fläche. Wenn der Blick sich an mehr als 1–2 Stellen „festhakt", ist das Orange zu laut gewählt.

### 10.3 Bezug zu bestehenden Regeln

- Verträgt sich mit Abschnitt 7 „Do/Don't" — kein zweites Signal-Rot/-Grün neben Orange.
- Erweitert Abschnitt 9 „Slide-Template" um universelle Aussagen für Social und Standalone-Grafiken.
- „Highlight-Wörter in Orange" (Abschnitt 9) ist konkrete Anwendung der 10-%-Regel.

### 10.4 Praktischer Check

Vor dem Export jede Grafik mit 3 Fragen prüfen:

1. **Hero sofort erkennbar?** (Sek 1 Blickführung)
2. **Orange ≤ 10 % der Pixel?** (Akzent, nicht Deko)
3. **Max 2 unterstützende Elemente neben dem Hero?** (sonst ist Hierarchie flach)

Wenn eine Antwort „nein" ist: eine Ebene zurück, Elemente reduzieren.

### 10.5 Quelle

Prinzipien aus Design-Content von @designs_by_max (Instagram, Oktober 2026) · gespeichert in Collection „ProcessCube Sales Strategie" · transkribiert und reflektiert durch Jarvis.

---

## 11. Offene Punkte / Roadmap

- [ ] Logo-Variante mit dunklem Text für helle Hintergründe
- [ ] Icon-only Variante (nur das Orange-Quadrat) als Favicon / App-Icon
- [ ] Bildwelt-Guidelines (Fotografie-Stil, Illustrationen)
- [ ] Print-Templates (Briefpapier, Visitenkarte, Angebot)
- [ ] PowerPoint- / Google-Slides-Master

Wenn was hier fehlt oder anders soll — Bescheid geben.