Zum Hauptinhalt springen

Designsystem

Scoutello soll warm, kompetent und produktorientiert wirken. Der bevorzugte Look ist hell, großzügig, abgerundet und redaktionell: klare Inhalte zuerst, dann dezente Markenfarbe, weiche Oberflächen und ruhige Animationen, die das Produkt reaktionsschnell erscheinen lassen, ohne zu dekorativem Rauschen zu werden.

Die Marketing-Web-App ist die klarste öffentliche Referenz für die aktuelle visuelle Ausrichtung. Produktoberflächen sollten nach Möglichkeit die gemeinsamen Design-Tokens wiederverwenden und nur dann ausdrucksstärker werden, wenn die Oberfläche explizit marken- oder marketingorientiert ist.

Logo und Marken-Assets​

Verwenden Sie das Scoutello-Logo von der öffentlichen Dokumentations-Asset-URL, wenn ein Agent, eine Integration oder eine generierte Seite ein wiederverwendbares Markenlogo benötigt:

Bevorzugen Sie die SVG-Version für eine gestochen scharfe Darstellung über alle Bildschirmgrößen hinweg. Verwenden Sie die PNG-Version, wenn ein Tool oder Ziel-System kein SVG verarbeiten kann. Halten Sie genügend freien Platz um das Zeichen herum ein, vermeiden Sie es zu dehnen oder neu einzufärben, und platzieren Sie es auf weißen, warmen cremefarbenen oder anderen ruhigen Oberflächen, die den Kontrast erhalten.

Markenfarben​

Primärfarbe: #ff8d49

Verwenden Sie das primäre Orange als Scoutello-Akzentfarbe: primäre Handlungsaufforderungen, fokussierte Zustände, aktive Navigation, kleine Icon-Hintergründe, hervorgehobener Text, sanfte Glanzlichter und warme Farbverläufe. Im Produktcode entspricht dies --primary: 24 100% 64% und Tailwind-Klassen wie bg-primary, text-primary, border-primary/15 und shadow-primary/10.

Sekundärfarbe: #145466

Verwenden Sie das sekundäre tiefes Petrol als erdende Farbe. Es funktioniert am besten in Farbverläufen mit dem primären Orange, dunklen Handlungsaufforderungs-Panels, visueller Tiefe und gelegentlichen, stark hervorgehobenen Markenmomenten. Es sollte nicht die primäre Orangefarbe als Standard-Aktionsfarbe ersetzen.

Unterstützende Farben:

  • Warm-weiße Hintergründe: #fff8f1, #fff4ea, #fcf6f1 und sanfte orange-50 / amber-50 Oberflächen.
  • Produkt-Neutrale: weiße Karten, dunkler Vordergrundtext, gedämpfter Text mit etwa 70-75% Deckkraft und helle Ränder.
  • Tertiäres Blau: hsl(205 100% 51%) ist als unterstützender Token verfügbar, sollte aber sparsam verwendet werden, damit Orange und Petrol als Markenpaar erkennbar bleiben.

Visueller Stil​

Bevorzugen Sie einen sauberen, hochwertigen SaaS-Look mit genügend Wärme, um nicht generisch zu wirken. Die Web-App kombiniert cremefarbene Netz-Hintergründe, weiße Karten, große Produkt-Screenshots, abgerundete Ecken und zurückhaltende Farbverläufe.

Verwenden Sie:

  • Abgerundete Karten und Panels, oft von rounded-2xl bis rounded-[2rem].
  • Sanfte Ränder wie border-primary/10, border-primary/15, ring-black/5 und helle neutrale Ränder.
  • Geschichtete weiße oder cremefarbene Oberflächen anstelle von schweren farbigen Blöcken.
  • Dezente Schatten wie shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 oder benutzerdefinierte Schatten mit geringer Deckkraft.
  • Große Produkt-Screenshots oder UI-Mockups als Beweis, insbesondere für Marketing- und Storytelling-Zwecke.
  • Kleine Markenmomente wie orange hervorgehobener Text, Icon-Chips, Ringe, Glanzlichter und Farbverlauf-CTAs.

Vermeiden Sie:

  • Lautstarke, ganzseitige orangefarbene Hintergründe.
  • Übermäßige Verwendung von Petrol für gewöhnliche Bedienelemente.
  • Dichte, überladene Layouts.
  • Harte Schatten, scharfe Rechtecke oder kalte monochrome Dashboards.
  • Dekorative Animationen, die mit dem Lesen oder der Aufgabenerledigung konkurrieren.

Typografie​

Die Marketing-Website verwendet:

  • Space Grotesk für Überschriften im landing-display-Klassenstil.
  • Manrope für den Text auf Marketingseiten.

Gemeinsame App- und Dokumentations-Oberflächen verwenden systemorientierte UI-Typografie, die derzeit näher an Inter liegt. Das Stilziel ist über alle Oberflächen hinweg konsistent: selbstbewusste Überschriften, enge Zeichenabstände bei Überschriften, gut lesbarer Fließtext und großzügige Zeilenabstände.

Hinweise zur Überschrift:

  • Verwenden Sie große, ausgewogene Überschriften auf Marketingseiten.
  • Heben Sie nur den wichtigen Teil mit primärem Orange hervor.
  • Halten Sie die Zeilenlänge mit max-w-* und text-balance (wo verfügbar) kontrolliert.

