# Corporate-Design-Leitfaden Version 1.0 · Grundlage: bestehende Agenturwebsite. Die Farben, Schriften, Markenformen und benannten Tokens sind aus der Website übernommen. Die folgenden praktischen Anwendungsregeln konkretisieren sie als Vorschlag für die gemeinsame Nutzung. ## Marke Die Originalmarke unverzerrt und proportional skalieren. Die violette Version auf Weiß oder hellen Flächen, die helle Version auf Ink oder dunklem Violett einsetzen. Keine zusätzlichen Verläufe, Schlagschatten, Konturen oder Drehungen hinzufügen. Empfohlener Schutzraum: mindestens ein Viertel der sichtbaren Markenhöhe rund um das Logo. Für digitale Anwendungen die Bildmarke ab etwa 32 CSS-Pixel Höhe verwenden und die Lesbarkeit im Zielmedium prüfen. Für kleine Browser-Icons das vorhandene Favicon verwenden; die detaillierte Bildmarke nicht auf beliebig kleine Größen reduzieren. Die Website setzt die Wortmarke als Schrift: „Secret Unicorn“ mit Bricolage Grotesque, Gewicht 720, leicht verringerter Laufweite; „Agency“ in Plus Jakarta Sans, versal, Gewicht 750 und 0,18 em Laufweite. Keine neue offizielle kombinierte Logozeichnung wird behauptet. ## Farben | Verwendung | Token | Wert | | --- | --- | --- | | Markenakzent | su-purple | #60269e | | Primäre Aktion | su-purple-dark | #481b78 | | Aktion bei Hover | su-purple-hover | #38125e | | Fließtext / dunkle Bühne | su-ink | #27232a | | Sekundärer Text | su-muted | #554d58 | | Weiß | su-paper | #ffffff | | Helle Fläche | su-soft | #f5f5f5 | | Violette Fläche | su-purple-soft | #f0ebf5 | | Trennlinie | su-line | #d9d5db | | Formulargrenze | su-line-strong | #8e7c98 | | Positiver Status | su-positive | #0b4b2b | | Negativer Status | su-negative | #9c1733 | Weiße und helle Flächen dominieren. Violett kennzeichnet Akzente und Aktionen, dunkle Flächen strukturieren ausgewählte Abschnitte. Keine festen Flächenprozente sind durch die Website vorgegeben. Die helle Trennlinie ist keine geeignete Textfarbe und kein Ersatz für eine ausreichend kontrastreiche Formulargrenze. Status stets mit lesbarer Beschriftung kombinieren. ## Typografie Überschriften: Bricolage Grotesque, typischerweise Gewicht 690, Zeilenhöhe 1,05–1,1 und Laufweite −0,04 em. Große Website-Titel nutzen 44–88 px dynamisch; in der CRM-Oberfläche kleinere Größen gemäß Informationsdichte verwenden. Fließtext: Plus Jakarta Sans, 16 px als Ausgangspunkt, Zeilenhöhe 1,7. Kleine Labels in der Regel 14 px. Geldbeträge, Termine und Kennzahlen gut vergleichbar ausrichten; keine dekorativen Schriftwechsel in Datentabellen. Beide beiliegenden Schriften sind variable Normalschnitte mit Gewichten 200–800. Der separate Kursivschnitt der Website ist nicht enthalten. Für Office-Anwendungen sind passende Desktop-Fontdateien aus der jeweiligen Originalquelle zu beschaffen; WOFF2 ist ein Webformat. Die beigefügten Lizenztexte beachten. ## Layout und Bedienung Die Website nutzt ein 8-px-Abstandsraster, großzügige Weißräume, eine reguläre Containerbreite von 75 rem und dynamische Außenabstände. Ecken: 12, 20 und 28 px; Buttons kapselartig. Schatten sparsam einsetzen. Formularfelder haben sichtbare Labels und eine Mindesthöhe von 48 px im mitgelieferten Beispiel. Interaktive Hauptaktionen sind mindestens 44 px hoch. Fokusmarkierungen sind 3 px breit, auf hellen Flächen dunkelviolett und auf dunklen Flächen weiß. Diese Vorgaben allein sind keine vollständige WCAG-Konformitätsaussage. Bei schmalen Ansichten Raster auf eine Spalte reduzieren. Inhalte müssen bei Zoom bedienbar bleiben. Tabellen dürfen bei Bedarf innerhalb ihres Containers horizontal scrollen; wichtige Aktionen dürfen nicht außerhalb der Ansicht verschwinden. ## Bildsprache und Text Als ergänzende Empfehlung: reale Creator, Produkte, Arbeits- und Eventsituationen zeigen. Fotos nicht durch pauschale Violettfilter verfremden. Personen und Produkte nicht als reale Kooperationen darstellen, wenn diese nicht bestehen. Die Website kommuniziert direkt und zugänglich. Fachliche Angaben, Konditionen und Leistungsversprechen bleiben konkret und belegbar. Für CRM, Betrieb und Vorlagen wird eine neutrale, kurze Formulierung empfohlen. Vertrags- und Datenschutztexte sind keine Werbetexte. ## Vorlagen und Produktion Die Social-Karte ist eine bearbeitbare SVG-Vorlage im Format 1080 × 1350 mit deutlich erkennbaren Platzhaltertexten. Schriften müssen in der Exportumgebung verfügbar sein; vor Weitergabe finaler Druck-/Bilddaten Texte bei Bedarf in Pfade umwandeln und visuell prüfen. Die E-Mail-Signatur arbeitet mit Systemschriften und Text, damit sie ohne externe Bilder funktioniert. Personendaten sind vor Verwendung zu ergänzen. Die Vorlage versendet nichts. Für Drucksachen sind Beschnitt, Farbprofil, Material, Sonderfarben und Mindestgrößen mit der Druckerei abzustimmen. Aus den digitalen HEX-Werten werden keine verbindlichen CMYK- oder Pantone-Werte abgeleitet. ## Pflege Tokens zuerst zentral ändern, Änderungen dokumentieren und anschließend Website/CRM gezielt aktualisieren. Eine Tokenänderung veröffentlicht keine Anwendung automatisch. Breaking Changes bei Token-Namen in einer neuen Hauptversion kennzeichnen. Vor Freigabe Browserdarstellung, Kontrast, Tastatur, Zoom und Screenreader prüfen.