Designrichtlinien
Wie Viso aussieht, spricht und sich bewegt. Abgeleitet aus Website und Erklärfilmen, gebaut für Website, Film, Präsentation und Social Media. Viso ist ein Messinstrument für Wissen: präzise, ruhig, belegt.
Der Punkt und die Wortmarke.
Der Punkt steht für den einen Kopf, an dem das Wissen hängt – und für das Wissen, das gesichert ist. Die Wortmarke ist aus Space Grotesk Bold gezeichnet, Laufweite −0,02 em. Durchmesser des Punkts: 0,68 × Versalhöhe, mittig auf der Versalhöhe, Abstand zum V: ein Punktdurchmesser.
Varianten
Schutzraum und Mindestgröße
Rundum frei bleibt mindestens ein Punktdurchmesser (x). Mindestbreite digital 64 px, gedruckt 18 mm. Kleiner steht nur das Zeichen.
Zeichen
V-Strich mit Punkt auf Graphit-Quadrat, Radius 6/32. Für Favicon, App-Icon und Profilbilder.
Nicht erlaubt
Graphit trägt. Orange signalisiert.
Die Farben stammen aus Website und Erklärfilmen. Orange ist ein Signal, keine Dekoration: der Punkt, der Knopf, das eine Wort im Titel.
Mengenverhältnis über eine typische Seite. Orange bleibt sparsam: der Punkt, der orange Knopf des Handlungspaars, ein Akzentwort je Titel – und die Unterstreichung von Textlinks. Ein Klick auf eine Farbe kopiert den Wert.
Kontraste nach WCAG 2.2
| Kombination | Kontrast | Freigabe |
|---|---|---|
| AaWeiß auf Graphit | 17,5 : 1 | AAA · jeder Text |
| AaNebel auf Graphit | 12,2 : 1 | AAA · jeder Text |
| AaSignal auf Graphit | 6,8 : 1 | AA · jeder Text |
| AaDim auf Graphit | 6,2 : 1 | AA · jeder Text |
| AaTinte auf Signal | 6,9 : 1 | AA · Standard für Knöpfe |
| AaOrange tief auf Pergament | 4,9 : 1 | AA · Kanzlei |
| AaWeiß auf Signal | 2,9 : 1 | nicht für Text |
| AaMute auf Graphit | 3,3 : 1 | nur Ornament, Schrift ab 24 px |
Darum stehen orange Knöpfe mit dunkler Schrift: Weiß auf Signal-Orange erreicht nur 2,9 : 1.
Drei Schriften, klare Aufgaben.
Eine technische Grotesk für Titel, eine ruhige Textschrift, eine Mono für alles, was gemessen, gezählt oder belegt wird.
Space Grotesk – technisch, mit eigenem Charakter. Laufweite −0,025 em, Zeilenabstand 1,04.
Inter – trägt alles, was gelesen werden muss. 17 px, Zeilenabstand 1,6, höchstens 68 Zeichen pro Zeile.
IBM Plex Mono – für Kapitelmarken, Zahlen, Timecode, Quellenangaben. Versal, Laufweite 0,16 bis 0,22 em.
IBM Plex Serif – ersetzt Space Grotesk auf der Kanzlei-Seite. Ruhiger, gleiche Familie wie die Beschriftung.
XL · 42–80 px · 700Gesichert.L · 34–60 px · 700Vom Kopf in den Betrieb.M · 28–40 px · 700Jeder fragt. Viso antwortet.Einleitung · 17–20 pxViso führt Gespräche mit Ihren erfahrensten Leuten.Text · 17 px · 1,6Antworten kommen nur aus gesichertem Wissen, jede mit Quelle und Datum.Beschriftung · 12 px · 0,2 emWissenssicherung · MittelstandZeichen, die die Schriften nicht enthalten (Haken, Warndreieck, Kreis, Play), werden als SVG-Icon oder CSS-Form gesetzt – nie als Textzeichen.
Gezeichnet wie ein Messinstrument.
Wenige Zeichen, aus den Erklärfilmen übernommen. Sie halten Website, Film und Präsentationen zusammen.
Punktraster
32-px-Raster aus 1,6-px-Punkten. Hintergrund von Hero und Film. Jeder Punkt ist ein Stück Wissen; unter dem Zeiger leuchtet er orange.
Passermarken
Eckwinkel 22 px aus 2-px-Linie, außen um 12 px versetzt. Rahmen für Film, Datenblatt und die Partikelbühne.
Kapitelmarke
Ziffer in Signal-Orange, Klammern in Mute, Name in Dim. Zählt auf jeder Seite von vorn; der Kopf zeigt das aktuelle Kapitel.
Messleiste
Teilstriche alle 12 px, an den Enden ausgeblendet. Trennt Hero und Inhalt und unterlegt Kapitelmarken.
Statuspunkte
Grün = gesichert, Orange = in Arbeit, Rot = Lücke. Text immer dunkel auf getöntem Grund (mindestens 5,4 : 1).
Beispieldaten
Jede Produktansicht ist als Beispiel gekennzeichnet. Namen wie Max Mustermann oder Petra Schulz sind erfunden.
Ein Punkt ist ein Stück Wissen.
Die Signatur von Viso. Partikel erzählen immer dieselbe Geschichte, in fünf Formationen – live, zum Antippen.
- Höchstens 1.400 Partikel, auf dem Telefon rund 60 Prozent davon.
- Partikel weichen dem Zeiger aus – fahren Sie über eine Formation.
- Bei reduzierter Bewegung steht jede Formation still in ihrem Endbild.
- Außerhalb des Bildschirms wird nichts berechnet.
Präzise statt verspielt.
Hover, Farben, Knöpfe
0,2 sEinblenden, Reiter, Balken
0,8 sTitelzeilen, Formationswechsel
1,2 sPartikelkugel, Uhr, Timecode
linearcubic-bezier(.2, .8, .2, 1)- Präzise statt verspielt: schneller Anfang, ruhiges Einrasten.
- Nie mehr als eine große Bewegung gleichzeitig.
- Titel steigen zeilenweise aus einer Maske, 0,12 s versetzt.
- Wer reduzierte Bewegung eingestellt hat, sieht alles sofort; Filme starten nicht von selbst.
Live und zum Ausprobieren.
Knöpfe
Zwei gleichwertige Handlungen stehen immer als Paar: Signal-Orange (Preise) und Hell (Video-Call), gleich groß. Kontur nur für Nebenwege. Höhe 50 px, klein 40 px, Radius 12 px. Der Pfeil rückt beim Überfahren 3 px nach rechts.
Segmentschalter
Gleitende Markierung, mit Pfeiltasten bedienbar, Rolle „radiogroup“.
Status
Plex Mono, 12,5 px, getönter Grund, Punkt davor.
Regler mit Stepper
Werkzeuge zeigen, dass sie Werkzeuge sind: Etikett „Interaktiv“, Griff mit orangem Rand, − / + für präzise Werte und Touch, Ergebnis rechnet live.
In der Praxis: 195 °C bei 10 Minuten.
Die Betriebsanleitung nennt 180 °C bei 12 Minuten.
Wie ein guter Meister spricht.
Sachlich, konkret, kurz. Ohne Fachchinesisch, ohne Übertreibung.
„Viso antwortet – mit Quelle.“
konkret, prüfbar„KI-gestützte Wissensrevolution“
Hype ohne Inhalt„Rund dreißig Minuten pro Thema.“
ehrliche Größenordnung„In Sekunden zum perfekten Handbuch!“
unhaltbares Versprechen„Wir behaupten keine Zahl – wir rechnen offen vor.“
Rechenweg statt Behauptung„Senkt Ihre Kosten um 40 %“
Zahl ohne Rechenweg„Ihr bester Mann“, „die erfahrene Kollegin“
Sprache der Werkstatt und Kanzlei„Wissensassets Ihrer Human Resources“
Beraterdeutsch| Thema | Schreibweise |
|---|---|
| Marke | Viso – nie VISO im Fließtext |
| Fachbegriffe | Risikolandkarte · Klumpenrisiko · Wissensbaustein · Video-Call · Auftragsverarbeitungsvertrag (AVV) |
| Zahlen und Daten | 1.990 € · 19.08.2026 · 22:30 Uhr · 30 Minuten |
| Anrede | Wir siezen. Im Produkt duzt Viso die Interviewten, wie im echten Gespräch. |
| Satzzeichen | Gedankenstrich mit Leerzeichen „ – “, deutsche Anführungszeichen „ “ |
Gebaut wie das Produkt.
- Aufbau
- Statische Seiten aus einem Generator (
src/build.py), Auslieferung über Netlify. Kein Framework. - Drittanbieter
- Keine Anfragen an Dritte. Schriften, Skripte und Filme liegen auf dem eigenen Server.
- Sicherheit
- Content-Security-Policy ohne Inline-Skripte, HSTS, kein Einbetten in fremde Seiten.
- Datenschutz
- Keine Cookies, kein Tracking, keine Analyse-Werkzeuge.
- Barrierefreiheit
- Sprunglink, sichtbarer Fokus, Tastaturbedienung, Textfassung jedes Films, reduzierte Bewegung.
- Filme
- Als Code gebaut: 1920 × 1080 Bühne, skaliert gestochen scharf, 0 MB Video, jederzeit spulbar.
- Feste Links
/pulverbeschichtung/#video,/metallbau/#video,/steuerberatung/,/demo,/login- Zahlung
- Vier Stripe-Zahlungslinks (Starter, Professional; monatlich, jährlich), geprüft am 06.10.2026.
