BRAND DESIGN

Logo

Licht und Schatten: Die astronomische Referenz erlaubt ein subtiles, aber starkes Spiel mit Helligkeit und Dunkelheit. Das Logo kann auf hellen wie dunklen Flächen funktionieren und symbolisiert so den Übergang vom Unklaren zum Klaren.

Horizont und Perspektive: Die Zahl verweist auf ein konkretes Maß – eine Neigung, einen Winkel, eine Perspektive. Sie lädt dazu ein, Denk- und Sichtweisen zu verändern.

Spiel mit Physik und Astronomie: Das visuelle Konzept bietet Raum für dynamische, atmosphärische Designs. Gradlinien, Schattierungen, Lichtverläufe, Kartenmetaphern – all das erlaubt ein hohes Maß an gestalterischer Freiheit und strategischer Tiefe. 360°-Denken: Die Gradzahlen laden zu gedanklicher und visueller Vollständigkeit ein – etwa in der Entwicklung holistischer Markenstrategien.

Farbanwendungen

Layout Achse

Unser Logo ist dynamisch und flexibel gestaltet – es passt sich mühelos an Ecken, Kanten und sein Umfeld an. Durch seine Anpassungsfähigkeit wird es ein integraler Bestandteil jedes Designs.

Movement

“Blind Spot”

Der ⬤ unseres Logo heißt “Blind Spot”.

Dieser ist ein zentrales Gestaltungselement und kann auch unabhängig vom Logo verwendet werden. Er ist dynamisch, kann sich bewegen und frei verformen. In unseren Cases dient er als Spotlight und hebt zentrale Elemente hervor.

Größe

Das Logo wird zunächst an die Breite des jeweiligen Elements angepasst und anschließend auf 10 % bis 20 % seiner ursprünglichen Größe skaliert.

Mindestgröße für das Logo ist in der Breite ist 2 cm (gekippte Version 1,5 cm)

Dont’s

Dieser Klassiker der Brand Books darf natürlich nicht fehlen, aber es sollte jedem klar sein, dass das natürlich no gos sind.

Safezones

Rund um das Logo ist ein Mindestabstand einzuhalten, in dem sich keine Text- oder wichtige Bildinformation befinden darf. Aus der Höhe des Logos ergibt sich die Rastereinheit mit X.

Für den Abstand zu anderen Elementen oder zum Rand wird mindestens der doppelte Wert von ‚X‘ empfohlen. Dieser definierte Freiraum, sorgt für eine ausgewogene Gestaltung und lenkt den Blick gezielt auf das Logo.

Typografie

Unsere Typografie basiert auf zwei Schriften: Britti Sans als Hauptschrift für Headlines und Body-Texte sowie VCR OSD Mono als Eyebrow-Font für dezente Akzente.

Britti Sans

Beyond the obvious

VCR OSD Mono

the dawn of good ideas

Hauptschrift Britti Sans

Die Hauptschrift unseres Brandings ist die „Britti Sans“. In der höchsten Instanz der Headline-Hierarchie wird sie in Versalien gesetzt, insbesondere für herausragende Elemente oder wenn es inhaltlich sinnvoll ist, die Aussagekraft zu betonen. Die Britti Sans Font Family ist eine elegante, klare und minimalistische Grotesk-Schriftart, die die Essenz des modernen Sans-Serif-Designs verkörpert. Durch ihre abgerundeten Details passt sie perfekt zu unserem visuellen Konzept und zu unserem Logo.

H1 | Britti Sans Medium Versalien | > 96 px | Zeilenabstand: 0.8 bis 1

VERSALIEN

H2 - H5 | Britti Sans Medium | 72 - 32 px | Zeilenabstand: 1.2

Headlines

Subheadline/Einleitung | Britti Sans Medium | 24 px | Zeilenabstand: 1.2

Wer die Augen offen hat muss nicht blind glauben,  ob etwas funktioniert, sondern sieht Potenzial.

Paragraph | Britti Sans Regular | 16 - 18 px | Zeilenabstand: 1.5

Unsere Fähigkeit, genauer hinzusehen, akribisch zuzuhören und uns tief hineinzufühlen. Das erste Briefing nicht für bare Münze zu nehmen, über den Tellerrand hinausschauen. Etwas, das wir auch von unseren Kunden, wie Spielmann, als Feedback bekommen. Viele Marken/Kunden sind blind für ihre eigenen Barrieren. Sie sind so mit sich selbst beschäftigt, dass sie neue Perspektiven nicht wahrnehmen – wollen aber Veränderung.

Eyebrow-Font

Als Eyebrow-Font verwenden wir die „VCR OSD Mono“. Sie verweist dezent auf unsere digitalen Wurzeln, ohne dabei aufdringlich zu wirken, und bildet einen ansprechenden Kontrast zur „Britti Sans“. Die Eyebrow wird typischerweise in unserer Sekundärfarbe oder in einer 50 %-Tönung der Hauptfarbe eingesetzt, um visuelle Akzente subtil zu unterstreichen.

Eyebrow & Hervorhebung | VCR OSD Mono Versalien | 14 px | Zeilenabstand: 1.2

Beyond the Obvious

Anwendungsbeispiele

In ihrer Anwendung fungiert sie als Eyebrow, kann aber auch verwendet werden, um subtile Nachrichten zu vermitteln, wie zum Beispiel lustige Hinweise, Nachrichten mit einem Augenzwinkern oder verstecktere Botschaften. Ein Beispiel hierfür sind die SM-Memes, mit denen wir unsere seriösere CI brechen.

Kontrast

