# Viso – Designrichtlinien

Stand Oktober 2026 · Grundlage für viso-app.de, die Branchenseiten, die Kanzlei-Seite und alle Erklärfilme.
Die lebende Fassung mit allen Bausteinen zum Ausprobieren liegt unter **viso-app.de/designrichtlinien/**.
Abgeleitet aus der bisherigen Website und den Erklärvideos (Punktraster, Passermarken, Mono-Beschriftungen, Timecode).

---

## 0 · Haltung

**Viso ist ein Messinstrument für Wissen.** Die Marke sieht aus wie gutes Werkzeug: präzise, ruhig, ehrlich beschriftet.
Nichts glänzt ohne Grund. Orange ist ein Signal, keine Dekoration.

Drei Sätze, an denen sich jede Entscheidung misst:

1. **Präzise.** Jede Zahl hat einen Rechenweg, jede Antwort eine Quelle, jedes Beispiel heißt „Beispieldaten".
2. **Ruhig.** Viel Raum, wenige Farben, eine große Bewegung zur Zeit.
3. **Belegt.** Wir zeigen das Produkt, statt es zu beschreiben – mit echten Oberflächen, nicht mit Symbolbildern.

---

## 1 · Logo

- **Der Punkt + die Wortmarke „Viso".** Der Punkt steht für den einen Kopf, an dem das Wissen hängt – und für das Wissen, das gesichert ist.
- Wortmarke: Space Grotesk Bold, Laufweite −0,02 em, als Vektor (keine Webfont-Abhängigkeit in Dateien).
- Punkt: Kreis in Signal-Orange, Durchmesser = 0,68 × Versalhöhe, vertikal auf Mitte der Versalhöhe, Abstand zum V = 1 Punktdurchmesser.
- Varianten: **Weiß auf Graphit** (Standard digital) · **Graphit auf Papier** (Druck, Dokumente) · **Weiß auf Tinte** (Kanzlei).
  Der Punkt bleibt immer orange. Einfarbig nur im Einfarbdruck (dann Punkt in Textfarbe).
- **Zeichen** (App-Icon, Favicon): V-Strich mit Punkt darunter auf Graphit-Quadrat, Radius 6/32.
- Schutzraum: rundum mindestens ein Punktdurchmesser. Mindestgröße digital 64 px Breite, Druck 18 mm.
- Nicht erlaubt: verzerren, drehen, Punkt umfärben, Wortmarke in anderer Schrift setzen, Schatten/Verläufe.

## 2 · Farbe

| Rolle | Name | Hex | Einsatz |
|---|---|---|---|
| Grund | Graphit | `#0C0E13` | Hintergrund, Standardfläche |
| Fläche 2 | Graphit 2 | `#12151C` | Leisten, Rahmen, Karten |
| Fläche 3 | Graphit 3 | `#181C25` | Felder, Hover |
| Linie | Linie | `#232834` | Haarlinien 1 px |
| Linie 2 | Linie stark | `#323846` | Konturknöpfe, Passermarken |
| Text | Weiß | `#F2F4F7` | Überschriften, Text |
| Text 2 | Nebel | `#C9CED8` | Fließtext, Einleitungen |
| Text 3 | Dim | `#8B92A3` | Beschriftungen, Metadaten (ab 12 px) |
| Deko | Mute | `#5D6474` | nur Ornament, Punktraster, nie Text unter 24 px |
| Signal | Signal-Orange | `#FF6A2B` | der Punkt, Knöpfe, Akzentwort, Zahlen |
| Status | Gesichert | `#2FAE6E` | gesichertes Wissen, 100 % |
| Status | Lücke | `#E5484D` | Wissen an einer Person, 0 % |
| Produkt | Papier | `#F4F5F7` | App-Oberflächen (Mocks), helle Karten |

**Kanzlei-Thema** (gleiche Marke, ruhiger): Tinte `#14142B` · Tinte 2 `#1A1A36` · Pergament `#FAF8F4` · Orange tief `#C2410C` (Orange als Text auf hellem Grund).

**Mengenverhältnis** auf einer typischen Seite: Graphit 70 · Weiß/Nebel 20 · Papier 6 · Signal 3 · Status 1.
Orange bleibt sparsam: der Punkt, der orange Knopf des Handlungspaars, ein Akzentwort je Titel und die Unterstreichung von Textlinks – sonst nichts. Im Punktraster leuchtet Orange nur unter dem Zeiger – nie von selbst hinter Text.

**Kontraste (WCAG 2.2)**

| Kombination | Kontrast | Freigabe |
|---|---|---|
| Weiß auf Graphit | 17,5 : 1 | AAA jeder Text |
| Nebel auf Graphit | 12,2 : 1 | AAA jeder Text |
| Signal auf Graphit | 6,8 : 1 | AA jeder Text |
| Dim auf Graphit | 6,2 : 1 | AA jeder Text |
| **Graphit-Tinte auf Signal** (`#120A05`) | 6,9 : 1 | AA – Standard für orange Knöpfe |
| Weiß auf Signal | 2,9 : 1 | **nicht für Text** |
| Mute auf Graphit | 3,3 : 1 | nur Ornament / Schrift ab 24 px |
| Orange tief auf Pergament | 4,9 : 1 | AA (Kanzlei) |
| Status-Chips (Text dunkel auf Tönung) | ≥ 5,4 : 1 | AA |

## 3 · Schrift

| Rolle | Schrift | Schnitt | Satz |
|---|---|---|---|
| Titel | Space Grotesk | 700 | Laufweite −0,025 em, Zeilenabstand 1,04 |
| Text | Inter | 400 / 500 / 600 | 17 px, Zeilenabstand 1,6, max. 68 Zeichen |
| Beschriftung | IBM Plex Mono | 500 | Versal, Laufweite 0,16–0,22 em, 11–13 px |
| Zahlen | IBM Plex Mono | 400 / 500 | tabellarische Ziffern |
| Kanzlei-Titel | IBM Plex Serif | 600 | Laufweite −0,01 em |

- Alle Schriften liegen auf dem eigenen Server (keine Anfragen an Dritte).
- Größen fließend (`clamp`): XL 42–80 px · L 34–60 px · M 28–40 px · Einleitung 17–20 px.
- **Zeichen, die die Schriften nicht enthalten** (✓ ⚠ ● ↺ ⌘ ▶ ≈) werden nie als Text gesetzt, sondern als Icon (SVG) oder CSS-Form.
- Akzent im Titel: genau ein Wort oder eine Wendung in Signal-Orange („Gesichert.", „geht?", „bleibt.").

## 4 · Raster, Raum, Ornament

- Inhaltsbreite 1240 px, Rand `clamp(20px, 5vw, 56px)`. Abstände auf 4er-Raster: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 · 160.
- Kapitel: großzügig, `clamp(96px, 12vw, 168px)` oben und unten, getrennt durch eine Haarlinie.
- Radien: 6 px (Chips, Felder) · 12 px (Knöpfe) · 18 px (Karten, Rahmen).
- **Punktraster** – 32-px-Raster aus 1,6-px-Punkten in Mute. Der Hintergrund von Hero und Film. Jeder Punkt ist ein Stück Wissen.
- **Passermarken** – Eckwinkel 22 px aus 2-px-Linie, außen versetzt um 12 px. Rahmen für Film, Mocks, Datenblatt.
- **Kapitelmarke** – `[01]` in Plex Mono, Ziffer orange, Name in Dim. Die Ziffer zählt jede Seite von vorn.
- **Messleiste** – feine Skala mit Teilstrichen; zeigt im Kopf den Lesefortschritt je Kapitel.
- **Statuspunkt** – 6-px-Punkt vor Metadaten: Grün = gesichert/aktiv, Orange = in Arbeit, Rot = Lücke.
- **Beispieldaten** – jedes Produktbild trägt die Beschriftung „Beispieldaten" oben rechts.

## 5 · Partikel – die Signatur

Ein Partikel ist ein Stück Wissen. Partikel erzählen immer dieselbe Geschichte, in fünf Formationen:

| Formation | Bild | Farbe | Bedeutung |
|---|---|---|---|
| **Kopf** | Kugel, langsam drehend | Orange | Wissen hängt an einer Person |
| **Gespräch** | Welle, Partikel fließen hinaus | Orange → Weiß | Sprach-Interview |
| **Bausteine** | geordnete Blöcke im Raster | Weiß → Grün | strukturiertes Wissen mit Quelle |
| **Abfrage** | ein Strahl, zwei Blöcke leuchten | Weiß + Orange | Antwort mit Quelle, Widerspruch sichtbar |
| **Landkarte** | fünf Bahnen, die sich füllen | Rot → Grün | Risikolandkarte, bis nichts mehr rot ist |

Regeln: höchstens 1.400 Partikel (auf dem Telefon rund 60 Prozent davon) · Partikel weichen dem Zeiger aus · bei reduzierter Bewegung steht die jeweilige Formation still · außerhalb des Bildschirms wird nicht gerechnet.

## 6 · Bewegung

Präzise statt verspielt: schneller Anfang, ruhiges Einrasten.

| Takt | Dauer | Kurve | Wofür |
|---|---|---|---|
| Tick | 0,2 s | `cubic-bezier(.2,.8,.2,1)` | Hover, Farben, Knöpfe |
| Schritt | 0,6–0,9 s | `cubic-bezier(.2,.8,.2,1)` | Einblenden, Reiter, Balken |
| Bühne | 1,0–1,2 s | `cubic-bezier(.16,1,.3,1)` | Titelzeilen, Formationswechsel |
| Dauer | langsam | linear | Partikelkugel, Uhr, Timecode |

- Nie mehr als eine große Bewegung gleichzeitig.
- Titel steigen zeilenweise aus einer Maske (Versatz 0,12 s).
- `prefers-reduced-motion`: alles sofort sichtbar, Filme starten nicht von selbst, Partikel stehen.

## 7 · Bausteine

- **Knöpfe** – Höhe 50 px (klein 40 px), Radius 12 px (Spielknopf im Film 6 px). *Primär:* Signal-Orange, Text Graphit-Tinte. *Hell:* Weiß (auf Hell: Tinte) mit dunkler Schrift. *Kontur:* Linie stark, Text Weiß – nur für Nebenwege. Pfeil → rückt beim Überfahren 3 px nach rechts.
- **Handlungspaar** – „Preise ansehen“ (Primär) und „Video-Call buchen“ (Hell) sind gleichwertig und stehen immer zusammen: Kopf, Hero, Zwischenruf nach Erklärkapiteln, Rechner, Abschluss, mobile Leiste.
- **Segmentschalter** – für monatlich/jährlich; gleitende Markierung, per Pfeiltasten bedienbar.
- **Chips** – Status in Plex Mono, getönter Grund, Punkt davor.
- **Mocks** – Produktoberflächen auf Papier mit Fensterleiste und „Beispieldaten"-Etikett. Sie zeigen echte Abläufe aus Viso: Interview, Abfrage mit Quelle, Widerspruch, Risikolandkarte.
- **Datenblatt** – technische Angaben als Tabelle mit Mono-Schlüsseln (Datenhaltung, KI-Dienste, Rollen, Verträge).
- **Rechner** – als Werkzeug erkennbar: Leiste „Interaktiv“, Regler mit orangem Griff und − / +, einmalige Vorführung beim ersten Sichtkontakt, Ergebnis rechnet live, Rechenweg aufklappbar, Handlungspaar direkt unter dem Ergebnis.
- **Fuß** – ruhig: Marke, zwei Linklisten, eine Zeile. Impressum, Datenschutz und Anschrift stecken in einem kleinen Menü „Impressum & Rechtliches“ (zwei Klicks).
- **Film** – 16:9-Bühne mit Passermarken, Timecode, Kapitelknöpfen, Pause, Neustart, Vollbild und Textfassung. Text auf der Bühne mindestens 24 px (bei 1920 px Bühnenbreite).

## 8 · Sprache

Sachlich, konkret, kurz. Wir siezen. Wir sprechen wie ein guter Meister: ohne Fachchinesisch, ohne Übertreibung.

| So | Nicht so |
|---|---|
| „Viso antwortet – mit Quelle." | „KI-gestützte Wissensrevolution" |
| „Rund dreißig Minuten pro Thema." | „In Sekunden zum perfekten Handbuch!" |
| „Wir behaupten keine Zahl – wir rechnen offen vor." | erfundene Prozentwerte ohne Rechenweg |
| „Ihr bester Mann", „die erfahrene Kollegin" | „Human Resources", „Wissensassets" |
| „Beispieldaten" an jedem Produktbild | Mock-ups ohne Kennzeichnung |
| „Was bewusst draußen bleibt." | Funktionen versprechen, die es nicht gibt |

Schreibweisen: **Viso** (nie VISO im Fließtext) · Risikolandkarte · Klumpenrisiko · Wissensbaustein · Video-Call · Datenbank in Frankfurt · Auftragsverarbeitungsvertrag (AVV).
Zahlen: 1.990 € · 19.08.2026 · 22:30 Uhr · 30 Minuten. Gedankenstrich mit Leerzeichen „ – ".

## 9 · Technik

- Statische Seiten, ein Generator (`src/build.py`), Auslieferung über Netlify. Kein Framework, keine Drittanbieter-Anfragen, keine Cookies, kein Tracking.
- Content-Security-Policy ohne `unsafe-eval`; alle Skripte als Dateien.
- Jede Seite: semantisches HTML, Sprunglink, sichtbarer Fokus, Tastaturbedienung, Textfassung des Films.
- Ziel: Lighthouse ≥ 95 in allen Kategorien; erste Ansicht ohne Layoutsprung.
- Links, die nie brechen dürfen: `/pulverbeschichtung/#video`, `/metallbau/#video`, `/steuerberatung/`, `/demo`, `/login`, alle Stripe-Zahlungslinks.