Brand Book Silas Pittner: Ein System. Jede Seite.

Mein Corporate Design Manual zum Anklicken: Logo, Farbe, Schrift, Form, Bild und Stimme. Alles, was meinen Namen trägt, folgt diesen Regeln.

Ausgabe: 01 · 10 / 2026
Umfang: 38 Seiten · 9 Kapitel
Logos: RGB und CMYK
Gilt für: Web, Social, Print

Brand Book herunterladen Zum Logo-Studio

Inhalt

28 Themen · 9 Kapitel · Scroll dich durch und klick dich rein.

01Brand BookIntro

Corporate Design ManualAusgabe 01 · 10 / 2026

Brand
Book.

Silas Pittner · Art Direction, Wiesbaden

01 / 28

Brand Book.

Jedes Thema lässt sich ausprobieren. Der Link zur Buchseite zeigt das Original, im Logo-Studio unten liegen alle Dateien.

Brand Book herunterladen
02Haltung01 · Marke

Design ist kein Zusatz. Es ist die Entscheidung, wie ernst man dich nimmt.

Frage wählen

Branding, Webdesign und Bewegtbild aus Wiesbaden. Von der ersten Skizze bis zu Guidelines, die wirklich genutzt werden.

02 / 28

Art Direction, klare Haltung.

Was, für wen, wie und warum: die Haltung hinter der Marke in vier kurzen Antworten.
03Werte & Prozess01 · Marke
Wert wählen

Ein durchdachter Auftritt sagt Kunden, bevor du ein Wort sagst, dass hier jemand arbeitet, der Details ernst nimmt.
Prozess

Kennenlernen01

Konzept02

Design03

Feinschliff04

Übergabe05
03 / 28

Wofür der Name steht.

Drei Werte und ein Ablauf, der bei jedem Projekt gleich bleibt: von Kennenlernen bis Übergabe.
04Logo-System02 · Logo

Zeichen wählen

Rolle
Monogramm und Wortmarke, fest verbunden. Das Hauptzeichen, wenn sich die Marke vorstellt.
Einsatz
Cover · Titel · Abspann · Hochformat
Mindestbreite
20 mm · 80 px

04 / 28

Vier Zeichen. Ein System.

Jedes Zeichen hat seinen Platz. Gewählt wird nach Format und Größe, nie nach Geschmack. Immer die Originaldateien verwenden, nichts nachbauen.

Zum Logo-Studio
05Konstruktion02 · Logo

Ebenen ein/aus

Modul M
Durchmesser des Punkts

Raster
5 × 6 M

Rechter Bauchstrich
1 M, der Punkt steht darunter

Stamm P
ca. 1 M

Abstand S / P
Punzenbreite des P

Wortmarke
1 M hoch, ¼ M Abstand, volle Breite

05 / 28

Fünf mal sechs Module.

Das Maß ist der Punkt. Sein Durchmesser ist das Modul M, und auf diesem Raster steht das ganze Zeichen.
06Schutzraum & Mindestgröße02 · Logo

Zeichen

Medium
Breite160 px

Für Favicons und App-Icons gibt es nur das Monogramm.

06 / 28

Ein Modul Luft.

Um jedes Zeichen bleibt mindestens ein Modul frei, also der Durchmesser des Punkts. Unter der Mindestgröße verliert der Punkt seine Form.
07Farbstellungen02 · Logo

Farbstellung wählen

01 Braun auf Papier · Standard

07 / 28

Sechs Farben, jede mit Grund.

Das Logo erscheint nur in diesen sechs Farben und nur auf den Gründen, für die sie gemacht sind. Standard ist Braun auf Papier.

Zum Logo-Studio
08Hintergründe02 · Logo

Platzierung

Freie Fläche im Papierton, genug Abstand zu Motiv und Rand. So bleibt das Zeichen lesbar.

08 / 28

Das Zeichen braucht Ruhe.