Natürlich sollen zentrale Informationen immer gut lesbar sein, jedoch spielen wir auch gerne mit Kontrast um unsere Message “Wir bringen die Dinge ans Licht” hervorzuheben. So können versteckte Botschaften auch einmal mit geringen Kontrast vorkommen.

Hervorhebungen

Hervorhebungen in Text und Menü werden mit einer dezenten 2 px Linie unterstrichen. Für Headlines wird eine Fläche im Hintergrund gesetzt. Die Höhe ergibt sich aus 1/3 der Schriftgröße und orientiert sich mittig an der unteren Kante.

Zahlen

+ 60 %

klicks auf Social media

+ 60 %

klicks auf Social media

1.588

klicks auf Social media

+ 60 %

klicks auf Social media

1.588

klicks auf Social media

Farben

Verlauf

Unsere Farbwelt orientiert sich am Farbspektrum des Verlaufs. Dabei vermeiden wir den Einsatz des dunkelsten Tons (#000000) und des hellsten Tons (#ffffff) und greifen stattdessen auf einen dezenten Blauton zurück, der unser Design harmonisch abrundet.

Farbwelt

Wir vermeiden den Einsatz des dunkelsten Tons (#000000) und des hellsten Tons (#ffffff). Unser schwarz ist der Farbton #001133 und unser weiß #F1F1F7.

DUSK BLUE

HEX: #001133

White

HEX: #F1F1F7

Morning Fog

HEX: #001133 50%

International Orange

HEX: #FD4307

Blue Hour

HEX: #1643FF

Cloud

HEX: #C4DBF4

Primary

Für die hierarchische Abgrenzung setzen wir gezielt auf Kontraste. Am häufigsten verwenden wir dabei 50 % unseres dunkelsten Tons, um subtile, aber effektive Differenzierungen zu schaffen.

HEX

#001133

CMYK

100/91/47/64

HEX

#001133 50 %
oder #808899

HEX

#F1F1F7

Accent

Für ein dynamisches Design und klare Hervorhebungen stehen uns zwei Akzentfarben zur Verfügung: ein leuchtendes Blau und ein kontrastreiches Orangerot. Diese Farben verleihen dem Design Energie und setzen prägnante Highlights.

HEX

#C4DBF4

HEX

#1643FF

HEX

#FD4307

CMYK

0/82/93/0

Grid & Trennlinien

Trennlinien

Trennlinien werden in einer dezenten Abstufung von 10 % von #001133 gestaltet, um klare Abgrenzungen zu schaffen, ohne die visuelle Ruhe zu stören. Themen, die in sich geschlossen sind – wie beispielsweise die Trennung der Blog-Hero-Sektion vom eigentlichen Blog-Inhalt – werden durch durchgehende Linien voneinander abgegrenzt. Inhalte, die kontextuell zusammengehören, können bei Bedarf mit einer gestrichelten Linie getrennt werden, um die inhaltliche Verbindung visuell zu unterstreichen.

Corner Radius

Der Corner Radius orientiert sich dezent an den Rundungen unseres Logos und unserer Hausschrift. Mit 2 px bleibt er subtil, sorgt aber für eine sanfte Abrundung.

Bildwelt

Repräsentation unserer Arbeiten

Die hochwertige Aufarbeitung unserer Arbeiten ist zentral für unsere Marke. Dabei versuchen wir, die Vielseitigkeit eines Projekts zu zeigen und Details hervorzuheben, wie beispielsweise eine tolle Buttonanimation bei einer Website.

Bei Kampagnen mit OOH und DOOH versuchen wir, diese in der Realität zu fotografieren.

Sollte das nicht möglich sein, arbeiten wir ausschließlich mit realistischen Mock-ups.

Fotografien OOH und Produkten

Mockups

Hervorhebung von Design und Konzept

Mitarbeiter*innen Fotos

‍

Konzept: „Wir bei Achtzehn - Grad“

Doppeldeutung: Einerseits zeigen wir die Menschen, die die Agentur ausmachen – andererseits zeigen wir uns bei Achtzehn Grad, wenn die Sonne aufgeht - kuschelig im Bett, schon am Arbeiten, manche beim Frühstück, manche noch beim Dösen.

Kamera und Setup MA Fotos

Unser Bildstil ist neo-analog und erinnert an Sofortbildkameras: sichtbares Film-Grain, punchy, kontraststarke Farben (vor allem leuchtende Blautöne) und harter Aufsteckblitz mit markanten Schlagschatten im 90er/2000er „Blitzknipser“-Look. Die Motive sind spontan, ungestellt und nahbar – echte Büro-Momentaufnahmen statt Corporate-Posen, ergänzt durch bewusst „unperfektes“ Post-Processing mit Vintage-Film-Ästhetik.

Before and after

Kamera Social Media

Zur Auflockerung unseres professionellen Auftritts setzen wir bei unserem persönlichen Content auf eine kleine Digitalkamera. Damit können wir schnell authentische Situationen im einzigartigen Look festhalten.

Sticker

Um mehr Leichtigkeit in das Design zu bringen und natürlich beyond the obvious zu sein, binden wir auf den ersten Blick “random” Elemente ein. Diese stehen aber stellvertretend für die Agentur und deren verschiedene Personen und Persönlichkeiten.

Sticker Arten

Es gibt drei verschiedene Arten von Stickern, bei denen jeweils auch andere Texturen, Folien und Schatten zur Auswahl stehen. Wenn ein neuer Sticker erzeugt wird, sollte man diesen immer abändern.

Merch

Next CHAPTER

downloads