Das Brandbook unserer eigenen Agentur (Oktober 2026): dieselben Regeln, die wir für Kunden schreiben, gelten auch für uns. Die Marke lebt auf einer dunklen Bühne, mit dem orangen Punkt über dem „i“ und dem Licht der „Kerze“: Wir wissen, was in einer Marke ins Licht gehört.
Umfang: ein Brandbook mit 17 Seiten in drei Sprachen (DE, RU, UA) und ein Markenpaket – Logo in vier Varianten, Icon „it“ für Avatar und Favicon, Palette aus der Website, Montserrat als einzige Schrift, Komponenten der Website, ein SMM-Konzept mit 3–4 Posts pro Woche und vier Rubriken, fünf Highlights für einen Handy-Bildschirm, Instagram-Vorlagen und unsere Garantien: lizenzierte Inhalte und PageSpeed 95+.
Das Brandbook ist unser Arbeitswerkzeug: Jeder Post, jeder Bericht und jede Seite von it-stadt.de entsteht nach diesen Regeln.
Aufbau des Brandbooks
Unsere eigene Marke, nach denselben Regeln
Alle 17 Seiten des IT-Stadt-Brandbooks, Kapitel für Kapitel, in unseren Farben und unserer Schrift: Logo, Palette, Montserrat, Website, SMM-Konzept mit 3–4 Posts pro Woche, Highlights, Instagram-Vorlagen und unsere Garantien.
Brandbook · Version 1.2 · Oktober 2026
Digitalagentur
in Göttingen.
Website-Entwicklung · SEO · Google Ads · Social Media · UI/UX
it-stadt.de · @it_stadt · DE · RU · UA
Über die Marke
Was für eine Marke
Digitalagentur in Göttingen: Websites, SEO, Google Ads, Social Media und UI/UX aus einer Hand, mit einem festen Ansprechpartner. Die Marke ist präzise, technisch und ruhig: dunkle Bühne, das Licht der „Kerze“, der orange Punkt über dem „i“.
- Gesicht der Marke
- Serhii Kolisnyk, Gründer; SEO seit 2010, Netzwerk aus Fachleuten seit 2013
- Versprechen
- „Websites und SEO, die Kunden bringen.“ Mit einem festen Ansprechpartner
- Die Kerze
- Wir haben einen langen Weg durch die Labyrinthe des Marketings hinter uns und wissen, was in einer Marke ins Licht gehört
- Prinzip
- „Schriftlich. Damit nichts verloren geht.“
- Sprache und Ton
- Deutsch mit „Sie“, RU / UA als eigene Texte. Kurz, konkret, mit Zahlen
Inhalt
- 01Hauptlogo03
- 02Farbvarianten des Logos04
- 03Regeln für das Logo05
- 04Icon „it“ und Favicon06
- 05Grafische Elemente07
- 06Farben08
- 07Schrift09
- 08Website und Komponenten10
- 09SMM-Konzept: 3–4 Posts pro Woche11
- 10Highlights und Profil12
- 11Instagram: Beispiele13
- 12Slide-System14
- 13Bilder, KI und Texte15
- 14Fakten für Inhalte16
- 15Dateien17
Original: PNG 561 × 208 und 1142 × 398. Eine Vektordatei gibt es noch nicht; für Großformat separat anlegen.
01 · Hauptlogo
Wordmark „it-stadt“
Zeile 1 · Wortmarke
it-stadt
Kleinbuchstaben mit Bindestrich, Grotesk, Grau #71706F. Über dem „i“ der orange Punkt #F47920: das Licht der Marke.
Zeile 2 · Deskriptor
DIGITAL AGENCY
Versalien mit weiter Laufweite, zentriert unter der Wortmarke. In der Vollversion immer dabei.
Platzierung
Oben links / unten links
Website-Header links. Berichte: 110 px hoch. Creatives 1080: unten links, 72–90 px.
02 · Farbvarianten
Vier Varianten für jeden Hintergrund
Form und Proportionen bleiben gleich. Der Punkt bleibt orange, außer in der Mono-Version.
- Grey
- Standard: dunkle Bühne – Website, Berichte, Creatives
- White
- auf Fotos, grauen und farbigen Flächen
- Ink
- weißes Papier: Rechnungen, Verträge, Druck
- Mono White
- einfarbiger Druck, Folie, Gravur
03 · Regeln
So wird das Logo verwendet
Ja
- Schutzraum: mindestens die Höhe des „t“ auf allen Seiten.
- Mindestgröße: 30 mm im Druck, 120 px am Bildschirm.
- Feste Höhe, Breite auto. Nur fertige Dateien aus 01_Logo.
- Standard ist dunkler Grund; auf Hell nur die Ink-Version.
Nein
- Wortmarke nie nachsetzen. Im Fließtext: „IT-Stadt“.
- Nicht verzerren, neigen oder drehen.
- Punkt nicht umfärben; keine Schatten, Konturen, Neon.
- Graue Wortmarke nie auf mittelgrauen Grund.
04 · Icon
„it“ als Avatar und Favicon
Das Icon sind die ersten zwei Buchstaben der Wortmarke mit demselben Punkt. Es ersetzt das Logo nur dort, wo das volle Logo keinen Platz hat.
- Instagram · Facebook
- Avatar, Kreis
- WhatsApp Business · Google
- Avatar, Kreis
- Website
- Favicon, Lesezeichen
- Projekt-Screenshots
- Wasserzeichen
- Stories
- Fußzeile, wenn das volle Logo nicht passt
Größen
96 px64 px48 px32 px16 pxDie Kerze: unsere Erfahrung. Wir sind lange durch die Labyrinthe des Marketings gegangen und wissen, was in einer Marke ins Licht gehört. Eine Lichtquelle pro Layout; auf der Website folgt sie dem Cursor.
05 · Grafische Elemente
Bühne, Licht und feine Linien
- Konturwörter
- DIGITAL, AGENCY, it-stadt: große Buchstaben nur als 1-px-Kontur. Das Wort steht immer vollständig im Bild. Hintergrund, kein Text.
- Eyebrow „// “
- Dachzeile über jedem Abschnitt: Montserrat 700, Versalien, Laufweite. Farbe nach Ebene: Accent → Gold → Dim.
- Status-Pill
- Transparent, Kontur 0,75 px, Radius 100. Nur für Status, Tags, Plattformen.
- Schritt-Nummern
- Nur für echte Abfolgen. Zahl im Kreis mit Haarlinie, ohne Füllung.
- Haarlinien statt Rahmen
- Abschnitte und Zeilen trennen 1-px-Linien. Keine Rahmen, Schatten oder umrandeten Karten.
06 · Farben
Ein dunkles Thema, ein Akzent
≈ 85 % Ink · 12 % Text · 3 % Accent. Gold und Good nur punktuell. Kein helles Thema; Ausnahme: Druck auf weißem Papier (Logo Ink).
- Ink#08090DRGB 8, 9, 13CMYK ca. 38 31 0 95Grund für alles: Website, Berichte, Creatives
- Ink 2#0E1016RGB 14, 16, 22CMYK ca. 36 27 0 91Einzige erhöhte Fläche: Menü, Header
- Foreground#EDEEF2RGB 237, 238, 242CMYK ca. 2 2 0 5Haupttext und Überschriften
- Muted#8A8D9ARGB 138, 141, 154CMYK ca. 10 8 0 40Fließtext, zweite H1-Zeile
- Dim#80848FRGB 128, 132, 143CMYK ca. 10 8 0 44Labels, Footer (WCAG AA)
- Accent#FF6A3DRGB 255, 106, 61CMYK ca. 0 58 76 0Buttons, Links, Zahlen, Dachzeilen
- Gold#FFC857RGB 255, 200, 87CMYK ca. 0 22 66 0Zweite Ebene: „wichtig“
- Good#33C481RGB 51, 196, 129CMYK ca. 74 0 34 23Nur „OK“ / positive Veränderung
- Logo-Grau#71706FRGB 113, 112, 111CMYK ca. 0 1 2 56Nur die Wortmarke
- Logo-Orange#F47920RGB 244, 121, 32CMYK ca. 0 50 87 4Nur der Punkt in Logo und Icon
Tokens aus dem CSS von it-stadt.de. Logofarben aus der Original-PNG gemessen. CMYK ist ein Richtwert.
07 · Schrift
Montserrat und sonst nichts
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz äöüß
АБВГҐДЕЄЖЗИІЇЙКЛМНОПРСТУФ
0123456789 € % „“
Variable Font 100–900, Latein und Kyrillisch. SIL Open Font License; auf der Website nur self-hosted (DSGVO). Keine weiteren Schriften.
- 800 ExtraBoldWebsites, die Kunden bringen.Überschriften, Hero-Zahlen
- 700 BoldLEISTUNGEN · PROJEKTELabels, Dachzeilen, Buttons
- 600 SemiBoldKostenlose BeratungUnterzeilen, Listenpunkte
- 500 MediumWebsite-Entwicklung, SEO und AdsFließtext
- 400 RegularGefunden werden, besonders lokal.Lange Texte, Fußnoten
| Slide 1080 × 1350 | Größe | Stärke |
|---|---|---|
| Cover-Headline | 96–104 px | 800 |
| Slide-Headline | 64–66 px | 800 |
| Hero-Zahl | 300–380 px | 800 |
| Fließtext | 28–36 px | 500 |
| Dachzeile / Zähler | 22–26 px | 700 |
| Button | 30–32 px | 700 |
08 · Website
Komponenten it-stadt.de
Überall Ink; Ink 2 nur für Menü und Sticky Header. Abschnittstitel: Dachzeile „// “ → H2 800 → bei Bedarf Konturwort im Hintergrund.
LEISTUNGEN ▾PROJEKTEÜBER UNSKONTAKTKostenlose Beratung ↗Leistungskarte
Erfahrungswerte
CTA-Block
09 · SMM-Konzept
3–4 Posts pro Woche, ohne Lärm
Vier Rubriken: bei uns in Arbeit, unsere Kunden, Erfolge und Momente. Höchstens 4 Posts pro Woche, jeder muss sich lohnen. Kein Anlass, kein Post.
#IN ARBEIT30 %
Bei uns in ArbeitEntwürfe, Code, PageSpeed-Messungen, Korrekturen, Arbeitsplatz. In jedem Post ein praktischer Tipp.#KUNDEN30 %
Unsere KundenWer der Kunde ist, die Aufgabe, die Lösung, das Ergebnis; Bewertungen. Nur mit schriftlicher Freigabe.#ERFOLGE15 %
ErfolgeLighthouse 100, Website-Launches, Rankings, Zertifikate. Nur geprüfte Zahlen mit Messdatum.#MOMENTE25 %
MomenteDie Menschen hinter dem Studio: Serhii, Team, Göttingen, Events, unsere Freizeit. Privates nur mit Zustimmung.Woche · gefüllt: Post oder Reel · gestrichelt: optional · Kontur: Story
- MoStory: Wochenstart, Umfrage
- Di#IN ARBEITReel 15–30 s
- MiStory: Prozess live
- Do#KUNDENKarussell: Case oder Bewertung
- Fr#ERFOLGEoptional, wenn es Anlass gibt
- Sa#MOMENTEFoto oder Reel
- SoPause
Monat ≈ 14 Posts: 4–5 In Arbeit · 4 Kunden · 2–3 Erfolge · 4 Momente. Stories 3–5 pro Woche. Posts auf Deutsch mit „Sie“; einmal pro Woche ein Reel oder Karussell auf RU / UA.
10 · Highlights und Profil
Ein Profilmenü, das verkauft
5 Highlights: genau ein Handy-Bildschirm, ohne Scrollen. Leistungen, Team und Kontakt stehen auf der Website (Link in Bio).
- ProjekteCases kurz: vorher / nachher, Link zum Projekt
- In ArbeitProzess und Backstage: Entwürfe, Code, Messungen
- KundenKundenstimmen: Google-Screens, Videos (mit Freigabe)
- ErfolgePageSpeed 100, Launches, Top 20, Zertifikate
- FreizeitUnsere Freizeit: das Team abseits der Arbeit, Göttingen, Ausflüge, Feste
- Name
- IT-Stadt | Webagentur Göttingen · SEO
- Link
- it-stadt.de/kontakt
- Anpinnen
- #KUNDEN Haarentfernung Göttingen · #ERFOLGE PageSpeed 100 · #MOMENTE Wer wir sind
11 · Instagram
Posts und Stories: so sieht es aus
Cover → 3–5 Slides → finaler CTA. Hero-Zahl statt Diagramm, wenn die Aussage eine Zahl ist.
- Rhythmus
- Das Raster ist fast ganz dunkel, den Rhythmus macht das Licht: die Kerze mal rechts, mal links.
- Sprache
- Deutsch mit „Sie“. RU / UA als eigene Posts, keine Sprachmischung auf einem Slide.
- Stories
- 1080 × 1920: oben 250 und unten 360 px frei
12 · Slide-System
Aufbau und Rubriken
- Format
- Posts 1080 × 1350 (4:5). Stories / Reels 1080 × 1920
- Ränder
- 80 px seitlich; Dachzeile und Zähler 72 px von oben
- Cover
- „// RUBRIK“ → zweifarbige Headline 96–104 px → Unterzeile → Kerze oder Konturwort
- Innen-Slides
- Headline 66 px → Zeilen mit Haarlinien → Block „// WICHTIG“
- Zähler
- „2 / 5“ oben rechts
- Fußzeile
- Haarlinie, Logo Grey 80 px links, Website rechts
Vorlage je Rubrik
13 · Bilder, KI und Texte
Was wir garantieren und was wir nicht tun
Fotos, Videos, Musik
- Nur lizenzierte Fotos, Videos und Musik, eigens für Ihr Projekt gekauft: Website, Social Media, Werbung.
- Sie sind vor Urheberrechtsforderungen geschützt, bei Bild, Video und Ton.
- Eigenes Material: Screenshots und Mockups echter Projekte, Arbeitsprozess, Team.
Künstliche Intelligenz
- KI beschleunigt einzelne Schritte: Entwürfe, Varianten, Bearbeitung, Analyse.
- Unkontrolliertes Generieren gibt es bei uns nicht.
- Jedes Ergebnis prüft und finalisiert ein Mensch.
Texte
- Deutsch mit „Sie“, kurz und konkret; RU / UA als eigene Texte, keine Maschinenübersetzung.
- Zahlen nur geprüft und mit Messdatum.
- Keine Ranking-Versprechen.
14 · Fakten
Immer griffbereit
Kontakt
com@it-stadt.de · WhatsApp +49 160 4511849 · Instagram @it_stadt
Studio
IT-Stadt · Inhaber Serhii Kolisnyk · Fröbelweg 18, 37081 Göttingen
Kunde werden
Erstberatung kostenlos · Briefing → Angebot in 3 Tagen · Abstimmung schriftlich
Erfahrung
15+ Jahre SEO und Webentwicklung · bis 25 Menschen im Team von Union-Studio (2013–2023)
Garantien
PageSpeed 95+ (wo möglich 100) · nur lizenzierte Fotos, Videos, Musik
Sprachen und Region
DE · RU · UA · Göttingen, Niedersachsen, Kassel, Hannover und online
Leistungen: 5 Bereiche, 34 Unterleistungen
- Website-Entwicklung9 Unterleistungen
- SEO10 Unterleistungen
- Google Ads7 Unterleistungen
- Social Media4 Unterleistungen
- UI/UX & Webdesign4 Unterleistungen
Vor Veröffentlichung mit it-stadt.de abgleichen; die Website ist die Quelle. Stand 14.10.2026.
15 · Dateien
Was wo liegt
| Datei | Inhalt |
|---|---|
| IT-Stadt-Logo_grey | Hauptlogo für dunkle Flächen |
| IT-Stadt-Logo_white | Logo auf Fotos und Farbflächen |
| IT-Stadt-Logo_ink | Logo für weißes Papier |
| IT-Stadt-Logo_mono-white | Einfarbige Version |
| IT-Stadt-Icon_512 | Icon „it“: Avatare, Favicon |
| Montserrat (variable) | Einzige Schrift |
| Brandbook_IT-Stadt_DE / RU / UA.pdf | Brandbook, 17 Seiten |
Ihre Marke, genauso durchdacht?
Logo, Farben, Schriften, Social-Media-Vorlagen und Regeln in einem Brandbook, mit dem Sie und Ihr Team selbst arbeiten können.