Das Logo steht auf ruhigen Flächen der Palette oder auf ruhigen Bildbereichen. Wird es unruhig, rückt das Logo an den Rand oder wechselt die Farbstellung.
09Digital & Print02 · Logo
Medium
Braun #37352BRGB 55 · 53 · 43
Orange #F97C30RGB 249 · 124 · 48
Cream #EDEAD4RGB 237 · 234 · 212
Schwarz #161B1FRGB 22 · 27 · 31
Weiß #F3F3F4RGB 243 · 243 · 244
Grau #606060RGB 96 · 96 · 96

Formate · RGB

SVG
Vektor für Website und Apps, skaliert ohne Verlust.

PNG
Transparent, für Präsentationen, Office, Social und Mail.

Farbraum sRGB. Nur für Bildschirme, nie für den Druck.
09 / 28

Ein Logo, zwei Medien.

Für Screens gibt es das Logo in RGB, für den Druck in CMYK. Das Logo-Studio liefert zu jedem Zeichen und jeder Farbe die passende Datei.

Zum Logo-Studio
10Falsch02 · Logo
Ansicht
- Nicht verzerren.Immer proportional skalieren.
- Nicht drehen.Das Zeichen steht immer gerade.
- Nicht umfärben.Nur die sechs Farbstellungen.
- Keine Effekte.Kein Schatten, kein Glow, kein 3D.
- Keine Kontur.Das Logo ist immer vollflächig.
- Kein Verlauf.Eine Farbe, flach.
- Nicht neu anordnen.Keine eigenen Kombinationen.
- Silas Pittner
  
  Nicht nachsetzen.Den Namen nie in anderer Schrift.
10 / 28

Acht Mal nein.

Jede dieser Änderungen schwächt die Wiedererkennung. Im Zweifel gilt: Originaldatei, eine Farbe, genug Luft.
11Primärpalette03 · Farbe

603010

Wert anzeigen

11 / 28

Papier, Tinte, Signal.

Drei Farben tragen die Marke. Papier ist der Grund, Tinte die Stimme, Orange das Signal: sparsam eingesetzt, aber nicht zu übersehen.
12Erweiterte Palette03 · Farbe

Farbe wählen

Neutral

Schwarz
Logo-Schwarz. Für Schwarzweiß-Anwendungen und als Grund für das weiße Logo.

HEX
#161B1F
RGB
22 · 27 · 31
CMYK
83 · 68 · 54 · 87

12 / 28

Werkzeuge, keine Deko.

Diese Farben haben je eine feste Aufgabe. Sie ergänzen die Primärpalette, ersetzen sie aber nie und tauchen nie als großflächige Gestaltungsfarbe auf.
13Verhältnis & Kontrast03 · Farbe

Aa

Art Direction, klare Haltung.

Kleiner Text, 14 px: Branding, Webdesign und Bewegtbild.

Schrift

Grund

Tinte auf Papier
10,2 : 1
AAA

13 / 28

Orange ist Signal, nicht Fläche.

Rund 90 Prozent jeder Gestaltung sind Papier und Tinte. Orange bekommt höchstens eine gefüllte Fläche pro Ansicht. Fließtext und Labels erfüllen mindestens WCAG AA.
14Schriftsystem04 · Typografie
Eigener Text
- Space GroteskHeadlines
  
  Keine Vorlage. Ein System.
- JetBrains MonoFließtext & UI
  
  Keine Vorlage. Ein System.
- Fraunces ItalicNamen
  
  Keine Vorlage. Ein System.
- Martian MonoZahlen
  
  9+ · 2021 · 02 / 06 · 60 %
Compacta steht nur im Logo. Martian Mono setzt nur Zahlen.
14 / 28

Vier Schriften, vier Rollen.

Jede Familie hat genau eine Aufgabe und wird nur dafür eingesetzt. Alle vier stehen bei Google Fonts unter der SIL Open Font License.
15Hierarchie04 · Typografie

Stil wählen

