Markenhandbuch
Unser Design-System, öffentlich.
Alles, was diese Seite zusammenhält: Positionierung, Sprache, Farben, Typografie und die Bausteine im Code. Wer wissen will, wie wir arbeiten, findet es hier statt in einem Angebotstext.
01 – Positionierung
Wofür wir stehen
Digital. Zu Ende gedacht.
Society Outsiders ist eine inhabergeführte Digitalagentur aus Ottensoos im Nürnberger Land. Wir arbeiten für Betriebe, die keine eigene Abteilung für Marketing, Web und Technik haben. Strategie, Marke, Website, Shop, Sichtbarkeit, Werbung und die Systeme dahinter kommen bei uns aus einer Hand, geplant und gebaut von Noah Richter und Julius Gubitz.
Weitere Claim-Varianten
- Digital. Zu Ende gedacht.
- Die Digitalabteilung, die Sie nicht einstellen müssen.
- Wir bauen den Teil Ihres Geschäfts, der online passiert.
- Strategie, Handwerk, Ergebnis.
Der erste ist gesetzt, die übrigen sind Reserve für Kampagnen und Anzeigen.
02 – Sprache
Wie wir klingen
Direkt
Hauptsache zuerst. Kurze Sätze. Keine Anlaufstrecke, bevor die Aussage kommt.
Konkret
Zahlen, Namen, Beispiele statt Adjektive. „Ladezeit von 4,2 s auf 0,9 s“ schlägt „blitzschnell“.
Auf Augenhöhe
Wir siezen, aber wir dozieren nicht. Fachbegriffe nur, wenn wir sie erklären.
Selbstbewusst, nicht laut
Wir behaupten wenig und zeigen viel. Superlative brauchen einen Beleg.
So schreiben wir
- „Wir bauen Ihnen eine Seite, die auf dem Handy schnell steht – und messen das.“
- „In vier Wochen live. Danach betreuen wir sie weiter.“
- „Das brauchen Sie nicht – sparen Sie sich das Geld.“
- Aktiv formulieren: „Wir entwickeln“ statt „es wird entwickelt“.
So nicht
- „Innovative Lösungen für Ihren digitalen Erfolg“ – sagt nichts.
- „State of the Art“, „ganzheitlich“, „maßgeschneidert“, „aus einer Hand“ als Floskel ohne Beleg.
- Ausrufezeichen-Marketing und Dringlichkeits-Theater.
- Anglizismen, wo es ein deutsches Wort gibt: „Anfrage“ statt „Lead“ in Kundentexten.
03 – Farbe
Fünf Farben, klare Rollen
Harte Schnitte statt weicher Übergänge. Die Seite wechselt zwischen tiefschwarzen und weißen Abschnitten – jeder Wechsel markiert einen neuen Gedanken. Farbe bringen die Arbeiten unserer Kunden mit, nicht wir: Ein einziger Akzent steht für Handlung. Typografie trägt, Bilder belegen.
Ink
#0B0B0C
Grundfarbe, Bühne, Schrift auf Hell
--color-ink
Weiß
#FFFFFF
Helle Bühne, Schrift auf Dunkel
--color-paper
Zinnober
#FF4D21
Einziger Akzent: Handlung, Zahl, Hover – als Fläche einmal pro Seite
--color-signal
Regeln
- Schwarz und Weiß wechseln sich ab, graue Flächen gibt es nicht.
- Zinnober als Fläche höchstens einmal pro Seite – dort, wo gehandelt wird (Abschluss, Preis).
- Auf Weiß erscheint Zinnober nur als Markierung, Punkt oder Fläche – kleine Schrift bleibt Schwarz (Kontrast).
- Fließtext ist immer Ink auf Hell oder Weiß auf Dunkel, nie in der Akzentfarbe.
- Projektkarten stehen auf der Markenfarbe des Kunden – so bleibt die Farbe beim Kunden.
04 – Typografie
Eine Schrift für alles
Instrument Sans
Eine Schrift für alles
Aa Bb Cc 0123
Logo, Überschriften, Texte, Navigation und Buttons. Regular und Medium, Überschriften eng gesetzt, immer Satzschreibung.
05 – Logo
Eine Wortmarke, klare Regeln
Anwendung
- Wortmarke aus Instrument Sans: „Society Outsiders“ in Medium, „Agency“ in Regular mit 62 % Deckkraft.
- Auf Hell schwarz, auf Dunkel weiß. Auf Zinnober steht „Agency“ in voller Deckkraft.
- Schutzraum: mindestens die Höhe der Zeile „Agency“ rundum.
- Mindestbreite digital 110 px.
Nicht erlaubt
- Nicht verzerren, drehen oder mit Schlagschatten versehen.
- Nicht auf unruhigen Fotos platzieren.
- Zeilen nicht umstellen und keine zweite Schrift dazunehmen.
Die Wortmarke liegt als Vektordatei (SVG) vor.
06 – Bausteine
Komponenten, so wie sie im Code liegen
Jede Fläche dieser Website nutzt dieselben Bausteine. Bühnen überschreiben nur die Farbvariablen – deshalb funktionieren sie auf Schwarz, Papier, Stein und Signal gleichermaßen.
.sec-ink
Überschrift
Fließtext auf dieser Bühne.
.sec-paper
Überschrift
Fließtext auf dieser Bühne.
.sec-stone
Überschrift
Fließtext auf dieser Bühne.
.sec-signal
Überschrift
Fließtext auf dieser Bühne.
07 – Bewegung
Zurückhaltend, nie dekorativ
- Überschriften steigen Wort für Wort aus einer Maske, rund eine Sekunde, weiches Ausklingen.
- Szenen hängen am Scrollen: Nichts läuft von allein, wer anhält, hält auch die Bewegung an.
- Seitenwechsel per Vorhang, zusammen gut eine Sekunde, nur bei Klicks auf interne Links.
- Hover bewegt Elemente um wenige Pixel, mehr nicht.
- Kein Glühen, keine Partikel, keine 3D-Kulissen ohne inhaltlichen Grund.
- Bei „Bewegung reduzieren“ im System läuft die Seite vollständig statisch.
08 – Bildwelt
Erst belegen, dann gestalten
- Echte Projektaufnahmen und Screenshots stehen über allem.
- Grafik statt Stockfotos: Raster, Zahlenkacheln, typografische Flächen.
- Abstrakte Renderings nur als Atmosphäre – keine erfundenen Menschen, keine KI-Gesichter.
- Bilder werden hart beschnitten, randlos gesetzt und nie mit Verläufen weichgezeichnet.
Für Ihr Unternehmen
So ein System bauen wir auch für Sie.
Positionierung, Farben, Typografie, Vorlagen und ein Handbuch, mit dem Ihr Team und jeder Dienstleister sofort arbeiten kann.