Zum Hauptinhalt springen

Designsystem

Scoutello sollte warm, kompetent und produktorientiert wirken. Bevorzugt wird ein heller, großzügiger, abgerundeter und redaktioneller Look: Zuerst stehen klare Inhalte im Mittelpunkt, ergänzt durch dezente Markenfarben, weiche Flächen und ruhige Animationen, die das Produkt reaktionsfähig wirken lassen, ohne zu dekorativem Rauschen zu werden.

Die Marketing-Landingpage ist die deutlichste öffentliche Referenz für die aktuelle visuelle Ausrichtung. Produktoberflächen sollten nach Möglichkeit die gemeinsamen Design-Token wiederverwenden und nur dann ausdrucksstärker gestaltet werden, wenn die Oberfläche ausdrücklich marken- oder marketingorientiert ist.

Logo und Marken-Assets​

Das Scoutello-Logo sollte über die öffentliche Docs-Asset-URL eingebunden werden, wenn ein Agent, eine Integration oder eine generierte Seite ein wiederverwendbares Markenelement benötigt:

Die SVG-Version sollte für eine gestochen scharfe Darstellung auf allen Bildschirmgrößen bevorzugt werden. Die PNG-Version kommt zum Einsatz, wenn ein Tool oder Zielsystem SVG nicht unterstützt. Um das Markenzeichen sollte ausreichend Freiraum bleiben. Es darf weder gestreckt noch umgefärbt werden und sollte auf weißen, warm cremefarbenen oder anderen ruhigen Flächen platziert werden, die einen ausreichenden Kontrast gewährleisten.

Markenfarben​

Primärfarbe: #ff8d49

Das primäre Orange wird als Scoutello-Akzentfarbe verwendet: für primäre Handlungsaufforderungen, Fokuszustände, aktive Navigation, kleine Icon-Hintergründe, hervorgehobenen Text, weiche Leuchteffekte und warme Farbverläufe. Im Produktcode entspricht dies --primary: 24 100% 64% sowie Tailwind-Klassen wie bg-primary, text-primary, border-primary/15 und shadow-primary/10.

Sekundärfarbe: #145466

Das sekundäre dunkle Teal dient als ausgleichende Farbe. Es eignet sich besonders für Verläufe mit dem primären Orange, dunkle Call-to-Action-Flächen, visuelle Tiefe und ausgewählte, aufmerksamkeitsstarke Markenmomente. Als Standardfarbe für Aktionen sollte es das primäre Orange nicht ersetzen.

Unterstützende Farben:

  • Warm cremefarbene Hintergründe: #fff8f1, #fff4ea, #fcf6f1 sowie weiche Flächen mit orange-50 / amber-50.
  • Produktneutrale Farben: weiße Karten, dunkler Vordergrundtext, gedämpfter Text mit etwa 70–75 % Deckkraft und helle Rahmen.
  • Tertiärblau: hsl(205 100% 51%) ist als unterstützendes Token verfügbar, sollte jedoch sparsam eingesetzt werden, damit Orange und Teal als Markenpaar erkennbar bleiben.

Visueller Stil​

Bevorzugt wird ein klarer, hochwertiger SaaS-Look mit ausreichend Wärme, damit der Auftritt nicht beliebig wirkt. Die Landingpage kombiniert cremefarbene Mesh-Hintergründe, weiße Karten, große Produkt-Screenshots, abgerundete Ecken und zurückhaltende Farbverläufe.

Verwenden:

  • Abgerundete Karten und Panels, häufig von rounded-2xl bis rounded-[2rem].
  • Weiche Rahmen wie border-primary/10, border-primary/15, ring-black/5 und helle neutrale Rahmen.
  • Geschichtete weiße oder cremefarbene Flächen anstelle schwerer Farbblöcke.
  • Dezente Schatten wie shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 oder individuell definierte Schatten mit geringer Deckkraft.
  • Große Produkt-Screenshots oder UI-Mockups als Beleg, insbesondere für Marketing- und Feature-Storytelling.
  • Kleine Markenmomente wie orangefarbener Hervorhebungstext, Icon-Chips, Ringe, Leuchteffekte und Farbverlauf-CTAs.

Vermeiden:

  • Laute, vollständig orangefarbene Hintergründe.
  • Eine übermäßige Verwendung von Teal für gewöhnliche Steuerelemente.
  • Dichte, beengte Layouts.
  • Harte Schatten, scharfkantige Rechtecke oder kalte monochrome Dashboards.
  • Dekorative Animationen, die das Lesen oder die Aufgabenerledigung beeinträchtigen.

Typografie​

Auf der Marketingwebsite werden verwendet:

  • Space Grotesk für Display-Überschriften über die Klasse landing-display.
  • Manrope für Marketing-Fließtext.

Gemeinsame Oberflächen der App und der Dokumentation verwenden systemnahe UI-Typografie, die derzeit eher an Inter angelehnt ist. Ziel ist ein konsistentes Erscheinungsbild auf allen Oberflächen: selbstbewusste Überschriften, enge Laufweite bei Headlines, gut lesbarer Fließtext und großzügiger Zeilenabstand.

Richtlinien für Überschriften:

  • Auf Marketingseiten große, ausgewogene Überschriften verwenden.
  • Nur die wichtige Aussage mit primärem Orange hervorheben.
  • Die Zeilenlänge mit max-w-* und text-balance begrenzen, sofern verfügbar.