Space Grotesk Bold86 px · 1,04 · −1 %
Klare Haltung.

15 / 28

Groß, klar, wenige Stufen.

Zehn Stile decken alles ab. Die Werte sind Web-Obergrenzen der fluiden Skala. Zeilenlänge: Hero 18 ch, Statement 21 ch, Lede 42 ch.
16Satzregeln04 · Typografie

Regel wählen

Ein Akzentwort.
Jede Headline hebt genau ein Wort in Signal hervor. Farbig, nie kursiv.

So
Lass uns was bauen, das auffällt.
Nicht so
Lass uns was bauen, das auffällt.

16 / 28

Sechs Regeln für jeden Satz.

Typografie ist hier Haltung. Diese Regeln gelten auf der Website genauso wie in Angeboten, Case Studies und Posts.
17Formsprache05 · Form & Layout

Leistungen Konzeption & Branding

Radius 32 · 2 px Linie

Radius

Karten

Tiefe

Jeder Rahmen hat 2 px in Linie. Über der Website liegt ein feines Korn.

17 / 28

Rahmen statt Schatten.

Weich, aber bestimmt: große Radien, eine einheitliche Linie, kein Schatten. Dazu der Punkt aus dem Logo als wiederkehrendes Motiv.
18Raster & Abstände05 · Form & Layout
System
Stapel24
Grid-Abstand28
Kartenpolster36
Seitenrand20–56
Kopf zu Inhalt40–72
Navigation84
Sektion80–144

Container 1400 · Navigation 84 px, gescrollt 68 px · Projekt-Grid 3 Spalten, Abstand 28 px. Alle Werte in px, Bereiche wachsen fluide mit.
1920 × 1200 · 12 Spalten · Rand 96 px · Steg 32 px. Kopfzeile mit Monogramm, Kapitel und Seitenzähler.
18 / 28

Viel Raum, feste Maße.

Abstände kommen aus einer kleinen Skala. Auf der Website wachsen sie fluide mit, in Präsentationen und Case Studies gilt ein festes Raster.
19Elemente05 · Form & Layout

Primär-Button

Sekundär-Button · Header
Arbeiten ansehen

Link · Eyebrow
Case Study ansehen Prozess

Work-Card
Limbeck GroupWebdesign
Bild, Name, Kategorie

Filter · Tags
Logo & CIGuidelinesImagefilm

Formularfeld · Fokus
Budget-RahmenName

Icon-Kreis · Kennzahl
7+Jahre Webdesign

Marquee-Chip
BrandingWebdesign

19 / 28

Bausteine mit Haltung.

Die wiederkehrenden Teile der Website, hier live. Wer etwas Neues baut, setzt es aus diesen Bausteinen zusammen, statt neue zu erfinden.
20Fotografie06 · Bildsprache

Arbeit

20 / 28

Studio auf Papier.

Eine cremefarbene Hohlkehle, die nahtlos in den Papierton übergeht. Darin Silas mit echtem Werkzeug, weiches Licht, warme Töne und viel Luft um die Szene.
21Bildregeln & Kundenarbeit06 · Bildsprache
Regeln

Hohlkehle im Papierton, ohne sichtbare Kante
Echtes Werkzeug: Kamera, Laptop, Moodboard, Cases
Weiches, natürliches Licht, warme Töne
Viel Raum um die Szene

Porträts nie freistellen, sondern weich in den Papiergrund ausblenden.
Rahmen

Kunde · Leistung · Desktop + MobileLive ansehen

Kunden-CI

1920 × 1200 · heller Rahmen, Kopfzeile in Papier mit Signal-Linie. Geräte auf Terracotta: iMac mittig, iPad links, iPhone rechts. Nur Schlagschatten an den Geräten.
21 / 28

Eigener Rahmen, fremde CI.

Eigene Bilder folgen festen Regeln. Kundenarbeit wird nie umgefärbt: Der Rahmen ist immer diese Marke, der Inhalt bleibt in der CI des Kunden.
22Icons07 · Icons & Bewegung