Hinweise zum Fließtext:

  • Halten Sie Absätze ruhig und direkt.
  • Verwenden Sie gedämpften Vordergrundtext für Beschreibungen, normalerweise text-foreground/70 oder text-foreground/75.
  • Bevorzugen Sie übersichtliche Abschnitte, kurze Absätze und klare Beschriftungen.

Layout und Abstände​

Layouts sollten geräumig und stabil wirken. Die Web-App verwendet einen Container mit max-w-7xl, responsiven horizontalen Abständen und großen vertikalen Abschnitten.

Gängige Muster:

  • Abschnittsabstände um py-16, py-20 oder größer für wichtige Marketingabschnitte.
  • Karten, angeordnet in responsiven Grids mit konsistenten Abständen.
  • Hero-Bereiche mit einer starken linken Inhaltsspalte und Produkt-Screenshots oder Gerätekompositionen auf der rechten Seite.
  • Zentrierte Abschnittsüberschriften für allgemeine Produktversprechen; linksbündige Überschriften für Story- oder Workflow-Abschnitte.
  • Mobile-First-Layouts, die sauber gestapelt werden, bevor sie auf größeren Bildschirmen zu Mehrspaltenlayouts werden.

Nutzen Sie Weißraum als Teil des Designs. Wenn ein Abschnitt unklar erscheint, vereinfachen Sie den Inhalt und vergrößern Sie den Abstand, bevor Sie weitere Dekorationen hinzufügen.

Komponenten und Oberflächen​

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

  • Schaltflächen: abgerundete Pillen für prominente Marketing-CTAs; Standard-Produkt-Schaltflächen an anderen Stellen.
  • Karten: weiß oder cremefarben, abgerundet, mit Rand und leicht erhöht.
  • Icons: kleine, einfache Strich-Icons in orange-getönten Chips.
  • Statistiken und Vertrauenselemente: zurückhaltende Karten mit orange-getönten Rändern oder Farbverläufen.
  • Formulare: klare Beschriftungen, direkte Hilfetexte und genügend Abstand für die mobile Nutzung.
  • Screenshots: groß, scharf und leicht erhöht. Verwenden Sie sie als konkreten Beweis für das Produkt.

Beim Erstellen von Produkt-UIs beginnen Sie mit vorhandenen, gemeinsam genutzten UI-Komponenten und Tokens, anstatt benutzerdefinierte Einzelanfertigungen zu stylen. Beim Erstellen von Marketing-UIs verwenden Sie die Web-App-Primitive und Web-App-Klassen, wo sie passen.

Animation​

Animationen sollten die Benutzeroberfläche poliert, nicht überladen wirken lassen. Die Web-App verwendet kurze Einblendanimationen, Geräte-Aufhebungseffekte, Glanzlicht-Bloom-Effekte und kleine Hover-Hebungen.

Bevorzugte Animationen:

  • Einblendung von unten um 12-24px mit sanfter Deckkraft.
  • Hover-Karten, die nur wenige Pixel angehoben werden.
  • CTA-Hover-Zustände, die den Schatten leicht anheben und vertiefen.
  • Gestaffelte Abschnittseingänge, wo sie das scannende Lesen unterstützen.

Berücksichtigen Sie immer die Präferenzen für reduzierte Animationen. Vermeiden Sie Animationen, die Inhalte verbergen, die Interaktion blockieren oder für das Verständnis der Seite notwendig erscheinen.

Stimme und Content Design​

Das visuelle System funktioniert am besten mit direkten, konkreten Texten. Bevorzugen Sie Sprache, die erklärt, was eine Organisation in Scoutello veröffentlichen, verwalten oder automatisieren kann.

Verwenden Sie:

  • Produktspezifische Nomen: Web-Apps, Kacheln, Touren, Events, Organisationen, Dashboard, Gäste, QR-Codes, Übersetzungen.
  • Ergebnisorientierte Beschreibungen, die Gästeerlebnisse mit Betreiber-Workflows verbinden.
  • Geschlechtsneutrale Sprache im Deutschen und anderen lokalisierten Texten.

Vermeiden Sie:

  • Vage Plattformsprache ohne Beispiele.
  • Übermäßig formale Unternehmenssprache.
  • Lange Absätze, wo ein übersichtlicher Abschnitt besser geeignet wäre.

Praktische Regeln​

  • Verwenden Sie #ff8d49 als Hauptmarken-Akzent und #145466 als sekundäre Erdungsfarbe.
  • Bevorzugen Sie tokenisierte Klassen (primary, secondary, foreground, muted, border) gegenüber fest kodierten Farben in Produkt-Oberflächen.
  • Halten Sie Marketingseiten warm, geräumig, abgerundet, screenshot-geführt und leicht animiert.
  • Halten Sie Dashboard- und operative Oberflächen ruhiger, nur bei Bedarf dichter und aufgabenorientierter.
  • Lassen Sie kundenbezogene Gästeerlebnisse die Markenbildung der Organisation unterstützen, wo das Produkt bereits Branding-Kontrollen bereitstellt, aber halten Sie Scoutello-eigene Oberflächen mit diesem System abgestimmt.

Verwandte Konzepte: Routen und Oberflächen, Web-Apps und Kacheln, Browser-basierte Gästeerlebnisse.