Richtlinien für Fließtext:

  • Absätze ruhig und direkt formulieren.
  • Für Beschreibungen gedämpften Vordergrundtext verwenden, in der Regel text-foreground/70 oder text-foreground/75.
  • Übersichtlich strukturierte Abschnitte, kurze Absätze und klare Beschriftungen bevorzugen.

Layout und Abstände​

Layouts sollten großzügig und stabil wirken. Die Landingpage verwendet einen max-w-7xl-Container mit responsivem horizontalem Innenabstand und großen vertikalen Abschnitten.

Übliche Muster:

  • Abschnittsabstände um py-16, py-20 oder größer für wichtige Marketingabschnitte.
  • Karten in responsiven Grids mit gleichmäßigen Abständen.
  • Hero-Bereiche mit einer starken Inhalts-Spalte links sowie Produkt-Screenshots oder Gerätekompositionen rechts.
  • Zentrierte Abschnittsüberschriften für übergreifende Produktversprechen; linksbündige Überschriften für Story- oder Workflow-Abschnitte.
  • Mobile-First-Layouts, die zunächst übersichtlich gestapelt werden und auf größeren Bildschirmen zu mehreren Spalten wechseln.

Freiraum ist ein Bestandteil des Designs. Wenn ein Abschnitt unklar wirkt, sollten zuerst die Inhalte vereinfacht und die Abstände vergrößert werden, bevor weitere dekorative Elemente hinzukommen.

Komponenten und Flächen​

Scoutello-Oberflächen sollten greifbar, aber leicht wirken:

  • Schaltflächen: Abgerundete Pillen für prominente Marketing-CTAs; standardmäßige Produkt-Schaltflächen an anderer Stelle.
  • Karten: weiß oder cremefarben, abgerundet, mit Rahmen und leicht angehoben.
  • Icons: kleine, einfache Linien-Icons in orangefarbenen Chips.
  • Statistiken und Vertrauenselemente: zurückhaltende Karten mit orangefarbenen Rahmen oder Farbverläufen.
  • Formulare: klare Beschriftungen, direkte Hilfetexte und ausreichend Abstand für die mobile Nutzung.
  • Screenshots: groß, scharf und leicht angehoben. Sie sollten als konkrete Belege für das Produkt dienen.

Beim Erstellen der Produktoberfläche zunächst vorhandene gemeinsam genutzte UI-Komponenten und Tokens statt individueller Einzellösungen verwenden. Beim Erstellen von Marketingoberflächen die Landing-Primitives und Landing-Klassen verwenden, sofern sie passen.

Bewegung​

Bewegung soll die Oberfläche ausgereift wirken lassen, nicht unruhig. Die Landingpage verwendet kurze Einblendanimationen, Aufwärtsbewegungen von Geräten, aufblühende Leuchteffekte und kleine Anhebungen beim Darüberfahren.

Bevorzugte Bewegungen:

  • Einblenden von unten aus 12–24 px mit sanfter Deckkraft.
  • Karten beim Darüberfahren nur um wenige Pixel anheben.
  • Hover-Zustände für CTAs, die diese leicht anheben und den Schatten verstärken.
  • Zeitlich versetzte Einblendungen von Abschnitten, wenn sie das Erfassen der Inhalte unterstützen.

Einstellungen für reduzierte Bewegung müssen immer berücksichtigt werden. Animationen vermeiden, die Inhalte verbergen, Interaktionen blockieren oder für das Verständnis der Seite erforderlich wirken.

Sprach- und Inhaltsgestaltung​

Das visuelle System funktioniert am besten mit direktem, konkretem Text. Formulierungen bevorzugen, die erklären, was eine Organisation in Scoutello veröffentlichen, verwalten oder automatisieren kann.

Folgende Formulierungen verwenden:

  • Produktspezifische Begriffe: Landingpages, Kacheln, Touren, Veranstaltungen, Organisationen, Dashboard, Gäste, QR-Codes, Übersetzungen.
  • Ergebnisorientierte Beschreibungen, die Gästeerlebnisse mit den Arbeitsabläufen von Betreibenden verbinden.
  • Geschlechtsneutrale Sprache in deutschen und anderen lokalisierten Texten.

Folgende Formulierungen vermeiden:

  • Vage Plattformsprache ohne Beispiele.
  • Übermäßig formellen Unternehmensjargon.
  • Lange Absätze, wenn sich der Inhalt besser in einem übersichtlichen Abschnitt darstellen lässt.

Praktische Regeln​

  • #ff8d49 als primären Markenakzent und #145466 als sekundäre Grundfarbe verwenden.
  • Tokenisierte Klassen (primary, secondary, foreground, muted, border) gegenüber fest codierten Farben in Produktoberflächen bevorzugen.
  • Marketingseiten warm, großzügig gestaltet, abgerundet, von Screenshots geprägt und dezent animiert halten.
  • Dashboard- und operative Oberflächen ruhiger und nur dort dichter halten, wo es erforderlich ist, sowie stärker auf Aufgaben ausrichten.
  • Von Kundenteams verwaltete Gästeerlebnisse die Markenidentität der jeweiligen Organisation unterstützen lassen, sofern das Produkt entsprechende Branding-Steuerungen bietet. Von Scoutello verwaltete Oberflächen müssen jedoch an diesem System ausgerichtet bleiben.

Verwandte Konzepte: Routen und Oberflächen, Landingpages und Kacheln, Browserbasierte Gästeerlebnisse.