Icon wählen

Leit-Icon
Pfeil, auch in Buttons und Links

Raster
24 × 24

Kontur
1,6 px, ohne Füllung

Im Kreis
48 px, 2 px Linie

22 / 28

Feine Linien, ruhige Wege.

Icons sind eigene Konturzeichnungen im 24er-Raster, ohne Füllung, in currentColor. Leit-Icon ist der Pfeil. Nie Icon-Fonts, nie Emojis.
23Bewegung07 · Icons & Bewegung

Ease-out · Standard
cubic-bezier(.16, 1, .3, 1)

Ease-in-out
cubic-bezier(.65, 0, .35, 1)

Hover
0,25 bis 0,35 s. Karten heben sich, der Pfeil dreht sich um 45°.

Einblenden
0,8 s, 24 px von unten.

Headlines
Scramble durch A bis Z und 0 bis 9 beim Hover:

Cursor
Punkt 7 px und Ring 34 px, über Links 64 px.

Scroll
Smooth Scroll, Kennzahlen bauen sich auf, Marquee läuft endlos.

23 / 28

Weich und kurz.

Bewegung ist weich und kurz, sie bestätigt und lenkt nie ab. Bei „Bewegung reduzieren“ ist alles davon aus.
24Tonalität08 · Stimme
Tonlage

Wer spricht

Ich, und ich duze.
Beispiele

Lass uns was bauen, das auffällt.
Keine Vorlage. Ein System.
Kurzes Gespräch: worum geht’s, was ist das Ziel?

Keine Ausrufezeichen · keine Emojis · keine Superlative · kein Agentur-Deutsch
24 / 28

Bold, erwachsen, nüchtern.

Die Marke klingt wie ein Art Director, der weiß, was er tut, und es nicht laut sagen muss. Direkt, auf Augenhöhe, ohne Floskeln.
25Wording08 · Stimme

Gruppe wählen

Buttons & Links
Leistungen
Prozess
Werte
Kennzahlen · überall gleich

25 / 28

Immer dieselben Worte.

Wiederkehrende Formulierungen stehen überall exakt gleich, auf der Website, in Angeboten und in Case Studies. Klick auf einen Eintrag kopiert ihn.
26Geschäftsausstattung09 · Anwendungen

Anwendung wählen

Visitenkarte · 85 × 55 mm

Signal mit Monogramm in Braun.

Klick auf die Karte dreht sie um.

26 / 28

Papier, das man erkennt.

Rechnungen, Angebote und Karten laufen in denselben Schriften und Farben wie die Website. Beträge stehen in Martian Mono, Tabellenlinien in Linie.
27Digital & Social09 · Anwendungen

Kanal wählen

Rolle
Das Zuhause der Marke
Adresse
silaspittner.com
Navigation
Projekte · Über mich · Backstage
Aktion
Projekt anfragen

27 / 28

Vom Tab bis in den Feed.

Die Website ist das Zuhause der Marke. Instagram zeigt Arbeit als Case-Study-Carousel in der Papier-Variante, das Monogramm übernimmt Favicon und Profilbild.
28Case Studies09 · Anwendungen

01 Geräte-Mockup

Rahmen

Format
1920 × 1200 · Papier

Kopf
Wortmarke links, „Kunde · Leistung · Desktop + Mobile“ mittig, „Live ansehen“ rechts.

Intro
Pill „Case Study 01 · Webdesign“, Kundenname in Fraunces, Headline mit Akzentwort.

Meta
Kunde · Leistung · Umfang · Live

Fußzeile
Silas Pittner · Art Direction, Wiesbaden

Case Study ansehen

28 / 28

Sechs Slides, ein Ablauf.

Jede Case Study folgt demselben Ablauf: Webdesign im hellen Rahmen, Branding im dunklen. Beim Branding richtet sich die Mitte nach dem Projekt.

Projekte ansehen